SVG to PNG Converter

What actually happens when SVG becomes PNG

SVG is a set of drawing instructions — "a circle of radius 30 at (62,60)" — while PNG is a fixed grid of pixels. Converting between them is rasterization: your browser executes the instructions at a chosen pixel size and freezes the result. This tool does it with the browser's own renderer: the markup becomes a Blob, loads into an Image, is drawn onto a <canvas>, and canvas.toBlob('image/png') encodes the download — four steps, zero uploads. Because the source is vector, exporting at 4× is just as sharp as 1×; there is no upscaling blur, ever.

How the pixel size is decided (the part everyone gets wrong)

An SVG doesn't necessarily know how big it is. This tool resolves its natural size in the same priority order a browser uses, and tells you which rule applied:

• 1. width/height attributes — physical units convert at the CSS reference of 96dpi: 1in = 96px, 1cm ≈ 37.795px, 1mm ≈ 3.7795px, 1pt = 96/72 ≈ 1.333px. So width="10cm" is a 378px-wide PNG at 1× — not 10cm of "print resolution"; PNG has no physical size, only pixels.
• 2. The viewBox — when the attributes are missing (or unresolvable, like width="100%"), the viewBox's width/height in user units become pixels one-for-one. viewBox="0 0 240 120" → a 240×120 natural size.
• 3. The spec default, 300×150 — an SVG with neither is defined by the SVG spec to be 300×150 CSS px. The tool uses it and says so on the page, because a silent 300×150 export from a logo that "should" be 2000px wide is exactly the kind of surprise this tool exists to avoid.

A worked example: a file with width="10cm" height="5cm" resolves to 378×189px. Choose 2× and you get 756×378; type 1200 into the exact-width field and you get 1200×600, height derived from the aspect ratio.

The honest part: external references render blank

When a browser rasterizes SVG through an image element it runs in a sandbox that does not fetch external resources — no remote <image href="https://…">, no <use> pointing at another file, no @import, no web font from @font-face url(…). Most converters quietly hand you a PNG with holes where those were. This tool scans the markup for exactly those patterns first and lists every finding above the preview, so you know before downloading. The fixes: embed raster images as data: URIs (the Image to Base64 tool does this), and convert text to paths in your editor if it uses a web font.

Honest limits

• One file at a time. This first version has no batch queue — deliberately small and reliable. Say you need 40 icons converted: that's 40 drops, and a command-line tool may serve you better.
• <foreignObject> is unreliable. HTML embedded in the SVG rasterizes inconsistently across browsers when loaded as an image — the tool flags it when present, but can't guarantee that region renders.
• Animations freeze. SMIL and CSS animations export as their first frame; scripts inside the SVG never run at all (a security feature of image loading, not a bug).
• Fonts must be local. Text keeps its font only if that font is installed on your machine; otherwise the browser substitutes. Text-as-paths is the portable answer.
• Output is capped near 16384px a side — the browser's canvas limit. The tool caps the scale and tells you when it did.
• PNG→SVG is not offered. That's raster tracing — approximation, not conversion — and pretending otherwise would be dishonest.