Skip to content
TryDocsy

SVG to PNG

Convert vector SVG files to high-resolution PNG images

Drop SVG files here

Select one or more SVG files

Max file size: 20MB

Privacy Score: 100%
Processed Locally
0 Files Uploaded

This tool turns one or more SVG vector files into PNG images entirely in your browser tab. It parses each SVG with the browser's own XML parser to work out its pixel dimensions, loads the file into an image element, then draws that onto an HTML canvas at a scale you choose and reads the result back out as a PNG. Because rendering goes through the browser's native SVG engine rather than a custom parser, paths, gradients, inline styles, and fonts embedded in the file itself (or already installed on your system) come out looking right.

That image-element step is also the one honest limit worth knowing: loading an SVG this way runs in a restricted rendering context that browsers apply for security, so a stylesheet's @font-face rule pointing at an external font file, or an <image> tag referencing an external URL, won't actually fetch that resource here the way it would if the same SVG were opened as a full page. Shapes, paths, gradients, and anything the SVG carries inline render fine either way — it is specifically outside references that get skipped.

The one thing to watch is sizing: an SVG's output dimensions come from its width/height attributes when those are plain pixel numbers, or from its viewBox when they aren't, or from the SVG spec's 300x150 default when neither is present. Very large sources at a high scale can also run into the browser's own canvas memory ceiling, in which case the tool quietly reduces the scale and tells you so rather than producing a blank file.

How it works

  1. 1. Drop or browse your SVGs

    Drag one or more .svg files onto the upload area, or click it to browse. Files over 20 MB each are turned away at this step.

  2. 2. Set scale and background

    Move the Scale slider anywhere from 1x to 8x in 0.5 steps, and toggle Transparent Background on or off — off fills the canvas white first, on keeps see-through areas see-through.

  3. 3. Convert to PNG

    Press "Convert N SVGs to PNG." Each file is parsed, sized, rasterised, and encoded in turn, all inside your browser tab.

  4. 4. Download your PNGs

    Download a single result directly, or press "Download All" to get every converted file zipped into one archive.

When you'd use it

  • A logo for a document or CMS

    Many word processors, page builders, and admin panels accept image uploads but not SVG. Converting your logo or icon once gives you a PNG you can drop into any of them.

  • Icon exports at more than one size

    Re-run the conversion at different scale values — say 1x for a small UI icon and 4x for a high-DPI app store listing — from the same source SVG instead of maintaining separate raster files.

  • Vector art for people without an SVG viewer

    Some email clients, older design tools, and print workflows render SVG unreliably or not at all. A PNG opens identically everywhere.

  • Embedding a diagram into a PDF or slide deck

    Tools that build PDFs or presentations from images generally expect raster formats. Converting your vector diagram to PNG first avoids layout surprises.

How the output size is worked out

The tool reads the SVG's own width and height attributes, but only trusts them when they're a bare number or end in "px" — a value like "100%" or "10cm" is ignored rather than misread as a pixel count. When width or height is missing or unusable, it falls back to the numbers inside the viewBox attribute, and if neither is present it uses the SVG specification's own default viewport of 300 by 150. If only one of width or height turns out usable, the missing one is calculated from the viewBox's aspect ratio, rather than pairing a real number with a guessed one.

Why the scale sometimes gets reduced automatically

Requesting 8x on a large source can ask the browser to allocate a genuinely huge canvas, and every browser has a hard ceiling on that — Chrome refuses any single side over 16,384 pixels, and mobile Safari's total-pixel budget is the tightest of the major engines. This tool checks your requested scale against a conservative budget sized for that Safari limit before it allocates anything, and if your combination of source size and scale would exceed it, it silently uses the largest scale that still fits and shows a message telling you the scale was reduced. That trade avoids the alternative failure mode: a canvas that fails to allocate produces a PNG that looks fine in the UI but decodes as a blank image.

Transparent background vs. white

With Transparent Background on, the canvas starts fully see-through and only the pixels your SVG actually paints end up opaque, which is what you want for an icon or logo that will sit on a colored page elsewhere. Turn it off and the canvas is filled solid white before your SVG is drawn on top, which is the better choice when you're going to view the PNG somewhere that doesn't composite transparency correctly, or when you specifically want a white backdrop baked into the file.

Frequently asked questions

Why did my PNG come out a different shape than I expected?

The output dimensions are read from the SVG's own width/height attributes when they're a plain pixel value, otherwise from its viewBox, otherwise from the SVG spec's 300x150 default. An SVG authored with width="100%" and a viewBox will use the viewBox's proportions, not a distorted guess.

What does "scale reduced to fit" mean?

Your requested scale would have asked the browser to allocate a canvas bigger than it can reliably handle, so the tool automatically used the largest scale that still fits a conservative memory budget and told you the new value, rather than exporting a blank file.

Will gradients and curves in my SVG render correctly?

Yes, along with paths, inline styles, and any font embedded in the file or already installed on your device — the browser's own SVG engine draws all of that the same way it would on a web page. The one exception is content the SVG only references externally, such as an @font-face rule pointing at a separate font file or an <image> tag pointing at an outside URL: loading an SVG through an image element is a restricted context that does not fetch those, so only what the SVG carries inline is guaranteed to show up.

Can I convert several SVG files at once?

Yes. Drop multiple files and they're processed one after another; download each individually or grab all of them together as a ZIP.

What happens if I upload something that isn't a valid SVG?

You'll see "Could not read this file. It may be an unsupported variant." — the file is skipped rather than crashing the batch, so the rest of your files still convert.

How large an SVG can I upload?

Each file is capped at 20 MB at the upload step. Very large or complex SVGs are more likely to hit the canvas scale limit described above at high zoom values.