SVG to PNG

How does SVG-to-PNG conversion work in the browser?

SVG is a vector format: the graphic is stored as a mathematical description (paths, circles, polygons, colours), not as a pixel raster. PNG, in contrast, stores every pixel explicitly. The conversion forces the browser to render the SVG into a concrete pixel size — the rasterization step.

The tool uses the Canvas API, a web standard available natively in every evergreen browser. Three steps:

SVG (text markup)
    ↓
[1] viewport parse: read width/height or viewBox
    ↓
[2] image decode: load the SVG via a Blob URL into an <img>
    ↓
[3] canvas render: drawImage(svg, 0, 0, targetW, targetH)
    ↓
[4] toBlob('image/png'): encode pixel data as PNG
    ↓
PNG (1x, 2x, 3x or custom width)

Vector-to-raster is lossless as long as the target resolution is at least the smallest visible detail size. For very fine lines in the source SVG a higher DPI may help.

Multi-DPI export — why @1x, @2x, @3x in one click?

App icons and asset catalogs on iOS and Android follow a fixed convention:

• @1x — the nominal size (e.g. 60×60 px for an iOS app-icon slot)
• @2x — Retina display, doubled pixel density (120×120 px)
• @3x — high-DPI mobile such as iPhone Pro Max (180×180 px)

Anyone exporting icons from SVGs traditionally needed three separate export passes at three different sizes. That is workflow overhead, especially with a full asset set across multiple icons.

The Multi-DPI button turns each SVG into the three PNGs in one click, named with App-Store-conformant suffixes:

hero.svg → [email protected] + [email protected] + [email protected]

The ZIP contains the three files ready to drop into Xcode asset catalogs, Android drawable-*dpi folders or Figma asset plugins.

Alpha preservation — what does it mean technically?

Many tools advertise “transparent backgrounds” yet deliver PNGs that still show a white or grey edge in Photoshop or Figma. That happens when the rasterizer fills the canvas with a colour before rendering (often to keep JPEG compatibility) or when alpha values are rounded during encoding.

This tool starts the canvas in its default state: every pixel has alpha 0 (fully transparent) from the outset. When you set the background to ‘Transparent’, the surface is not filled — the code path exits early before fillRect() is called. Only then does the SVG draw its paths. Pixels untouched by an SVG element keep their alpha-0 value; pixels along anti-aliased edges keep their intermediate alpha values exactly.

You can verify the result:

• In Photoshop / Affinity Photo the checkerboard pattern reveals transparent pixels.
• In Figma the frame underneath the image stays visible.
• In the browser drop the PNG over a coloured <div>.

When you pick ‘White’ or ‘Custom colour’, the surface is intentionally filled — useful for print, email attachments or mockups on coloured backgrounds.

When transparent, when white, when custom?

Choose transparent when:

• the PNG sits on a coloured background (web, app, card games, OG cards)
• the icon must stay visible inside a dark-mode layout
• you plan to keep editing the image in Photoshop and need a soft edge

Choose white when:

• the PNG ends up on printed paper
• it is sent as an email attachment, where Outlook 2010+ sometimes renders transparency as a black background
• it lands on a slide inside an Office presentation

Choose custom colour when:

• a branding background is mandatory (logo on brand colour)
• the PNG lands on a known background colour where the anti-aliased edges should match cleanly
• you want to simulate photo negatives or desktop backgrounds

The live-preview toggle shows the asset on light and dark backgrounds — so you can tell, before download, whether the SVG’s anti-aliased edges fit your target context.

What sets this tool apart from online converters?

Most freely available SVG-to-PNG converters follow the same pattern: file upload → server processing → download. That model has three drawbacks:

1. Privacy: the SVG leaves your computer. For logos, brand assets, internal designs or client material that is a real concern.
2. File caps: free tiers usually end at 25–100 files. Converting 80 icons for an Android drawable folder forces a paid upgrade or batching.
3. Single DPI: hardly any converter produces 1× + 2× + 3× in one step; all force multiple runs.

This tool handles all three differently:

• Pure-client — the file stays in the browser tab, provable in the network panel.
• No file cap — your browser memory is the only limit.
• Multi-DPI in one click — the App-Store convention generated automatically, with correct suffixes.

What does this tool deliberately not do?

We build an SVG-to-PNG converter, not a vector multitool. Deliberately out of scope:

• SVG optimization before export (path simplification, cleanup, metadata strip) — belongs in our separate SVG optimizer, which complements this tool.
• JPG / WebP / AVIF multi-output — the page stays scoped to PNG. For other formats use image-format-converter.
• Animation conversion to APNG or animated WebP — the Canvas API renders only the initial frame; animated SVGs (SMIL, CSS) are out of scope.
• Edit features — no colour swap, no path edit, no re-layout. That is image-editor territory.
• Server API or bulk-URL converter — would break the pure-client guarantee.
• Login or cloud save — the tool stores nothing. Close the tab and the result is gone.

The tool does one thing well and is explicit about where it stops.

Which related image tools should I know about?

Other utilities in the kittokit ecosystem that fit SVG workflows:

• SVG optimizer — clean SVG paths and strip metadata before rasterizing.
• PNG compressor — shrink the generated PNG further, losslessly or with palette reduction.
• Image format converter — convert PNG to WebP or AVIF for web delivery; both smaller than PNG at the same quality.