SVG to PNG Converter

How to use 3 steps
  1. Press Choose an SVG file, or paste the markup.
  2. Set the Output size and an optional Background colour.
  3. Press Convert to PNG, then download the result.
Processed entirely in your browser. Nothing is uploaded.

The SVG is drawn onto a canvas at the size you choose, so the result is as sharp as the vector allows at that resolution. Fonts referenced by name and images loaded from other websites cannot be fetched during that render for security reasons — convert text to paths and embed images as data URIs if either appears missing.

How this tool works

An SVG describes shapes; a PNG describes pixels. Converting means choosing a size and having the browser draw the vector at it, which is why the output size is a decision rather than a property of the file — the same SVG can produce a sixteen-pixel icon or a four-thousand-pixel banner with no loss either way, because the drawing is done from the shapes each time.

The dimensions are read from the SVG's own width and height, falling back to its viewBox when those are missing, and to three hundred pixels when there is neither. From there you set the output size and everything scales together. Anything beyond eight thousand pixels a side is refused, since the memory needed grows with the area and a browser tab will simply fail rather than produce a file.

What does not survive the conversion

  • Scalability is the thing you are giving up: that is the entire point of an SVG. Convert only where a raster is genuinely required — a social preview, an email, a favicon, a platform that will not accept vectors.
  • External references do not load: an SVG pointing at an image file, a stylesheet or a font hosted elsewhere is drawn without them. Everything must be inside the markup for it to appear in the PNG.
  • Fonts must be outlined: text in an SVG relies on a font being available while it is drawn. Convert text to paths before converting the file, or expect a substituted typeface.
  • Export at the size you will use, or larger: a PNG enlarged afterwards is soft. Exporting at two or three times the display size covers high-density screens without another conversion.

Shapes to pixels, and the size becomes a decision

An SVG describes shapes. A PNG describes pixels. Converting means choosing a size and having the browser draw the vector at it.

That is why the output size is a decision rather than a property of the file. The same SVG produces a sixteen-pixel favicon or a four-thousand-pixel banner with no loss either way, because the drawing happens from the shapes each time rather than by scaling an existing raster.

The [msm_tool slug="svg-to-png"] reads the dimensions from the SVG's own width and height, falls back to its viewBox when those are missing, and to 300 pixels when there is neither.

What silently does not survive

Two things go missing without any error, which makes them worth knowing in advance.

External references do not load. An SVG pointing at an image file, a stylesheet or a font hosted elsewhere is drawn without them. Everything must be inside the markup to appear in the PNG. A graphic that looks complete in your editor — which has access to those files — can convert with pieces missing.

Fonts must be outlined. Text in an SVG relies on the font being available while it is drawn. If it is not, the browser substitutes something else, and you get a PNG with the right words in the wrong typeface. Convert text to paths in your editor before converting the file. This is the commonest complaint about SVG conversion anywhere, and it is not specific to this tool.

Export larger than you need

A PNG enlarged afterwards is soft; there is no way back. Exporting at two or three times the display size covers high-density screens without a second conversion, and the only cost is file size.

For a logo used at 200 pixels wide, export at 400 or 600. For a favicon, generate each size from the SVG rather than downscaling one large PNG — small sizes drawn from the vector are noticeably sharper.

The size cap

Anything beyond 8,000 pixels a side is refused. The memory a canvas needs grows with the area, so doubling both dimensions quadruples it, and past a certain point a browser tab fails rather than producing a file.

Refusing is more useful than attempting and crashing. If you genuinely need something larger, that is a job for a desktop tool with access to real memory.

Keep the SVG as the master

The scalability is the thing you are giving up, and it is the entire point of the format. Convert only where a raster is genuinely required:

  • Social link previews, which mostly reject SVG.
  • Email, where SVG support is poor and inconsistent.
  • Favicons, at least for the ICO sizes.
  • Platforms and marketplaces that only accept raster uploads.
  • Anywhere the SVG would be inlined and you would rather not accept the security surface.

For anything on your own site, the SVG is usually both sharper and smaller. A logo as an SVG is a few kilobytes and perfect at every size; the same logo as a PNG set is several files and never quite right on an unusual display.

Transparency

PNG preserves it, so an SVG with no background produces a PNG with a transparent one. If you need a solid background, add a rectangle in the SVG before converting rather than relying on whatever ends up behind it — a transparent PNG on an unexpected dark background is a common surprise in email and on social platforms.

A quick checklist

  1. Text converted to paths.
  2. No external image, font or stylesheet references.
  3. A viewBox present, so the fallback sizing is sensible.
  4. Exported at two to three times the display size.
  5. Checked against both a light and a dark background if it is transparent.

Frequently Asked Questions

Specific to the SVG to PNG Converter. Broader questions about this category are answered on the category page.

At least the size it will be displayed, and two or three times that for high-density screens. Going larger costs only file size; going smaller cannot be undone.
The font was not available while the SVG was drawn. Convert text to paths in your editor before converting the file.
It almost certainly referenced something external — an image, a stylesheet, a font. Only what is inside the markup is drawn.
Anything over eight thousand pixels a side is refused. The memory required grows with the area, and past that a browser tab fails rather than producing a file.
Only where a vector is not accepted. Keep the SVG as the master — it stays sharp at every size and is usually the smaller file.

Subscribe to receive notifications about new tools, features, and productivity tips.