SVG to PNG Converter

You have an SVG icon and need a PNG — for an email template, a Slack channel avatar, a slide deck, or a CMS that only accepts raster images. The browser’s right-click Save As gives you SVG. Figma’s export requires opening the file. Inkscape is overkill for a one-off conversion. This tool converts SVG to PNG in your browser, at any scale, with a transparent or custom background.

Why Rasterize SVG to PNG?

SVG is resolution-independent and ideal for the web. But many contexts require raster images:

• Email clients — most email clients don’t render SVG. Gmail, Outlook, and Apple Mail all require PNG or JPEG for inline images.
• Compatibility — older software, CMS platforms, and image upload fields often reject SVG. PNG is universally supported.
• Specific pixel dimensions — when a design spec says “provide a 400×400 PNG at 2x”, you need exact pixel control.
• Social media — Open Graph images, Twitter cards, and LinkedIn posts require raster formats.
• Presentation slides — Google Slides and PowerPoint handle PNG better than SVG in many scenarios.

Scale Factors for Retina Displays

Modern displays use device pixel ratios of 2x, 3x, or even higher (iPhone 15 Pro uses 3x). An SVG that defines width="200" renders as 200 CSS pixels, but on a 2x retina screen that’s 400 physical pixels. To get a crisp PNG:

• 1x — same as the SVG’s declared dimensions. Fine for standard 1x displays.
• 2x — doubles the pixel dimensions. The standard for retina/HiDPI displays.
• 3x — triples dimensions. Used for mobile app icons and very high-DPI screens.
• 4x — quadruples dimensions. Suitable for print or very large display use cases.

If your SVG declares viewBox="0 0 24 24", a 2x export gives you a 48×48 PNG — the common size for UI icons.

Transparent vs. Opaque Backgrounds

SVG supports transparency natively. When you export to PNG, you can preserve that transparency or composite it over a solid color.

• Transparent — the default. PNG supports a full alpha channel. Use this when you need to place the image over different backgrounds.
• White or black — flattens the SVG onto a solid background. Useful when the downstream format doesn’t support transparency (like JPEG).
• Custom color — choose any hex color as the background. Helpful for previewing how the icon looks against your brand color, or for social media images that need a specific background.

Custom Width and Height

The scale factor multiplies the SVG’s declared dimensions. If you need a specific pixel output — say exactly 512×512 — use the custom width/height fields. With aspect ratio lock enabled, entering a width automatically calculates the proportional height.

How It Works

The conversion uses the HTML5 Canvas API:

const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);
const img = new Image();
img.onload = () => {
  canvas.width = outputWidth;
  canvas.height = outputHeight;
  if (background !== "transparent") {
    ctx.fillStyle = background;
    ctx.fillRect(0, 0, outputWidth, outputHeight);
  }
  ctx.drawImage(img, 0, 0, outputWidth, outputHeight);
  canvas.toBlob(blob => download(blob), "image/png");
  URL.revokeObjectURL(url);
};
img.src = url;

The SVG is converted to a Blob URL, loaded into an Image element, drawn onto a Canvas at the target dimensions, then exported as a PNG blob. Everything happens in the browser — no data is sent to any server.

Frequently Asked Questions

Why does my SVG render incorrectly or appear blank? Some SVGs use external resources (fonts, images referenced by URL) that the browser can’t load from a Blob URL due to CORS restrictions. Self-contained SVGs with inline styles and shapes always render correctly. If an SVG uses <use> elements referencing external IDs or external stylesheets, those may not resolve.

Can I convert an SVG with embedded fonts? If the fonts are embedded as Base64 data URIs in a <style> block within the SVG, they will render. External font URLs (like Google Fonts) will not load during the Canvas conversion.

What dimensions does the tool use if the SVG has no width or height? The tool reads the viewBox attribute first (e.g. viewBox="0 0 100 100" gives 100×100). If there’s no viewBox, it reads width and height attributes. If neither is present, it defaults to 300×150 (the CSS default SVG size).

Is there a file size limit? There is no enforced limit. The Canvas API can handle SVGs of any complexity. Very large SVGs or high scale factors (4x on a large SVG) may be slow on lower-end devices due to the number of pixels being rendered.

My image has no data when I open the downloaded PNG. Why? This can happen if the SVG uses <image> tags referencing external URLs that fail to load. The Canvas security model blocks cross-origin image data. Ensure your SVG is fully self-contained.

Does this tool preserve SVG animations? No. The Canvas API captures a static snapshot of the SVG at the moment of rendering. CSS animations and SMIL animations are not captured — you’ll get the initial frame of the animation.