How to Convert SVG to PNG at Any Resolution

Why Convert SVG to PNG?

SVG (Scalable Vector Graphics) is the web's standard vector format — infinitely scalable, text-based, and perfect for logos, icons, and illustrations. But not every context accepts SVG. Email clients strip SVG (security concern), many social media platforms reject it, print shops typically want rasterized formats, some CMSs and image editors do not support SVG, and native mobile apps often need PNG assets at specific pixel densities.

The beauty of SVG-to-PNG conversion is that you choose the output resolution. Since SVGs are vector graphics defined by mathematical paths rather than pixels, you can render them at 16x16 for a favicon, 1024x1024 for an app icon, or 4096x4096 for a print asset — all from the same source file with perfect sharpness at every size.

Method 1: Using Inkscape (Most Accurate)

Inkscape is the reference SVG renderer. It handles the full SVG specification, including filters, gradients, text, and embedded fonts:

# Export at specific width (height auto-calculated from aspect ratio)
inkscape input.svg --export-filename=output.png --export-width=1024

# Export at specific DPI
inkscape input.svg --export-filename=output.png --export-dpi=300

# Export at exact dimensions
inkscape input.svg --export-filename=output.png \
  --export-width=1024 --export-height=1024

Batch Convert with Inkscape

mkdir -p png
for file in *.svg; do
  [ -f "$file" ] || continue
  inkscape "$file" --export-filename="png/${file%.svg}.png" \
    --export-width=1024
done

Method 2: Using ImageMagick/Sharp

ImageMagick

# Basic conversion (renders at SVG's intrinsic size)
convert input.svg output.png

# Render at specific density then resize
convert -density 300 input.svg -resize 1024x1024 output.png

# With transparent background preserved
convert -background none -density 300 input.svg output.png

The -density flag sets the rendering DPI. A higher density means a higher quality rasterization before any resizing is applied.

Multi-Resolution Icon Set

Generate multiple sizes from a single SVG (common for app icons):

for size in 16 32 48 64 128 256 512 1024; do
  convert -background none -density 300 input.svg \
    -resize ${size}x${size} "icon_${size}x${size}.png"
done

Method 3: Using librsvg (Fast, Lightweight)

rsvg-convert is a fast command-line SVG renderer:

# Install: brew install librsvg (macOS) or apt install librsvg2-bin (Ubuntu)

# Convert at specific width
rsvg-convert -w 1024 input.svg > output.png

# Convert at specific height
rsvg-convert -h 768 input.svg > output.png

# Convert at specific DPI
rsvg-convert -d 300 -p 300 input.svg > output.png

rsvg-convert is significantly faster than Inkscape for batch processing — roughly 10x faster per file — but it supports a smaller subset of the SVG specification.

Method 4: Online Conversion

Use the SVG to PNG converter online for instant conversion at any resolution. Upload your SVG file, select the desired output size, and download the PNG. For other image conversions, try the Image Converter.

Understanding SVG Dimensions and Viewbox

SVG files define their size in two ways: explicit width/height attributes and the viewBox attribute. This affects how the PNG is rendered:

<!-- SVG with explicit dimensions -->
<svg width="200" height="100" viewBox="0 0 200 100">

<!-- SVG with viewBox only (no explicit dimensions) -->
<svg viewBox="0 0 200 100">

When the SVG has no explicit width/height, the converter must choose a default size. Different tools handle this differently:

For predictable results, always specify the output size explicitly.

Quality and Settings Tips

DPI vs. pixel dimensions: For screen use (web, apps, social media), specify pixel dimensions directly (e.g., 1024x1024). For print use, specify DPI (e.g., 300 DPI) and let the physical dimensions of the SVG determine the pixel count.

Anti-aliasing: All modern SVG renderers apply anti-aliasing by default, producing smooth edges. For pixel-perfect rendering (e.g., 16x16 icons), you may want to disable anti-aliasing or manually hint the SVG paths to land on pixel boundaries.

Transparent backgrounds: SVG backgrounds are transparent by default. To preserve transparency in the PNG, ensure you use a tool that supports alpha channels. In ImageMagick, use -background none. In Inkscape, transparency is preserved by default.

Text rendering: SVGs with text elements require the referenced fonts to be installed on the system running the conversion. If fonts are missing, the text renders in a fallback font, potentially breaking the design. For reliable conversion, convert text to paths in the SVG first:

inkscape input.svg --export-text-to-path --export-filename=output.png

Color space: SVGs use sRGB by default. PNGs support sRGB, and this is preserved during conversion. For print workflows requiring CMYK, convert the PNG to TIFF with a CMYK profile after rasterization.

For more on vector vs. raster formats, see our SVG vs PNG comparison.

Generating App Icon Sets

Modern apps require icons at numerous sizes. Generate them all from one SVG:

iOS App Icons

sizes="20 29 40 58 60 76 80 87 120 152 167 180 1024"
for size in $sizes; do
  rsvg-convert -w $size -h $size input.svg > "AppIcon_${size}x${size}.png"
done

Android Adaptive Icons

declare -A densities=([mdpi]=48 [hdpi]=72 [xhdpi]=96 [xxhdpi]=144 [xxxhdpi]=192)
for density in "${!densities[@]}"; do
  size=${densities[$density]}
  mkdir -p "mipmap-${density}"
  rsvg-convert -w $size -h $size input.svg > "mipmap-${density}/ic_launcher.png"
done

Favicon Multi-Size

for size in 16 32 48; do
  rsvg-convert -w $size -h $size input.svg > "favicon_${size}.png"
done

For favicon-specific workflows, see our guide on how to create a favicon.

Common Issues and Troubleshooting

Output is blurry at small sizes

SVG content designed for large display may not look sharp at small sizes. At 16x16 or 32x32 pixels, fine details and thin lines may become blurred. For small sizes, use a simplified version of the SVG with thicker strokes and fewer details.

Fonts look wrong

The required fonts are not installed on the conversion system. Either install the fonts, or convert all text to outlines (paths) in the SVG source file before converting to PNG.

SVG filters not rendering

Complex SVG filters (blur, drop-shadow, color matrix) are not supported by all renderers. Inkscape has the best filter support. ImageMagick and rsvg-convert may ignore or misrender certain filters. Test with Inkscape if other tools produce incorrect output.

Transparent background appears white

Some viewers display transparent PNG backgrounds as white. The file is actually transparent — verify by opening it in a tool that shows the alpha channel (like GIMP or Photoshop). If you genuinely need a white background, add -background white -flatten in ImageMagick.

Conclusion

SVG-to-PNG conversion lets you render vector graphics at any resolution from a single source file. For the most accurate rendering of complex SVGs, use Inkscape. For fast batch processing of simpler SVGs, use rsvg-convert. Always specify the output resolution explicitly, handle text fonts before conversion, and preserve transparency when needed.

Ready to convert? Try our free SVG to PNG converter — no registration required.