SVG to PNG converter

An SVG has no pixels, so the converter needs a size. It reads the width and height attributes of the root <svg> tag and turns their units into CSS pixels. If only one is set, the other follows the viewBox aspect ratio. If neither is set, the viewBox width and height are used. With no size and no viewBox at all, browsers fall back to 300×150, the default size of a replaced element.

Then the size mode applies. Scale multiplies that size (2x for retina screens). Width or Height sets one side and keeps the ratio. Exact size sets both: the drawing is centered and fitted inside, the way preserveAspectRatio="xMidYMid meet" works, unless you turn on stretch. Each side is capped at 8192 px here so the browser canvas does not fail.

The tool rewrites the root tag with the target pixel size and a viewBox, adds xmlns if it is missing (an SVG without it will not load as an image), and draws it with drawImage() on a canvas of that size. canvas.toBlob() then encodes the PNG, JPEG or WebP file. Nothing leaves your browser.

Because the SVG is drawn as an image, browsers apply the same limits as for an <img> tag: scripts do not run, and external images, fonts and stylesheets are not loaded. Inline them (as data URIs or <style>) or convert text to outlines before exporting.

Icons that use fill="currentColor" take their color from the page around them. In a PNG there is no page, so they render black. Set a color in the currentColor picker to export them in your brand color.

The Icon and favicon sizes panel exports any of these square sizes as PNG in one ZIP, plus a favicon.ico with the 16, 32 and 48 px images inside. To shrink the SVG itself before you export, run it through the SVG optimizer.

Inkscape (1.x) renders SVG well, including text with installed fonts:

inkscape logo.svg --export-type=png --export-filename=logo.png -w 512

rsvg-convert (librsvg) is small and fast on Linux and macOS:

rsvg-convert -w 512 logo.svg -o logo.png
rsvg-convert -z 2 -b white logo.svg -o logo@2x.png   # 2x, white background

ImageMagick: put -density before the input file, so the SVG is drawn at a high DPI instead of being scaled up after:

magick -density 300 -background none logo.svg logo.png

Node.js with sharp: the density option (default 72) sets the DPI for vector input.

import sharp from 'sharp';
await sharp('logo.svg', { density: 300 }).resize(512).png().toFile('logo.png');

Python with CairoSVG

import cairosvg
cairosvg.svg2png(url='logo.svg', write_to='logo.png', output_width=512)

Browser JavaScript, the same way this page does it:

const img = new Image();
img.src = URL.createObjectURL(new Blob([svgText], { type: 'image/svg+xml' }));
await img.decode();
const canvas = Object.assign(document.createElement('canvas'), { width: 512, height: 512 });
canvas.getContext('2d').drawImage(img, 0, 0, 512, 512);
canvas.toBlob(blob => { /* save the PNG */ }, 'image/png');

To turn PNG, JPG or WebP into each other, use the image converter. To inline the PNG in HTML or CSS, use image to Base64. More design tools on DevHunt: design tools.