Convert SVG to PNG

Vector files are the right thing to keep and the wrong thing to send. An SVG scales to any size without ever going blurry, which is why logos and icons live as one — and it is also a format that plenty of things refuse: older Office versions, many upload forms, app icon pipelines, most print workflows.

This is the one decision to make, because an SVG genuinely does not have a size. It describes shapes, not pixels, so the conversion has to pick a resolution. The scale setting controls it, and a larger number costs nothing in quality: the drawing is being redrawn rather than enlarged, so it is perfectly crisp at any size the slider offers.

What the slider offers is a multiple of 1024 pixels across: scale 1 is 1024, and each tenth of a step is another 102 pixels, from 102 at the bottom to 10240 at the top. A useful habit is to work out the largest place the image will appear and double it, which covers high-density screens — then pick the step at or just above that number rather than below it.

SVG stores text as text and refers to a typeface by name, so if the font is not embedded in the file, the renderer substitutes something else and your carefully spaced wordmark comes out wrong. This is the single most common reason an SVG to PNG conversion looks broken.

The permanent fix is in the design tool: convert text to outlines or paths before exporting the SVG, and the letters become shapes that cannot be substituted. It also makes the file safe to hand to anyone else.

Transparent areas stay transparent, so a logo drops onto any background without a white box behind it.

Rendering is done by resvg rather than by your browser, which means the output is identical on every machine — a converter that draws through a canvas gives subtly different results in Chrome and Safari, which is exactly the kind of difference that only shows up after the file has been signed off.

Plain shapes, strokes and fills convert exactly. Where renderers start to diverge is the elaborate end of the specification: Gaussian blurs, drop-shadow filters, blend modes, and clipping paths built out of other clipping paths.

resvg implements the parts of the specification that real files use and is deliberately honest about the rest — an unsupported filter is left out rather than approximated into something that looks almost right. If an effect matters, look at the PNG rather than assume, and if it is missing, flatten it in the design tool before exporting.

An SVG is often a few kilobytes because it is a description rather than a picture. The PNG is a grid of pixels, and that grid grows with the square of the scale: doubling the scale quadruples the file.

A logo that is 4 KB as an SVG can be several megabytes as a 4000-pixel PNG. That is not a fault, it is the arithmetic of the format — but it is a good reason to pick the resolution you actually need rather than the largest one on offer.

This is one of the most common reasons for the conversion, and the scale slider lands on some of those sizes and not others. Scale 1 gives the 1024 pixels the app stores want and 0.5 gives 512; 256, 192 and 128 fall between the tenths and come out as 205 or 307 instead. For those, render at 1024 or 512 and resize down in an image tool — downscaling a large PNG is the one direction that stays clean.

For a favicon, note that what is usually wanted is an ICO rather than a PNG, because an ICO holds several sizes in one file. Convert to PNG at the largest size you need and use the PNG to ICO page for the rest.

An SVG can reference an external image, an external font or a stylesheet in another file. Those references are not part of the SVG, so when the file arrives here on its own, whatever they pointed at does not arrive with it.

The result is a PNG with a missing photograph or a substituted typeface. If the drawing looked complete in the design tool and incomplete here, this is almost always the reason: export again with resources embedded rather than linked.

Drop the folder, up to a hundred files at a time. Every file is rendered at the same scale and comes back as a ZIP, which is usually what an icon set wants — consistency across the set matters more than each file being individually ideal.

Because the rendering happens on your machine there is no queue and no daily allowance, and because it is resvg rather than a browser canvas, the hundredth icon is drawn exactly like the first.