SVG to PNG Converter
Rasterises an SVG in your browser at a size you choose, and lists everything in the file that will not survive being drawn to a canvas.
This tool needs JavaScript: the rasterising happens in your browser, which is also why nothing is uploaded.
Paste the markup, or open a file. Nothing is uploaded: the drawing happens in your browser.
Zero uses the SVG's own size. An SVG with only a viewBox has no intrinsic size, and the specification says 150 by 150, which is where that number comes from when a converter surprises you.
For a 2x or 3x export. The height follows the aspect ratio, so the image is never distorted.
"transparent" keeps the alpha channel. Any CSS colour fills it instead, which is what a PNG for an email or a document usually needs.
An SVG has up to three opinions about its own size and they disagree constantly: width and height
attributes, a viewBox, and whatever CSS is applied to it. A file with only a viewBox has no intrinsic size
at all, which is what makes it scale nicely on a page and what makes a converter export it at 150 by 150 for
no visible reason. That number is the fallback in the SVG specification.
So this reports the size, says which of the three it came from, and lets you set the export size explicitly. A raster export is a decision about a size, and a converter that hides the decision is the reason the result is the wrong size.
It also lists everything in the file that will not survive being drawn to a canvas, before you find out by looking at the PNG.
How to use
- Paste the SVG, or open a file. Nothing is uploaded: the drawing happens in your browser.
- Set the export width, or leave it at zero to use the file’s own size. Multiply by 2 for a retina asset.
- Set a background colour if the PNG is going somewhere that cannot handle transparency.
Example
An icon with both a size and a viewBox:
Intrinsic size: 120 × 120
Taken from: the width and height attributes
Export size: 512 × 512The same file with the width and height removed:
Intrinsic size: 120 × 120
Taken from: the viewBox, since the width and height are missing or in units a raster export cannot useAnd with neither:
Intrinsic size: 150 × 150
Taken from: nothing: with no usable size and no viewBox, the specification says 150 by 150The two previews sit side by side on a checkerboard, because the only question worth answering about a converter is whether its output matches the original, and that needs them next to each other.
Pitfalls
An external image taints the canvas. An <image> pointing at a URL is not loaded during the export, and a
cross-origin one makes the canvas refuse to produce a PNG at all. Inline it as a data URI first.
Fonts are not embedded. Live text is drawn with whatever font the browser resolves, which may not be the one the SVG was designed with. Converting text to paths before exporting removes the question entirely.
<foreignObject> may come out blank. Support for rasterising one is inconsistent, and the failure is
usually silence rather than an error.
Scripts never run. An SVG loaded as an image has scripting disabled, and animation exports as one frame, which is the first frame rather than a representative one.
Only px and unitless sizes are usable. A width in em depends on a font, a percentage depends on a
container, and a raster export has neither. The tool falls back to the viewBox in those cases and says so.
PNG is the wrong answer more often than not. An SVG on the web is smaller, sharper at every size and themeable. Export to PNG for email, for a marketplace that rejects SVG, or for a tool that cannot read one.
Check the export at its real size. A 512px PNG viewed at 120px looks perfect regardless of whether the rasterising went well.
Compatibility
Runs in the browser. The rasterising uses a canvas, which is the only thing that can draw an SVG, and
canvas.toBlob for the PNG. Both work in every browser in use.
The sizing logic is a pure module, tested without a browser at the three cases that decide what comes out: a
file with usable width and height, one with only a viewBox, and one with neither. Absolute units convert at 96
dpi, so 2in is 192 pixels and 12pt is 16, both of which are asserted.
A canvas refuses to export when it has been tainted by cross-origin content, and the tool says that rather than reporting a generic failure, because the fix is specific: inline the referenced file.
The warnings are matched against the source text rather than against a rendered document, so they are conservative: they name what is present, not what definitely broke.
Frequently asked questions
Why is my PNG 150 pixels?
Why is the text in a different font?
Why did the export fail with no obvious error?
<image> or a CSS url() pointing at another origin taints the
canvas, and the browser refuses to read pixels back out of it.