Convert an SVG to a PNG in the Browser, Without Uploading the File

I work on OnePassApps.

An SVG is a text file. That is convenient for editing and awkward for everything else - email clients, slide decks, older upload forms and chat apps all want a raster image, and the usual way to get one is to hand your file to a web form and wait for somebody else's server to render it.

If the file never leaves your machine, that step disappears. The Icon Studio in app.onepassapps.com renders SVG to PNG inside the tab you already have open.

What the tab actually says

The Icon Studio has eight tools, and the SVG to PNG one is the first tab. Its own panel reads, before you drop anything in:

  • 01 Source - "No SVG yet. Drop one on the stage or browse for it. SVG up to 5 MiB and 25,000 elements."
  • 02 PNG dimensions - "Set the PNG's maximum width and height, or a 1×, 2× or 3× scale, once an SVG is open."
  • 03 Result - "A transparent PNG at the size you set. Your SVG stays untouched."

The action button reads Create PNG, and the stage line above it says "Processing stays in this browser."

A real conversion, in the tab

I ran it while writing this. I dropped a small hand-written SVG onto the stage - 120 by 80, a rectangle, a circle and a second rectangle - and the source panel read:

probe.svg SVG · 120 × 80 · 265 B

Two number fields appeared for the output size, both defaulting to 512, plus a "Fit custom dimensions" control. I left them as they were and pressed Create PNG. The result panel came back with:

probe.png 512 × 341 · 10.0 KiB

and the line "PNG created at 512 × 341." underneath, next to a Download PNG button.

The 120 × 80 source became a 512 × 341 PNG - the width I set, with the height following the original proportions - and the downloaded file was a genuine PNG of 10,249 bytes. The panel also confirmed the other promise in its own words: "Your SVG stays untouched."

Why size matters more than it sounds

SVG is resolution independent, which is exactly why it needs converting when something wants pixels. Setting the output size by hand means you get one predictable raster file at the dimensions you asked for, instead of whatever a third party's renderer happened to produce. A 512-wide PNG for a slide, a 1,024-wide PNG for a retina header, a 128-pixel PNG for a favicon - each one is a fresh render at that size, from the same source file, on your machine.

The 5 MiB and 25,000-element limits are worth knowing before you start: they are caps on the source SVG, not on the PNG that comes out.

Where it sits

Standard is free right now: "$0 / month", "100,000 credits every 30 days - No end date set - No card required", and the page is explicit that there is "No automatic paid subscription. Existing paid subscriptions keep their terms." The browser-local rendering is not what the credits are for anyway - the conversion runs on your device.

Open the Icon Studio tab, drop the SVG in, set the size, and read the result before you send it anywhere. The guides cover how the browser-local studios work.

I work on OnePassApps - it is the team behind app.onepassapps.com.