How to Convert SVG to PNG (Browser, Command Line, and Code)

SVG is a vector format — it scales perfectly to any size. PNG is a raster format — it's a fixed grid of pixels, but it's what most apps, email clients, and social networks actually accept. Converting between them sounds simple, but there are some important choices: at what resolution to export, how to handle transparency, and what to do with external fonts.

In the browser

Drag or paste an SVG file into the converter, set the target width, and download the PNG. The tool renders the SVG using the browser's own engine — the same rendering path as when you view an SVG in a webpage — then exports it to a PNG canvas.

This is the fastest option for one-off conversions and handles most real-world SVGs correctly.

Command line: Inkscape

Inkscape is the most accurate SVG renderer outside of a browser — it uses the same rendering engine (cairo) and handles SVG features like filters, masks, and text-on-path correctly.

# Install
brew install inkscape           # macOS
sudo apt install inkscape       # Ubuntu

# Convert to PNG at 96 DPI (default screen resolution)
inkscape input.svg --export-filename=output.png

# Export at a specific width in pixels
inkscape input.svg --export-filename=output.png --export-width=512

# Export at 2× (high-DPI / retina)
inkscape input.svg --export-filename=output.png --export-width=512 --export-dpi=192

# Export a specific area (x:y:width:height in SVG units)
inkscape input.svg --export-filename=output.png --export-area=0:0:100:100

For headless servers, add --export-type=png to be explicit:

inkscape input.svg --export-type=png --export-filename=output.png --export-width=1024

Command line: ImageMagick

ImageMagick's SVG support relies on librsvg or Inkscape under the hood (depending on your install). It's convenient for batching.

# Install
brew install imagemagick        # macOS
sudo apt install imagemagick    # Ubuntu

# Basic conversion
convert input.svg output.png

# Convert at a specific density (higher = larger output)
convert -density 150 input.svg output.png

# Resize to specific width
convert input.svg -resize 512x output.png

# Batch convert all SVGs in a folder
for f in *.svg; do convert "$f" "${f%.svg}.png"; done

Note: ImageMagick's built-in SVG renderer is basic and may not render complex SVGs (filters, gradients, masks) correctly. For complex files, pass through Inkscape:

inkscape "$f" --export-filename="${f%.svg}.png" --export-width=512

Command line: rsvg-convert (librsvg)

rsvg-convert is lightweight and fast, good for simple SVGs without complex filters.

# Install
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Ubuntu

# Convert at 96 DPI
rsvg-convert input.svg -o output.png

# Convert at 2× resolution (192 DPI for retina)
rsvg-convert -d 192 -p 192 input.svg -o output.png

# Convert to a specific width
rsvg-convert -w 512 input.svg -o output.png

Node.js: sharp

sharp can rasterize SVG files using libvips.

npm install sharp

const sharp = require('sharp');

// Convert SVG to PNG at 512px wide
sharp('input.svg')
    .resize(512)
    .png()
    .toFile('output.png')
    .then(info => console.log(`Output: ${info.width}×${info.height}`));

sharp handles plain SVGs well but may not support all SVG features (particularly external fonts and complex filters). For production icon pipelines, it's excellent.

Batch convert:

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const inputDir = './icons/svg';
const outputDir = './icons/png';

fs.readdirSync(inputDir)
    .filter(f => f.endsWith('.svg'))
    .forEach(file => {
        const name = path.basename(file, '.svg');
        for (const size of [16, 32, 64, 128, 256, 512]) {
            sharp(path.join(inputDir, file))
                .resize(size)
                .png()
                .toFile(path.join(outputDir, `${name}-${size}.png`));
        }
    });

Python: cairosvg

cairosvg uses the same cairo rendering engine as Inkscape.

pip install cairosvg

import cairosvg

# Convert to PNG at default resolution
cairosvg.svg2png(url='input.svg', write_to='output.png')

# Convert at a specific width
cairosvg.svg2png(url='input.svg', write_to='output.png', output_width=512)

# Convert from a string
svg_content = open('input.svg').read()
cairosvg.svg2png(bytestring=svg_content.encode(), write_to='output.png', output_width=512)

# Convert from URL
cairosvg.svg2png(url='https://example.com/icon.svg', write_to='output.png', output_width=64)

Resolution guidance

SVG is resolution-independent. When exporting to PNG, you must choose a pixel size. Guidelines by use case:

For website use, export at 2× your CSS display size and serve the PNG using srcset with 2x:

<img
  src="logo.png"
  srcset="logo.png 1x, logo-2x.png 2x"
  alt="Company Logo"
  width="200"
  height="60"
/>

Handling transparency

SVGs support transparency natively. PNGs support a full alpha channel. The conversion preserves transparency — you get a PNG with a transparent background, not a white one, as long as:

• The SVG doesn't have an explicit background rectangle
• Your converter doesn't add a white background by default

If you need a white background:

# ImageMagick: flatten onto white before converting
convert -background white -alpha remove input.svg output.png

// sharp: flatten with white background
sharp('input.svg')
    .flatten({ background: { r: 255, g: 255, b: 255 } })
    .png()
    .toFile('output-white-bg.png');