An SVG is a vector: it describes a graphic with math, not pixels, so it can scale to any size without blur. A PNG is a raster: a fixed grid of pixels. Converting SVG to PNG — called rasterizing — means turning those infinite paths into a specific number of pixels. The single most important decision is what size to render, because that is what determines whether your PNG looks crisp or fuzzy.
We measured this ourselves. Our test diagram is 574 bytes of SVG text. Rasterised at 512 px wide it becomes 17.9 KB as PNG, 13.2 KB as JPG and 6.6 KB as WebP — roughly 12 to 32 times the original, and no longer scalable. Rasterise because a tool refuses SVG, not to save space. see the full measurements
Why you must choose a size
A photo has a natural resolution; an SVG does not. When you export it to PNG, something has to decide the pixel dimensions. If a tool just uses the SVG’s built-in width/height — often tiny for icons, like 24×24 — you get a tiny, soft PNG. Choose a larger output width up front and the same vector renders sharply at 512, 1024 or 2048 pixels. This is exactly what searches like “svg to png high quality” are really after.
The size you pick is therefore a size decision, not a detail. Our diagram is 574 B of vector instructions that can render at any dimension; the moment you export, the file is committed to one pixel grid and costs 17.9 KB as PNG. Export at the largest size you will actually display, at 2× for high-density screens, and nothing beyond that — every extra pixel is paid for on every page load.
What resolution to pick
| Use case | Suggested width |
|---|---|
| Favicon, small UI icon | 256–512 px |
| Blog image, app asset | 1024 px |
| Print, hero banner, large graphic | 2048 px or more |
Bigger is sharper but produces a larger file. When in doubt, render at 2× the size you’ll actually display it — screens with high pixel density (Retina, most phones) reward the extra detail.
Here is what the size choice costs, measured. Our test diagram is 574 B of SVG text. Rasterised at the default 512 px wide it becomes 17.9 KB as PNG (+3087%), 13.2 KB as JPG (+2262%) and 6.6 KB as WebP (+1082%). The SVG is smaller than all three by two orders of magnitude, because it stores instructions rather than pixels — and the moment you rasterise, the file grows with the square of the width you chose.
PNG, JPG or WebP?
- SVG to PNG — lossless and keeps transparency. Best for logos, icons and anything with a see-through background.
- SVG to JPG — smaller file, but no transparency (empty areas become white). Fine for a flat illustration on a solid background.
- SVG to WebP — modern format, small and supports transparency, ideal for websites.
If your SVG has a transparent background and you convert to JPG, that transparency is filled with white — so reach for PNG or WebP when you need to keep it.
The ranking above is the answer to this section: at the same 512 px, WebP (6.6 KB) beat JPG (13.2 KB) which beat PNG (17.9 KB). WebP also keeps transparency, which JPG cannot — so unless the destination genuinely cannot read WebP, the choice is made for you.
Format choice after rasterising is where the surprise usually is, so here is the same 574 B diagram from our test corpus through all three converters:
| Conversion | SVG in | Result | Change |
|---|---|---|---|
| SVG → PNG | 574 B | 17.9 KB | +3087% |
| SVG → JPG | 574 B | 13.2 KB | +2262% |
| SVG → WebP | 574 B | 6.6 KB | +1082% |
Every one of them is far larger than the vector it came from — PNG 17.9 KB, JPG 13.2 KB, WebP 6.6 KB — because the SVG stored a handful of shape instructions and the raster stores every pixel those instructions happened to cover. That is the real cost of rasterising, and it is why you keep the SVG.
Doing it privately, in your browser
Our converters rasterize entirely on your device — the SVG is never uploaded:
- Drop in one or more SVG files.
- Pick an output width; the height follows the aspect ratio automatically.
- Download the result, or zip several at once.
The reverse trip
Going the other way — turning a logo PNG back into a scalable vector — is a different process called tracing. If that’s what you need, see how to convert PNG to SVG, which explains when vectorizing works well and when it doesn’t.
Keeping text and thin lines crisp
Two things quietly ruin a rasterized SVG. First, fonts: if your SVG references a font the renderer doesn’t have, the text is silently swapped for a fallback and the layout shifts. Converting text to outlines (paths) in the source SVG before rasterizing guarantees the letters look identical everywhere. Second, hairline strokes: a 1px stroke at 24×24 becomes about 21px at 512 and stays sharp, but rendering at a smaller size than you’ll display forces the browser to upscale a bitmap — that’s the blur people blame on the format.
A quick note on DPI
A PNG stores pixels, not inches, so “DPI” is irrelevant on screen — a 1024px image is 1024px whether a tag says 72 or 300. It only matters for print, where physical size × target DPI = pixels. A graphic printed 4 inches wide at 300 DPI needs 1200px; at 150 DPI, 600px. So for print, work backward from the final size and export at least that many pixels.
Common mistakes
- Letting the tool use the SVG’s tiny built-in size. A 24×24 icon exports a 24×24 PNG. Always set the output width yourself.
- Upscaling a small PNG instead of re-rendering the SVG. Enlarging a bitmap adds blur; re-rasterizing the vector at the target size stays sharp.
- Converting a transparent SVG to JPG. The transparency fills with white. Use SVG to PNG or WebP to keep it.
FAQ
Why does my exported PNG have a white background? Either the SVG itself has a background rectangle, or you exported to a format without transparency. A true transparent export needs PNG or WebP.
My PNG is huge — how do I shrink it? Render only as large as you need, then run it through an image compressor to cut the file size without a visible quality drop.
For choosing between formats in general, the best image format for the web compares PNG, JPG and WebP side by side; if you specifically need icons, see how to make a favicon.