How to Convert SVG to PNG (5 Free Methods)

SVG files are scalable, lightweight, and perfect for the web. But sometimes you need a PNG — for a PowerPoint slide, a social media post, a print design, or any context that doesn't understand vector graphics. (Not sure which format you need? See SVG vs PNG: When to Use Each Format for a full comparison.) Converting SVG to PNG means rasterizing: turning resolution-independent vector paths into a fixed grid of pixels.

The key decision is what resolution to rasterize at, because that determines the quality of your PNG. A 100×100 PNG will look blocky when scaled up. A 4000×4000 PNG will look sharp at any size but weigh several megabytes.

Here are five free methods, each with different strengths.

Method 1: Browser DevTools (No Install, Any Browser)

Every modern browser has a built-in SVG renderer. You can use it to convert SVG to PNG at any resolution with zero software installation.

Chrome / Edge / Firefox

1. Open the SVG file in your browser (drag it onto an empty tab, or File → Open).
2. Open DevTools (F12 or Ctrl+Shift+I / Cmd+Option+I).
3. Go to the Console tab and paste this script:

// Set your desired output dimensions
const WIDTH = 2000;
const HEIGHT = 2000;

const svg = document.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svg);
const canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
    ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);
    const a = document.createElement('a');
    a.download = 'output.png';
    a.href = canvas.toDataURL('image/png');
    a.click();
};
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));

4. Press Enter. A PNG file downloads automatically.

Pros: Works anywhere, no install, full resolution control. Cons: Manual process, no batch support, external fonts and linked images may not render.

Handling SVGs With External Resources

If your SVG references external fonts (@font-face with URLs) or linked images (<image href="...">), the browser DevTools method may render them incorrectly or with missing elements. Solutions:

• Inline the fonts: Convert font URLs to base64 data URIs inside the SVG's <style> block.
• Inline images: Convert <image> hrefs to base64 data URIs.
• Use Inkscape instead — it resolves external resources during export.

Method 2: Inkscape (Free, Open Source, Full Control)

Inkscape (version 1.3.2, GPLv3 license) is the most capable free SVG editor. Its PNG export gives you complete control over resolution, background, and area.

GUI Export

1. Open the SVG in Inkscape.
2. File → Export PNG Image (Shift+Ctrl+E).
3. Set the export area:
   • Page — exports the entire SVG canvas
   • Drawing — exports only the content (trims whitespace)
   • Selection — exports only selected objects
4. Set DPI (96 = screen resolution, 300 = print quality, 600 = high-quality print).
5. Click Export.

Command-Line Export (Batch Conversion)

# Single file — export at 300 DPI
inkscape input.svg --export-type=png --export-dpi=300 --export-filename=output.png

# Batch convert all SVGs in a directory
for f in *.svg; do
    inkscape "$f" --export-type=png --export-dpi=300 --export-filename="${f%.svg}.png"
done

# Export at specific pixel dimensions (2000×2000)
inkscape input.svg --export-type=png --export-width=2000 --export-height=2000 --export-filename=output.png

Pros: Handles complex SVGs (filters, fonts, gradients, clipping paths), precise DPI control, batch support. Cons: Requires installation (~100 MB), slower than lightweight tools for simple conversions.

Method 3: ImageMagick (Command Line, Cross-Platform)

ImageMagick (version 7.1.1-29, Apache 2.0 license) delegates SVG rendering to its built-in MSVG renderer or an external library (librsvg if installed).

# Basic conversion
magick input.svg output.png

# Specify output dimensions
magick -density 300 input.svg -resize 2000x2000 output.png

# With transparent background (default for SVG)
magick -background none input.svg output.png

# Batch convert
magick mogrify -format png -density 300 *.svg

The -density flag controls the rasterization resolution in DPI before any resize operation. Setting -density 300 means ImageMagick renders the SVG at 300 DPI, then -resize scales the result. This produces sharper output than rendering at 72 DPI and upscaling.

Pros: Fast, scriptable, available on all platforms. Cons: ImageMagick's built-in SVG renderer (MSVG) struggles with complex SVGs — CSS styles, advanced filters, and embedded fonts often render incorrectly. Install librsvg (librsvg2-bin on Ubuntu) for better results: magick -define svg:delegate=rsvg input.svg output.png.

Method 4: librsvg / rsvg-convert (Linux/macOS, Lightweight)

rsvg-convert from the librsvg library (version 2.58.0, LGPLv2.1 license) is a fast, lightweight SVG renderer that handles CSS styling and most SVG features correctly.

# Install
# Ubuntu/Debian
sudo apt install librsvg2-bin
# macOS (Homebrew)
brew install librsvg

# Basic conversion
rsvg-convert input.svg -o output.png

# Specify width (height auto-calculated from aspect ratio)
rsvg-convert -w 2000 input.svg -o output.png

# Specify exact dimensions
rsvg-convert -w 2000 -h 2000 input.svg -o output.png

# Set DPI
rsvg-convert -d 300 -p 300 input.svg -o output.png

# With specific background color
rsvg-convert -b white input.svg -o output.png

# Batch convert
for f in *.svg; do
    rsvg-convert -w 2000 "$f" -o "${f%.svg}.png"
done

Pros: Fast (significantly quicker than Inkscape), good CSS support, lightweight (~2 MB), scriptable. Cons: Doesn't support JavaScript-dependent SVGs or some advanced SVG 2.0 features. No GUI.

Method 5: Node.js / Sharp (Programmatic, Build Pipelines)

For automated conversion in build pipelines, CI/CD, or Node.js applications, the sharp library (version 0.33.2, Apache 2.0 license) uses libvips internally for high-performance SVG rendering.

// npm install [email protected]
const sharp = require('sharp');

// Basic conversion
await sharp('input.svg')
    .resize(2000, 2000)
    .png()
    .toFile('output.png');

// With specific background for transparent SVGs
await sharp('input.svg')
    .flatten({ background: '#ffffff' })
    .resize(2000, 2000)
    .png()
    .toFile('output.png');

// Batch convert
const fs = require('fs');
const files = fs.readdirSync('.').filter(f => f.endsWith('.svg'));
for (const file of files) {
    await sharp(file)
        .resize(2000)
        .png()
        .toFile(file.replace('.svg', '.png'));
}

Pros: Integrates into build systems, extremely fast (libvips backend), programmatic control. Cons: Requires Node.js, limited SVG feature support (similar to librsvg — no JS execution, limited filter support).

Choosing the Right Method

For simple SVGs (icons, logos, basic shapes): any method works — use browser DevTools for a one-off, rsvg-convert for batch work.

For complex SVGs (CSS styling, filters, gradients, clipping masks): use Inkscape or the browser DevTools method. These have the most complete SVG rendering engines.

For automated pipelines: rsvg-convert or Sharp, depending on whether you prefer shell scripts or Node.js.

Getting the Right Resolution

SVG files don't have a fixed pixel size — they're defined in coordinates that can be rendered at any resolution. When converting to PNG, you need to decide on a target resolution:

Tip: If you're converting an SVG logo for use in multiple contexts, export it at 3000×3000 or higher. You can always scale a large PNG down without quality loss; you can't scale a small PNG up.

Once you have your PNG, you can use Pixotter's compression tool to reduce file size without visible quality loss, or resize it to exact dimensions for specific platforms. For a deeper look at when SVG or PNG is the better choice for your project, read SVG vs PNG: When to Use Each Format.

Handling Transparent Backgrounds

SVGs often have transparent backgrounds. When converting to PNG, you have two options:

1. Keep transparency. PNG supports full alpha channel transparency. Most conversion tools preserve it by default. The resulting PNG will have a transparent background — useful for logos, icons, and graphics that overlay other content.

2. Add a solid background. If the PNG will be used somewhere that doesn't support transparency (JPG conversion later, email clients, some print workflows), flatten the background:

   • Inkscape: Object → Object Properties → set background color before export
   • ImageMagick: -background white -flatten
   • rsvg-convert: -b white
   • Sharp: .flatten({ background: '#ffffff' })

Frequently Asked Questions

Why can't I just rename .svg to .png?

SVG and PNG are fundamentally different formats. SVG is a text-based XML document describing vector shapes. PNG is a binary raster image storing pixel data. Renaming changes the file extension but not the contents — the file will either fail to open or display incorrectly. Conversion requires rendering the vector shapes into pixels (rasterization).

Does SVG to PNG conversion lose quality?

It depends on your resolution. SVG is infinitely scalable — it has no inherent resolution. When you convert to PNG at a specific resolution, you "freeze" the image at that size. If you export at a high enough resolution (e.g., 3000×3000 for a logo), there's no perceptible quality loss. If you export too small (e.g., 100×100), fine details will be lost. Choose your export resolution based on the intended use case.

Can I convert PNG back to SVG?

Not with simple format conversion. Going from SVG→PNG loses the vector information (paths, shapes, text). Converting PNG→SVG requires image tracing — algorithms that detect edges and approximate them with vector curves. Tools like Inkscape's "Trace Bitmap" feature, Potrace, and Adobe Illustrator's Image Trace can do this, but the result is an approximation, not an exact reconstruction.

Which method handles SVG fonts best?

Browser DevTools render fonts the most reliably (assuming the fonts are loaded or embedded). Inkscape is second-best. ImageMagick and rsvg-convert may substitute missing fonts with system defaults. For reliable font rendering in automated pipelines, embed fonts directly in the SVG as base64 @font-face declarations.

How do I batch convert 100+ SVG files to PNG?

Use the command-line tools with a shell loop. rsvg-convert is the fastest for batch work:

for f in *.svg; do
    rsvg-convert -w 2000 "$f" -o "${f%.svg}.png"
done

For build pipelines, use Sharp in Node.js for programmatic control over output dimensions and quality.

Can I convert SVG to PNG online without uploading my files?

SVG rendering requires a browser engine or a dedicated renderer. Browser DevTools (Method 1) processes everything locally — nothing is uploaded. For a fully browser-based experience, open the SVG in a new tab and use the console script above. Once you have your PNG, Pixotter can further compress or resize it entirely in your browser with no uploads.