SVG to PNG: Rasterising Vector Art Without Soft Edges

The conversion is one-way in the useful sense: a PNG can never be turned back into a clean SVG, because the shape information is gone once it becomes pixels. That makes the output size the most important setting. Export at the largest size you will ever need and scale down from there; exporting at 200 pixels and enlarging later gives you a blurry icon, which is the exact problem SVG existed to avoid.

A reasonable target is the CSS pixel size multiplied by two or three, which covers high-density screens. A logo displayed at 240 by 80 CSS pixels should be exported around 720 by 240 so it stays sharp on a phone and in a retina browser. For print, work backwards from the physical size at 300 DPI instead.

Text in an SVG is still text: it names a font family and the renderer picks one. If that font is not installed on the machine doing the conversion, a substitute with different widths is used, and text that fitted inside a badge now overflows it or sits off-centre. This is the single most common cause of an SVG that looked fine in the browser and wrong in the exported PNG.

The robust fix is to convert text to paths in the design tool before export. The shapes then carry the letterforms themselves and no font is needed. The trade-off is that the text stops being editable and stops being readable by search engines or assistive technology, so keep an editable SVG with live text as the master and use the outlined version only for rasterising.

An SVG can point at things outside itself: a linked stylesheet, an external font file, an image by URL, a filter defined in another document. Browsers may resolve those references when the file is served from the same origin, but a converter working on a standalone file has nothing to resolve them against. The result renders with missing fills, default black, or no image where a picture should be. If the SVG was exported by a design tool, check for an option to embed images and inline CSS.

Filters and blend modes are the other fragile area. Blur, drop shadows and complex masks are specified but implemented inconsistently, and some renderers silently ignore them. If a shadow is missing in the PNG, the file is not corrupt; the renderer did not support that effect. Flattening effects in the design tool before export gives a predictable result.

PNG supports transparency, so an SVG with no background exports with a transparent background by default. That is usually right for a logo and wrong for anything that assumes white, such as a document thumbnail. Decide explicitly: transparent for assets that will be composited, a solid colour for images that will be viewed on their own. Some converters add white silently, which is worth checking rather than assuming.

Colour profiles are usually not carried through the conversion. An SVG with a wide-gamut colour will be rendered into sRGB, and very saturated values can shift slightly. For brand assets, compare a rendered PNG against the source before shipping it, and keep the SVG as the canonical file so the PNG can always be regenerated at a new size.