Convert SVG to PNG
Render an SVG to a PNG at whatever size you need, in your browser. Pick the scale first, because pixels can’t be scaled back up.
Drop SVG files here or paste from the clipboard.
Your files are processed on this device. Nothing is uploaded.
What actually changes
An SVG is a set of drawing instructions with no fixed resolution; a PNG is a grid of pixels. Converting runs the instructions once at a size you choose and freezes the result, so the output is sharp at that size and blurry above it. Transparency is preserved. Anything interactive, animated or scripted in the SVG is flattened to a single static frame and text becomes pixels rather than selectable characters.
| SVG | PNG | |
|---|---|---|
| Compression | Lossless | Lossless |
| Transparency | Yes | Yes |
| Format can be animated | Yes | No |
Fonts and external references don’t come through
An SVG that names a font it doesn’t embed will render with whatever the browser substitutes, which is frequently not the font you designed with and the difference is usually obvious in the spacing. The same applies to any image, stylesheet or font the SVG pulls in over the network: rendering happens in an isolated context where those requests are blocked, so they simply don’t appear. Convert text to outlines in your design tool before exporting and embed images as data URIs.
Why you would leave a vector behind
SVG is better than PNG in almost every way except support. Email clients strip it, plenty of upload forms reject it, social platforms won’t take it, office software handles it unevenly and anything embedded in hardware is unlikely to have heard of it. Rendering to PNG is how a vector gets into those places.
The other reason is predictability. An SVG renders slightly differently depending on the renderer, especially where fonts, filters and blend modes are involved. A PNG looks the same everywhere because the rendering already happened.
Pick the size before you convert, not after
This is the one decision that matters. A PNG rendered at 400 pixels wide and then scaled up to 800 in a page is visibly soft; rendered at 800 and displayed at 400 it is crisp. Since the SVG can be rendered at any size for free, render generously.
What gets flattened
SMIL animations and CSS animations inside the SVG produce a single frame, whichever the renderer considers the starting state. Interactivity, hover styles and scripts are gone entirely. Filters and blend modes generally render, but they’re the parts most likely to differ between renderers, so check the result rather than assuming.
Common questions
What size should I render at?
At least twice the size the image will be displayed, because high-density screens use two or three device pixels per CSS pixel. Rendering at 2x is the safe default and is what this page starts on. If the PNG is destined for print rather than a screen, go much higher: printers work at 300 dots per inch, so a 4 inch wide image wants 1200 pixels.
Why does my SVG render at the wrong size?
Because it has no width and height attributes, only a viewBox, so it has no intrinsic size and the browser falls back to what the viewBox implies. This page reads the width and height first, then the viewBox, then defaults to 300 by 150 as the SVG specification requires. Setting explicit width and height in the file removes the guesswork.
Can I convert a PNG back to an SVG?
Not meaningfully. Going from vector to pixels discards the shapes and keeps only the result. Tracing software can guess at shapes from an image, but it is guessing and the output looks nothing like a hand-drawn vector. Keep the SVG as the master.
Does the transparent background survive?
Yes, PNG carries a full alpha channel, so anything the SVG left empty stays transparent. If you want a solid background instead, convert to JPG, which flattens transparency onto a colour you pick.