Skip to content

How to Convert SVG to PNG: Methods, Tools and Best Practices

SVG (Scalable Vector Graphics) is the go-to format for icons, logos and illustrations on the web because it scales perfectly to any size. But there are many situations where you need a raster image instead: social media uploads, email signatures, app store screenshots, favicons at specific sizes or sharing with non-technical stakeholders who cannot open SVG files. In this guide, we will cover how SVG to PNG conversion works, different methods to do it and best practices for getting crisp, high-quality results.

SVG vs PNG: When to Use Each

Understanding the strengths of each format helps you decide when conversion is necessary:

  • SVG is resolution-independent, lightweight for simple graphics, supports CSS styling and animation, and is ideal for icons, logos and UI elements on the web.
  • PNG supports transparency, works everywhere (email clients, social platforms, image editors), is required for raster effects like photos with overlays, and is the expected format for many upload forms.
  • Convert SVG to PNG when: you need a fixed-size image for social sharing, the target platform does not support SVG, you need to embed the image in a PDF or Word document, or you want to apply raster-based effects.

How SVG to PNG Conversion Works

Converting SVG to PNG is called rasterization. The vector paths, shapes and text in the SVG are rendered onto a pixel grid at a specific resolution. The browser (or any SVG renderer) calculates which pixels fall inside each shape, applies colors and gradients, handles anti-aliasing at edges and produces a bitmap image. The quality of the output depends entirely on the target resolution. A 100x100 pixel export will look blurry when enlarged, while a 2000x2000 export will be crisp but larger in file size.

Method 1: Browser Canvas API

The most common client-side approach uses the HTML Canvas API. You draw the SVG onto a canvas element and then export the canvas as a PNG:

const svg = document.querySelector("svg");

const svgData = new XMLSerializer().serializeToString(svg);

const svgBlob = new Blob([svgData], { type: "image/svg+xml" });

const url = URL.createObjectURL(svgBlob);

const img = new Image();

img.onload = () => {

const canvas = document.createElement("canvas");

canvas.width = img.width * scale;

canvas.height = img.height * scale;

const ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

const pngUrl = canvas.toDataURL("image/png");

};

img.src = url;

This approach runs entirely in the browser with no server needed. The scale multiplier lets you export at 2x or 3x resolution for retina displays.

Method 2: Command-Line Tools

For batch conversion or CI/CD pipelines, command-line tools are more practical:

# Using Inkscape (most accurate rendering)

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

# Using ImageMagick

convert -density 300 input.svg output.png

# Using librsvg (fast, lightweight)

rsvg-convert -w 1024 input.svg > output.png

# Using sharp (Node.js)

sharp("input.svg").resize(1024).png().toFile("output.png")

Inkscape provides the most accurate rendering since it is a full SVG editor. For automated pipelines, sharp or rsvg-convert are faster and lighter.

Method 3: Headless Browser

When your SVG uses web fonts, CSS animations or complex filters that simpler tools cannot render correctly, a headless browser like Puppeteer gives you pixel-perfect results:

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.setViewport({ width: 1200, height: 630 });

await page.setContent(`<html><body>${svgString}</body></html>`);

await page.screenshot({ path: "output.png", type: "png" });

await browser.close();

This is the heaviest approach but handles every SVG feature correctly since it uses the same rendering engine as Chrome.

Resolution and Scale Factor

The most common mistake when converting SVG to PNG is exporting at too low a resolution. Here are recommended sizes for common use cases:

  • Social media OG image: 1200 x 630 pixels
  • App icon: 1024 x 1024 pixels (iOS/Android will downscale)
  • Favicon: 32x32, 180x180 (apple-touch-icon), 192x192 and 512x512 for PWA
  • Print: 300 DPI minimum. For a 4-inch wide logo, that means 1200 pixels wide
  • Retina displays: Export at 2x the display size. A 200px wide icon needs a 400px export

Common Issues and Fixes

  • Fonts look wrong. If your SVG references a web font that is not embedded, the converter will fall back to a system font. Fix this by converting text to paths in your SVG editor or embedding the font as a Base64 data URI inside the SVG.
  • Transparent background becomes white. Some tools default to a white background. Make sure to set the background to transparent or use the PNG alpha channel.
  • External images not loading. SVGs can reference external images with <image href="...">. Canvas-based conversion may fail due to CORS. Embed images as Base64 data URIs to fix this.
  • Clipping and viewBox issues. If the output is cropped or scaled incorrectly, check the SVG's viewBox, width and height attributes. The viewBox defines the coordinate system and determines what gets rendered.
  • File size too large. PNG file size grows with dimensions. Use tools like pngquant or optipng to compress the output without visible quality loss.

Batch Conversion

If you need to convert many SVG files at once, a simple shell script with any of the command-line tools works well:

# Convert all SVGs in a folder to 2x PNG

for file in icons/*.svg; do

rsvg-convert -w 512 "$file" > "output/$(basename "$file" .svg).png"

done

Convert SVG to PNG in your browser

Upload or paste SVG code, set custom dimensions and scale factor, and download a high-quality PNG. All processing happens locally.

Open SVG to PNG Converter