Free SVG to PNG Converter

SVG vs PNG: Vector vs Raster

SVG (Scalable Vector Graphics) is a vector format (XML markup that describes shapes mathematically. A circle in SVG is "draw a circle of radius R at (x, y) with fill colour F") instructions, not pixels. The browser renders the instructions at whatever size you display the SVG, so it stays sharp at 1×, 2×, 3× and beyond. PNG (Portable Network Graphics) is a raster format, a fixed grid of pixels at fixed colour values. PNG is what you get when you "freeze" an SVG at a specific resolution. Converting SVG to PNG is called rasterisation: choosing a target pixel grid and rendering the vector instructions at that fixed size, after which the result is a normal raster image with all the size constraints that implies.

SVG was developed by the W3C SVG Working Group founded in 1998; SVG 1.0 became a W3C Recommendation on 4 September 2001; SVG 1.1 followed on 14 January 2003 and was the dominant version for the next decade; SVG 1.1 Second Edition arrived 16 August 2011; SVG 2 reached Candidate Recommendation on 4 October 2018 but has stalled, it remains CR rather than full Recommendation as of 2026. PNG became a W3C Recommendation on 1 October 1996 and IETF RFC 2083 in March 1997; the format has been stable since.

Why You Need to Convert

• Email clients dropping SVG support. Microsoft began retiring inline SVG support in Outlook for the web and the new Outlook for Windows starting September 2025, with the rollout completed in October 2025, inline SVGs now render as blank space. SVG attachments still work, but inline-styled email templates that previously embedded SVG logos need PNG fallbacks. Gmail's web interface renders SVG fine; Apple Mail does too; the major break is on the Microsoft side.
• Social media platforms. Twitter/X, Instagram, Facebook, LinkedIn either reject SVG uploads outright or compress and re-encode them to PNG/JPEG before display. Pre-rasterising at the platform's preferred dimensions (1200×630 for Open Graph, 1080×1080 for Instagram) bypasses their lossy auto-conversion.
• App icon generation. iOS app icons must be 1024×1024 PNG (App Store listing) plus various device-specific sizes; Android adaptive icons render in-launcher at 432×432 (108dp at xxxhdpi) with 512×512 for the Play Store listing; PWA manifest icons typically need 192×192 and 512×512. SVG isn't accepted by any of these.
• Print-on-demand and prepress. Printful, Redbubble, Society6, RedPrint and most print-on-demand services require PNG (or PDF) at specific resolutions, usually 300 DPI for the target physical size. SVG isn't accepted in their upload flows.
• Legacy CMSes and apps. Older WordPress installs, legacy admin tools, document editors that pre-date browser SVG support, anywhere "must be PNG" is a hard requirement.
• Discord emoji and similar. Discord's custom emoji upload requires PNG (or animated GIF for animated emoji); recommended size 128×128 with a 256 KB file-size cap. SVG isn't accepted.

How the Conversion Works in Your Browser

The Canvas API rasterisation technique is straightforward but has subtle gotchas. The standard pipeline: load the SVG as an Image element via a Blob URL (URL.createObjectURL(svgBlob)) or directly as a data URI (data:image/svg+xml;base64,...); wait for the onload event; create a canvas at the desired output dimensions; call ctx.drawImage(image, 0, 0, width, height) to rasterise the SVG at the chosen size; export via canvas.toBlob('image/png'). Browser SVG renderers handle gradients, masks, filters, text and most of the SVG feature set correctly during this rasterisation. Three caveats matter. External resources fail under CORS: SVGs that reference external images (<image href="https://other-domain.com/photo.jpg">) or external fonts may not load if the cross-origin server doesn't return appropriate CORS headers, the canvas becomes "tainted" and toBlob throws a SecurityError. Embed images as data URIs and fonts as @font-face with data URI src to avoid this. SVGs containing <script> tags don't execute when loaded as Image, the browser's image decoder strips the scripting context for security. SMIL animations get flattened to a single frame at time=0; if the SVG depends on animation for its visual state, the rasterised PNG won't capture it. Cross-browser pixel differences: Chrome, Firefox and Safari produce subtly different rasterised output for the same SVG due to differences in their respective vector renderers; for production icons, render once and ship the PNG rather than relying on per-browser conversion at runtime.

Choosing the Right Output Resolution

SVG has no inherent resolution, the choice is yours. Common targets: iOS App Store listing icon 1024×1024; Android Play Store listing icon 512×512 (with the in-launcher adaptive icon at 432×432, designed within a 264×264 safe zone); PWA manifest icons 192×192 and 512×512; favicon historically 16×16, 32×32, 48×48 (modern favicon.ico bundles all three sizes; modern best practice ships icon.svg for browsers that support it plus a 192×192 apple-touch-icon.png fallback); Open Graph social card 1200×630; Twitter card 1200×675; Instagram square 1080×1080; Discord emoji 128×128; Slack emoji 128×128; print at 300 DPI requires 3× the inch dimension in pixels (a 4-inch logo print needs 1200×1200). For Retina-quality screen rendering, target 2× the displayed size, a 100×100 displayed icon should be exported at 200×200 to stay sharp on Retina screens.

How to Use This Converter

1. Provide the SVG. Drop a .svg file on the upload zone, or paste raw SVG markup into the text area. Both paths work the same way.
2. Set the output dimensions. Width and height in pixels; the lock-aspect-ratio toggle keeps proportions when you change one dimension. Maximum 8192×8192 (the canvas-size limit on most modern browsers; some hardware caps at 4096 or 8192).
3. Pick a background. Transparent (default, preserves the SVG's alpha channel), solid white, solid black, or any custom colour. Useful when the destination doesn't support transparency (some legacy print contexts).
4. Convert and download. The Convert button rasterises the SVG to the chosen size and shows the preview; Download saves the PNG to your device.

Honest Scope: What This Tool Does and Doesn't

This tool rasterises a single SVG to a single PNG at the chosen size. It does not generate the full multi-size icon set that app stores require (1024×1024 + 180×180 + 167×167 + 152×152 + 120×120 + 87×87 + 80×80 + 60×60 + 58×58 + 40×40 + 29×29 + 20×20 for iOS alone), for that, use a dedicated tool like RealFaviconGenerator or App Icon Generator. It does not optimise the resulting PNG (use the SVG Optimizer tool to clean up the source SVG first; for PNG optimisation use a separate compressor). It does not bundle multi-size favicon.ico output. It does not animate, exported PNGs are single-frame, even if the SVG had SMIL animation. For batch generation of many sizes from one SVG, use a CLI like sharp-cli (Node.js) or resvg-cli (Rust); the per-size conversion they do is the same as this tool, just scriptable.

Privacy: Why Browser-Only Matters Here

SVG files often contain proprietary brand assets, work-in-progress logos, internal product icons or designer-supplied source files under NDA. Server-side conversion services (CloudConvert, Online-Convert, Convertio) upload your SVG to their infrastructure where it sits in logs. This tool runs the entire rasterisation pipeline in your browser via the Canvas API, verify in DevTools' Network tab while you click Convert, or take the page offline (airplane mode) after it loads and the converter still works. Safe for unreleased brand work, internal product icons, NDA-bound designer files or any SVG you wouldn't want copied onto a stranger's hard drive.

Frequently Asked Questions

Why convert SVG to PNG instead of using SVG directly?

For most modern browsers, you don't have to. SVG renders natively in Chrome, Firefox, Safari, Edge and Opera, and is the right format for most web use. Conversion is needed when the destination doesn't support SVG: Microsoft retired inline SVG in Outlook web and new Outlook for Windows in September-October 2025; iOS / Android app icons must be PNG; print-on-demand services require PNG; Discord and Slack custom emoji upload PNG; some legacy CMSes still reject SVG uploads. For those contexts, you rasterise once and ship the PNG.

What resolution should I export at?

Match the destination. iOS app store listing: 1024×1024. Android Play Store: 512×512 (in-launcher adaptive icon: 432×432). PWA manifest: 192 and 512. Open Graph social card: 1200×630. Instagram square: 1080×1080. For Retina displays, export at 2× the displayed CSS size, a 100×100 icon should be 200×200 PNG to stay sharp. For print, 300 DPI means 300 pixels per displayed inch (a 4-inch logo print = 1200×1200 PNG). Maximum here is 8192×8192, which is the modern browser canvas limit.

Why is my SVG missing parts after conversion?

Three common causes. External resources blocked by CORS: if the SVG references images or fonts on another domain that doesn't return appropriate CORS headers, the canvas becomes "tainted" and the export silently drops them. Embed images as data URIs and fonts as @font-face with data URI src. Scripts inside the SVG don't execute: <script> tags are stripped by the browser's image-decoder security model, anything the script generates won't appear. SMIL animations render at time=0 (the start frame); animated visual state isn't captured. For SVGs that depend on JavaScript or animation, render in a real browser first then screenshot, or use Puppeteer headlessly.

Does it preserve transparency?

Yes when "Transparent" is selected as the background, the PNG retains the SVG's alpha channel, with semi-transparent pixels fully preserved. Choose a solid colour (white, black, custom) when the destination doesn't support transparency or when you need a specific surrounding colour baked in (some legacy print contexts).

Can I generate multiple sizes from one SVG?

Not in one click, this tool produces a single PNG per conversion. For app-store icon-set generation (the dozen or so sizes iOS and Android require), use a dedicated tool like RealFaviconGenerator (web), App Icon Generator (web), or a CLI like sharp-cli (Node.js) or resvg-cli (Rust), the per-size conversion they perform is the same Canvas-style rasterisation, just scripted across many sizes.

Are my SVG files uploaded?

No. Rasterisation runs entirely in your browser via the Canvas API. Your SVG and the resulting PNG never cross the network, verify in DevTools' Network tab while you click Convert, or take the page offline (airplane mode) after it loads and the converter still works. Safe for unreleased brand work, internal product icons, NDA-bound designer source files or any SVG you wouldn't want copied onto a stranger's hard drive.

Related Tools