SVG to PNG Converter

Why you would convert a vector to a raster at all

An SVG is a set of instructions — "draw a circle here, fill this path with blue" — that the browser renders fresh at any size, so it stays razor sharp whether it is a favicon or a billboard. A PNG is the opposite: a fixed grid of coloured pixels, frozen at one resolution. So why trade away that infinite scalability? Because most of the world cannot read SVG. Email clients, older messaging apps, many social platforms, app stores, slide decks, and image-editing programs all expect a raster file. Converting to PNG bakes your vector into pixels at a size you choose, producing a file that works everywhere — while keeping transparency, which JPEG cannot.

How the conversion happens in your browser

This tool does the whole job client-side using an HTML5 <canvas>, so your artwork never leaves the page. The steps are worth understanding because they explain the tool's behaviour:

1. Your SVG markup is wrapped in a Blob and loaded into an Image object — the browser parses and rasterises the vector internally.
2. A canvas is created at the exact output width and height you set.
3. If you chose a colour background, the canvas is filled with it first; if you chose transparent, that fill is skipped so empty areas stay clear.
4. The rendered image is drawn onto the canvas, scaled to fit those dimensions.
5. The canvas is exported with toDataURL('image/png') and handed to you as a download named image.png.

Because the SVG is rasterised at the dimensions you specify rather than its original size, you get a crisp result at any scale — there is no quality loss from "stretching" a small file, the way there would be with a PNG-to-PNG resize.

Getting the size right: the viewBox matters

The tool reads your SVG's natural dimensions to seed the output and keep proportions correct. It first looks for explicit width and height attributes; if those are missing, it falls back to the third and fourth numbers of the viewBox. With "Maintain aspect ratio" ticked, changing the width auto-computes the height from that original ratio, so a 16:9 graphic stays 16:9. This is why an SVG with neither sized attributes nor a viewBox can render blurry or clipped — the browser has no reference frame to scale within. If a converted image looks wrong, the fix is almost always to add a proper viewBox to the SVG root, or to remove hard-coded pixel width/height so the graphic can scale freely.

A worked example

Say you have a logo whose SVG declares viewBox="0 0 200 80" — a 2.5:1 shape. Paste it in and the preview confirms it looks right. The tool detects the natural size and, with aspect lock on, suggests a width of 512 and a height of 205 (because 512 × 80 ÷ 200 = 205). You want a transparent PNG for a dark website header, so you leave the background on Transparent and click Download. The canvas is built at 512×205, nothing fills the background, the logo is drawn into it, and you get a sharp PNG that drops onto any colour without a white box around it.

What can and cannot be converted

• Self-contained SVGs convert perfectly. Shapes, paths, gradients, and inline styles all rasterise cleanly.
• External resources usually fail. A web font loaded by URL or an image linked with an absolute address is blocked by the browser's canvas security model — the export would "taint" the canvas. Inline your fonts as base64 @font-face data and embed raster images as data URIs to make them render.
• Scripts and event handlers are stripped. For safety the preview removes <script> blocks and on* event attributes before rendering, so animated or interactive SVGs export as a static frame.

Practical tips

• Export at 2× or 3× for print. Screens are roughly 96 dpi; print wants 300. For a 2-inch-wide logo on paper, set the width near 600 px. A full A4 page at 300 dpi is about 2480×3508 px, which desktop browsers handle comfortably.
• Mind the memory ceiling. Canvases above 4096×4096 px can be slow or fail on phones. If a giant export hangs, lower the dimensions.
• Remove background rectangles for true transparency. The Transparent option leaves the canvas unfilled, but if the SVG itself contains a white rectangle behind everything, that rectangle still renders. Delete that shape in the markup first.
• Use a colour background for social images. PNG supports transparency, but a banner shared on social often looks better on a solid fill — set the colour and the canvas paints it before the artwork.

A note on privacy

Every step — parsing, rendering, filling, and exporting — runs inside your own browser tab on a canvas you can't see from outside it. The SVG is never uploaded and the PNG is generated locally before the download link is created. You can confirm this by disconnecting from the network: paste an SVG and download still works, because there was nothing to send.