How to Convert SVG to PNG — The Resolution Decision You Must Get Right

Converting SVG to PNG is fundamentally different from converting between raster formats. SVG is vector — it describes shapes mathematically and has infinite resolution. PNG is raster — a fixed grid of pixels. The moment you convert SVG to PNG, you permanently lock in a specific pixel dimension. Choose too small, and the result looks blurry when displayed larger. Choose too large, and you create unnecessarily large files.

The most common mistake: taking the default export size from a design tool (which might be 72×72 or 100×100 pixels) and using that PNG in a print project or large display context. This guide teaches you how to pick the correct dimensions every time.

SVG vs PNG: The Vector vs Raster Distinction

Understanding why you need to choose resolution requires understanding what these formats actually are:

SVG (Scalable Vector Graphics) is a text-based XML format that describes an image as a series of mathematical instructions: "draw a circle at center 50,50 with radius 30, filled with blue." No matter how large or small you display the SVG, the browser renders it fresh from those instructions at the current display size — always crisp, always perfect. A 1 KB SVG logo looks sharp on a phone screen and on a 4K display.

PNG is a raster format — a fixed rectangular grid of pixels. A 200×200 PNG has exactly 200 columns and 200 rows of pixels, each with a specific color value. If you display a 200×200 PNG at 400×400 pixels, the browser must scale up the pixel grid — producing visible softening or blurriness because it is interpolating between fixed pixel values.

When you convert SVG to PNG, the renderer rasterizes the vector instructions at a specific pixel dimension. That dimension is a one-time decision that determines how sharp the PNG will look at various display sizes.

The Right Resolution for Every Use Case

The 72-DPI Trap — Most Common SVG Export Mistake

Many design tools (Illustrator, Figma, Inkscape) default to exporting SVG as PNG at the artboard's "document resolution" — often 72 DPI, the legacy "screen resolution" standard from the era of 72-pixel-per-inch CRT monitors.

If your SVG artboard is 2 inches × 2 inches and you export at 72 DPI, you get a 144×144 pixel PNG. That looks adequate on screen — but if you print that image at 300 DPI, it covers only 0.48 inches × 0.48 inches at full sharpness, and the remaining area is upscaled and blurry.

The fix: always specify your export dimensions explicitly in pixels, independent of DPI settings. Think in pixels, not inches, for digital exports.

Method 1: Convertlo — Free, Specify Width

Method 2: Inkscape CLI — Precise Control

# Export SVG to PNG at 300px wide (Inkscape 1.x syntax)
inkscape --export-type=png --export-width=300 -o output.png input.svg

# Export at 600px wide for print quality
inkscape --export-type=png --export-width=600 -o output.png input.svg

# Batch: export all SVGs at 500px wide
for f in *.svg; do
  inkscape --export-type=png --export-width=500 -o "${f%.svg}.png" "$f"
done

# Using ImageMagick (rsvg must be installed for good SVG support)
convert -density 300 -resize 600 input.svg output.png

# Using rsvg-convert (best SVG renderer for CLI)
rsvg-convert -w 600 input.svg -o output.png

Of the CLI tools, rsvg-convert (from the librsvg package) produces the most accurate SVG rendering. ImageMagick's SVG support is functional but may not render all SVG features correctly (gradients, filters, complex paths). Inkscape is the most feature-complete SVG renderer available.

Method 3: Figma, Illustrator, or Sketch Export

Resolution Reference Table

When to Keep SVG Instead of Converting to PNG

Before converting, check whether SVG itself would work for your use case. SVG is supported virtually everywhere modern:

• Websites: All modern browsers display SVG in <img> tags, CSS backgrounds, and inline. SVG is always preferred for logos on web.
• Figma, Sketch, Illustrator: All import and export SVG natively.
• WordPress: Supports SVG uploads with a security plugin (SVG files must be sanitized).

Convert to PNG when: the destination is email (Outlook doesn't support SVG in all versions), when the tool explicitly requires raster format, or when you need the SVG embedded in a context that doesn't support vector (PDF thumbnails, old CMS systems, WhatsApp).

Frequently Asked Questions