Skip to content
ToolBoxGeniehome

SVG to PNG Converter

Image Tools · Added

An SVG has no fixed size — it is a set of drawing instructions, and a PNG made from it has to be given one. This converter reads whatever size the file does declare, tells you where that number came from, and lets you override it with a scale or an exact pixel width. Everything is drawn on a canvas in your browser, so the file never leaves your device.

The file is read and drawn in this tab. It is not uploaded.

Output size from
×

2 gives twice the SVG's own size — the usual choice for a retina screen.

Source size 120 × 120 px from the file's own width and height. Output will be 240 × 240 px.

How to use the svg to png converter

  1. 1Choose a .svg file, or paste the markup into the box.
  2. 2Check the source size reported underneath — it says whether it came from the file's width and height, from its viewBox, or from nothing at all.
  3. 3Set the output size: a scale such as 2×, or an exact width or height in pixels.
  4. 4Convert, check the preview, and download the PNG.

Examples

An icon exported for the web

Input
A 24 × 24 icon with width, height and a viewBox
Result
48 × 48 PNG at 2×, transparent, ready for a high-density screen

A logo with no width or height

Input
<svg viewBox="0 0 200 60">…</svg>
Result
The viewBox supplies 200 × 60, and the tool says so rather than guessing silently

Set an output width instead if you need a specific size — the height follows the ratio.

A file sized in percentages

Input
<svg width="100%" height="100%" viewBox="0 0 64 64">…</svg>
Result
The percentages are ignored — they are a share of a container the file does not have — and the viewBox is used

About the svg to png converter

Why an SVG has no size until you give it one

A JPEG is a grid of pixels, and its dimensions are a fact recorded in the file. An SVG is a description of shapes in a coordinate system, and how large those shapes end up depends on the box it is drawn into. That is the whole point of the format — the same file is a crisp 16-pixel favicon and a crisp billboard — but it means a converter has to make a decision the file may not have made.

Three attributes are involved. The width and height give an intrinsic size, and may be in any CSS absolute unit: 200px, 4cm and 1in are all legal and all convert to pixels at 96 to the inch. The viewBox gives the coordinate system, which is enough for an aspect ratio even when it gives no size. Many icons exported for the web have a viewBox and nothing else, on purpose, so that CSS can size them.

When width and height are percentages there is nothing to resolve them against — a percentage of a container the file knows nothing about — so they are treated as absent and the viewBox is used instead. Every one of these cases is reported on the page rather than resolved quietly, because a 24 × 24 PNG of a logo is the kind of output that looks like it worked.

Rendering through an image element, and what that buys

An SVG can be put on a page two ways: inlined into the markup, where it is a live document whose scripts run and whose external references load, or loaded into an image element, where it is a static picture. In the second case the browser runs no script, fetches nothing, and honours no interaction.

This converter uses the second, which is why it is safe to point at an SVG that arrived by email. It is also the reason for the warning about external references: a font pulled from a CDN or a photo referenced by URL will not be fetched, so it will not appear in the PNG. Better to be told that before converting than to discover a hole in the image afterwards.

When to convert, and when not to

Keep the SVG wherever it can be used. It is smaller for most icons and logos, it stays sharp at every size and on every screen, and it can be recoloured with CSS. Converting to PNG throws all of that away.

What PNG is for is the places that will not take a vector: an app icon at a required pixel size, an image for a document or a slide deck, an email signature, an upload form that rejects .svg files — which many do precisely because an SVG is a document rather than a picture. Those cases are real and common, and they all want a specific pixel size, which is why the size control here is the important part of the tool rather than an afterthought.

Frequently asked questions

What size will the PNG be if I do not set one?
The size the file declares, which is one of three things and the tool names which: the width and height attributes if they are absolute lengths, the viewBox if they are missing or given in percentages, or 300 × 300 if the file states neither. That last case is the browser's own fallback for an SVG with no intrinsic size, and it is nearly always worth overriding.
Is the transparency kept?
Yes. PNG carries an alpha channel and the canvas starts empty, so anything the SVG does not paint stays transparent. There is a switch to fill the background white instead, which is what you want for a PNG going into a document or an email that will show it against an unpredictable colour.
Why does my exported PNG look blurry?
Almost always because it was made at the SVG's own size and then enlarged somewhere else. A PNG is a fixed grid of pixels and enlarging it invents the ones in between. Export at the size the image will actually be displayed at, or at 2× for a high-density screen, rather than scaling the PNG afterwards.
Are fonts and external images included?
Only what the file contains. The SVG is drawn through an image element, which deliberately blocks scripts and external fetches — that is what makes it safe to convert a file you did not write — but it also means a webfont or an image loaded from a URL is simply absent from the PNG. The tool checks for those references and warns before you convert. Convert text to outlines in your design tool if a font is not embedding.
Is the file uploaded anywhere?
No. It is read into the tab, drawn on a canvas by the browser, and handed back as a download. There is no server involved in the conversion and nothing to delete afterwards.

Related tools