Convert SVG to PNG

Rasterising means choosing a resolution

An SVG is a set of instructions rather than a grid of pixels, so it describes a shape at whatever size it is drawn. Converting to PNG means deciding how many pixels to draw that shape at, and that decision is the whole job. Double the pixel dimensions and the image is twice as detailed and roughly four times the file size. There is no single correct answer, which is why choosing based on where the graphic will be displayed works better than picking an arbitrary number.

NoteRender at 2 to 4 times the display size for crisp results on high density screens and in print.

Transparency and the background

Most SVGs have a transparent background, and PNG preserves that exactly, which is one of the main reasons to convert to PNG rather than JPG. A JPG would flatten the transparency against a background colour, producing a visible rectangle wherever the graphic is placed on a page that does not match. If the graphic has no transparent area, both formats work and JPG will be much smaller.

• PNG preserves transparency, which is usually the reason to choose it.
• JPG flattens transparency to a fill colour and shows a box on a mismatched page.
• For an opaque SVG, JPG produces a much smaller file with no visible difference.
• Export PNG when the graphic will be placed over varied backgrounds.

Where the conversion can differ from the browser

An SVG renderer has to interpret instructions, and different renderers interpret them slightly differently. The usual differences are in text, where a substitute font changes the metrics and therefore the spacing and the overall size, and in filters, where blur and shadow implementations vary between engines. The most common visible surprise is text appearing in a different typeface or wrapping differently, which is a font substitution rather than a conversion fault.

• Text may render in a substitute font if the original is not available.
• Substituted fonts have different metrics, so text can reflow or change size.
• Filters and shadows can look slightly different between renderers.
• Convert text to outlines in a design tool first if the appearance must be exact.
• Gradients and paths render consistently almost everywhere.

NoteA mismatch is usually a missing font, not a broken conversion. If the text matters, outline it before converting.

SVG may simply be the better answer

If the graphic is going to a website, an SVG is usually preferable to a PNG. It stays sharp at any size, including on a high density display, and the file is often smaller than an equivalent raster image. A PNG is the right answer when the destination cannot render SVG, when you need a fixed pixel size for a specific platform, or when you need to apply a raster-only effect. Converting an SVG to PNG is a compatibility step, not an improvement, and it is worth asking whether it is necessary.

• Website: keep the SVG. It is sharper and usually smaller.
• Platform that rejects SVG, such as some CMS fields: use PNG.
• A specific pixel size is required: use PNG.
• A raster-only effect is needed: use PNG.
• Email: PNG is safer than SVG, which many clients do not render.