Nothing is sent anywhere
The markup is parsed with DOMParser, handed to the browser's own SVG renderer through a blob URL, drawn into a canvas and encoded as PNG. Four local steps and no fifth. Open the network tab before you press the button and watch it stay empty, or disconnect and use the tool offline — it works, because there is nothing on the other end to talk to.
What you lose by rasterising
An SVG is a set of drawing instructions, so it is sharp at any size on any screen and it stays a few kilobytes doing it. A PNG is a grid of pixels, correct at exactly one size and blurry above it. That is the whole trade, and it is worth being deliberate about, because the reason to make the PNG is almost always that something downstream refuses SVG: an app store icon slot, a social platform's avatar upload, an email client, an older CMS, a printer's submission form.
Where SVG is accepted, keep the SVG. If the file is bound for a website and you are converting it for file-size reasons, that is backwards — run it through the SVG minifier instead and it will almost certainly come out smaller than any PNG of it.
Picking the resolution
Work out the largest size the image will ever be displayed at in CSS pixels, then multiply by the display density you want to support. A logo that occupies 200 CSS pixels of width needs a 400 px PNG to look right on a 2x screen and 600 px for 3x. Going beyond 3x buys nothing visible and costs real bytes.
| Destination | Width to enter | Multiplier |
|---|---|---|
| Favicon source | 512 | 1x — then resize down |
| iOS app icon | 1024 | 1x |
| Android adaptive icon foreground | 432 | 1x |
| Site logo shown at 160 CSS px | 160 | 2x or 3x |
| Social avatar | 400 | 1x |
| Print at 300 ppi, 2 inches wide | 600 | 1x |
When a platform states an exact pixel size, type that number and leave the multiplier at 1x. The multiplier exists for the case where you are thinking in layout units rather than file units.
What will not render, and why
An SVG drawn as an image runs in a restricted mode. Scripts do not execute. Anything fetched from another origin — a linked bitmap, an @imported stylesheet, a web font — is not loaded, and in browsers that do load it, reading the pixels back out of the canvas is blocked as a cross-origin violation, which is the error you get instead of a file. Text falls back to fonts installed on the machine doing the rendering. SMIL and CSS animation freeze at their first frame.
Filters, masks, clip paths and gradients all work normally, which covers most real artwork. The fix for the rest is to embed: convert text to outlines, and turn linked images into data URIs, before converting.
When the result is a black rectangle
Two causes account for nearly all of them. The first is currentColor or a fill defined in an external stylesheet: outside the document that styled it, the colour resolves to black. Write explicit fill values into the markup. The second is a missing viewBox on artwork whose coordinates start a long way from the origin, which puts the drawing outside the visible area entirely. Add a viewBox that encloses the geometry and both problems disappear at once.
Questions people ask
Why does my SVG come out at 300 x 150?
That is the browser default for an SVG with no intrinsic size — no viewBox and no width or height attributes. Editors produce these when you export with a "responsive" or "percentage sizing" option and no viewBox is written. The fix belongs in the source file: add a viewBox that matches the artwork bounds, and every tool that touches the file afterwards will know how big it is meant to be.
Can it write JPEG or WebP?
PNG only. SVG artwork is usually flat colour with hard edges and often has transparency, which is exactly the case PNG handles well and JPEG handles badly — a JPEG of a logo shows ringing around every edge and cannot be transparent at all. If you specifically need another format, take the PNG from here into the image compressor and convert it there.
Does the transparent background really stay transparent?
Yes. With the background set to transparent, the canvas is never filled and the PNG keeps its alpha channel intact. The chequerboard behind the preview is drawn by this page to make transparency visible; it is not part of the file. Choose the colour fill only when the destination cannot handle alpha.
The output is enormous for a simple icon.
PNG stores pixels, and pixel count is width times height, so doubling the width quadruples the work. A 4096 px PNG of a two-colour icon is several megabytes for information that fitted in 800 bytes of markup. If the file is big and the artwork is simple, you have picked a resolution far beyond what the destination will display — halve it and look again.