🖼️ SVG to PNG Converter

Complete Guide: SVG to PNG Converter

SVG (Scalable Vector Graphics) is the ideal format for logos, icons, and illustrations that need to look sharp at any size. But there are many situations where you need a raster PNG instead — email clients that don't support SVG, iOS app icon requirements, legacy content management systems, or third-party services that accept only raster images. This guide covers everything you need to know about converting SVG to PNG at the right dimensions and quality.

When You Need PNG Instead of SVG

• Email clients: Most email clients (Outlook, older iOS Mail) do not render SVG. PNG is universally supported.
• App icons: Apple's App Store and Google Play require PNG icons at specific pixel dimensions (e.g., 1024×1024 for iOS).
• Social media thumbnails: Open Graph images must be raster formats.
• Legacy CMS platforms: WordPress media library handles PNG reliably but may display SVG inconsistently.
• PDF embedding: Some PDF generators cannot handle SVG references.

SVG viewport vs viewBox

Understanding these two attributes is critical for correct conversion. The viewport is the outer dimensions defined by the width and height attributes on the <svg> element — this is how large the SVG renders in its default context. The viewBox attribute defines the internal coordinate system: viewBox="0 0 100 100" means the SVG's internal canvas runs from 0 to 100 in both axes, regardless of the rendered size. When converting, you should respect the viewBox aspect ratio to avoid stretching the image.

DPI/PPI for Print-Ready Exports

Screen resolution is typically 72 or 96 DPI. Print requires 300 DPI minimum for sharp results. To create a print-ready PNG from an SVG intended for a 2-inch width at 300 DPI, you need 600 pixels wide (2 inches × 300 DPI). Always multiply your intended physical size by the target DPI to calculate the required pixel dimensions before conversion.

Canvas Rasterization Process

Browser-side SVG-to-PNG conversion uses the Canvas API:

1. Create an <img> element and set its src to the SVG (either a URL or a Blob URL)
2. Wait for the image's load event
3. Create a <canvas> with the desired output pixel dimensions
4. Call ctx.drawImage(img, 0, 0, width, height)
5. Export with canvas.toBlob(callback, 'image/png')

const img = new Image();
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = 512;
  canvas.height = 512;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, 512, 512);
  canvas.toBlob((blob) => downloadPng(blob), 'image/png');
};
img.src = svgBlobUrl;

Preserving Transparency

PNG supports full alpha channel transparency, and the Canvas API preserves it. By default, a new canvas has a transparent background. Do not call ctx.fillRect with white before drawing if you want to keep the SVG's transparent areas transparent in the output PNG. If you need a white background (for JPEG conversion, for example), explicitly fill the canvas with white first.

External Resources and the CORS Problem

SVG files can reference external resources using <image href="https://...">, external fonts via <link> or @import, or linked SVG symbols. When rasterizing with Canvas, external resources that violate CORS policy will fail silently or taint the canvas, making it impossible to export. The canvas will throw a SecurityError when you try to call toBlob() on a tainted canvas. The fix is to inline all resources before conversion — embed fonts as Base64 data URIs and inline any referenced images.

For generating multiple icon sizes from a single SVG, see the Favicon Generator. To reduce PNG file size after conversion, run it through the Image Compressor.