Convert SVG to PNG

Fixing a resolution that was never fixed

An SVG has no pixels and no size. It is a set of drawing instructions — this path, that fill, this curve — which is why it stays sharp at any magnification and why a logo should live as one for as long as possible. Rasterising commits to one size for ever. So choose the size for the largest place the picture will appear, and remember that a screen at two or three times density needs two or three times the pixels: an icon displayed at 64 points wants 192 pixels to look right on a modern phone.

Text is where this goes wrong most often, and the reason is worth understanding. An SVG says "set this string in Helvetica Neue"; if the machine rendering it does not have Helvetica Neue, something else is substituted and the layout shifts — a title that fitted its box now overflows it. A web font referenced by URL does not load at all here, because an SVG being rendered as an image is deliberately isolated and cannot reach out to the network. The fix is the one every designer eventually learns: convert text to outlines before exporting, and the letterforms become paths that need no font at all.

That same isolation explains the other surprises. A linked bitmap — an image element pointing at a .png somewhere — renders as nothing. Scripts do not run, so an SVG that draws itself in JavaScript comes out empty or half-built. Declarative animation renders at its initial state, which is a still of the first frame. Everything self-contained works perfectly: gradients, filters, clipping paths, masks, embedded data URI images and blur effects all render as drawn.

PNG is the right destination for this and JPEG would not be. Vector artwork is flat colour and hard edges, which is precisely what PNG compresses well and JPEG ruins — every sharp edge in a JPEG gets a halo. Transparency comes across as a real alpha channel, so a logo exported at the right size sits on any background. If the SVG declares no dimensions at all, only a viewBox, the aspect ratio comes from that and the size is yours to choose.

When you want something else

resvg and rsvg-convert render SVG from the command line with a real font stack available, so text renders in its intended typeface rather than a substitute — rsvg-convert -w 512 in.svg -o out.png is the whole command. Inkscape --export-type=png --export-dpi=300 is the most complete implementation of the specification there is, and handles filters and blend modes that lighter renderers approximate.

Before rasterising at all, check whether anything actually needs a PNG. Every browser has drawn SVG natively for over a decade, and for a logo or an icon on a website the SVG is smaller, infinitely sharp, and stylable with CSS. The cases that genuinely need pixels are narrower than people assume: favicons, social preview images, email, app store assets, and software that cannot read vectors.