WebToolsPlanet
image Tools

SVG to PNG Converter

Convert SVG files or code to high-resolution PNG at any scale — preserves transparency, handles embedded fonts.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SVG to PNG Converter?

SVG (Scalable Vector Graphics) is an XML-based vector format that scales infinitely without quality loss. However, many contexts require raster PNG images: email clients do not reliably support SVG, social media platforms require JPEG or PNG uploads, mobile app stores need raster icon assets (even for vector icons, they must be supplied as PNG in the asset catalog), and many legacy publishing tools, Word documents, and slide decks don't support SVG.

Converting SVG to PNG requires rasterization — the vector math is evaluated and "painted" into a pixel grid at a specific resolution. The higher the resolution chosen, the sharper and larger the exported PNG. This tool uses the browser's SVG rendering engine (same engine used to display SVGs on web pages) to produce the most accurate rasterization possible: it renders the SVG to a Canvas element at the specified size, then exports the Canvas as PNG. Since SVG is XML, it can optionally be pasted as text code rather than uploaded as a file.

How to Use SVG to PNG Converter

1

Upload an .svg file using the file picker, or paste SVG code directly into the code input field

2

Set the Export Width in pixels — the height scales proportionally to maintain the SVG's aspect ratio (or set a fixed height to crop)

3

Optionally set a scale multiplier (2× for @2x retina, 3× for @3x) to export high-density pixel versions

4

Preview the rendered PNG in the browser — verify the SVG renders correctly (fonts, gradients, filters)

5

Click "Download PNG" to save the file — the filename uses the original SVG filename with .png extension

Common Use Cases

  • Exporting a SVG logo to PNG for use as an email signature image (email clients don't support SVG)
  • Generating @1x, @2x, and @3x PNG icon assets from a single SVG source for an iOS/Android app
  • Exporting an SVG icon from Figma as PNG for use in a Word document or PowerPoint slide
  • Converting an SVG infographic to a shareable PNG for social media (Twitter, LinkedIn)
  • Creating a PNG favicon from an SVG logo source (legacy browser favicon.ico support requires PNG)
  • Generating high-resolution PNG exports of SVG data visualizations for print publications
  • Providing PNG fallback images for SVGs in HTML (using the <picture> element or onerror fallback)
  • Exporting a CSS/HTML animation frame as a static PNG for thumbnail use

Example Input and Output

Converting a 24px icon SVG to multiple PNG sizes for app development:

Source SVG (vector, 24×24 viewBox)
<svg width="24" height="24" viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10"
          fill="#4f46e5" stroke="white" stroke-width="2"/>
  <path d="M8 12h8M12 8v8"
        stroke="white" stroke-width="2" stroke-linecap="round"/>
</svg>
PNG exports at different scales
Export 1: icon-24.png    →  24 ×  24px (1x — standard)
Export 2: icon-48.png    →  48 ×  48px (2x — Retina)
Export 3: icon-72.png    →  72 ×  72px (3x — iPhone Pro)
Export 4: icon-512.png   → 512 × 512px (App Store icon)

Canvas rendering: transparent background preserved.
Colors: #4f46e5 / white rendered pixel-perfect.

Total Privacy

SVG files are loaded and rendered entirely in your browser. No SVG content — which may include proprietary logos, diagrams, or designs — is uploaded to our servers. The conversion uses the browser's native SVG rendering engine.

Alternative: Inkscape CLI

For batch SVG-to-PNG conversion of many files, use Inkscape's command-line interface: inkscape input.svg --export-type=png --export-width=512 --export-filename=output.png. The free SVGOMG tool can also optimize your SVG before conversion (reducing file size). For Node.js scripts, the sharp library (using libvips) provides fast programmatic SVG-to-PNG conversion.

Font Embedding

SVG files with custom fonts render correctly only if those fonts are available in the browser. If your SVG uses a system or Google Font not loaded on the current browser, text will render in a fallback font. Solution: in Figma or Illustrator, "outline" text before exporting as SVG (converts text to path elements with no font dependency). This guarantees identical rendering everywhere but removes text's editability.

Frequently Asked Questions

Why would I use PNG when SVG is better for most purposes?
SVG is preferable for: browser web content, CSS masks, and responsive designs. PNG is required for: email clients (Outlook, Gmail's mobile app have inconsistent SVG support), social media photo uploads (Twitter, Facebook, LinkedIn require raster images), app store asset catalogs (iOS Xcode and Android require PNG assets), office documents (Word, PowerPoint have limited SVG support especially on older versions), and OGP social media cards (og:image must be a JPEG or PNG URL).
What is the "@2x" or "Retina" export and when do I need it?
Retina (HiDPI) displays have 2 or 3 physical pixels per logical CSS pixel. A 24px icon on a Retina display is actually rendered using 48×48 physical pixels. If you supply only a 24×24 PNG, the display scales it up by 200%, causing blurriness. The solution: export the PNG at 2× the logical size (48×48 for a 24px icon, 144×144 for a 72px icon), then set width/height="24" in HTML or CSS — the 48px image renders at 24 CSS pixels on Retina, crisp.
Why do some SVG files not convert correctly?
Several SVG features can cause rendering issues in browser Canvas: (1) External fonts — <text> elements using fonts not loaded in the browser may fallback to a different font. (2) External image references (<image href="photo.jpg">) — blocked by CORS in Canvas. (3) CSS @import in SVG stylesheets — may not resolve in a sandboxed Canvas. (4) SVG filters (<feGaussianBlur>) — usually work but complex filter chains may render slightly differently across browsers.
Does the PNG preserve SVG transparency?
Yes. PNG supports full 8-bit alpha channel (256 levels of transparency per pixel) which preserves SVG transparency completely. The Canvas is initialized with a transparent background (not filled with white). If you want a white or colored background, add a background color setting before export — this is useful for social media platforms that don't support PNG transparency (they may render transparent areas as black).
What is the maximum export size?
Browser Canvas elements support very large sizes — Chrome allows up to approximately 35,000 × 35,000 pixels. However, generating very large PNGs (10,000px+) uses significant RAM (a 10,000 × 10,000 RGBA canvas = 400MB of memory). For print production at 300 DPI (a 10cm × 10cm image at 300 DPI = 1181 × 1181 pixels), this tool is suitable. For billboard-scale print, use a dedicated vector editor (Inkscape, Illustrator) with DPI-aware export.
Is there a difference between exporting SVG from Figma vs using this tool?
Figma's PNG export engine uses a proprietary renderer that may handle text and font rendering differently from the browser's SVG renderer. For Figma-designed SVGs, Figma's built-in PNG export (right-click → Export → PNG) is usually more accurate. Use this tool when you have an SVG from another source (Illustrator, Inkscape, hand-coded), when you need a quick conversion without opening a design tool, or when you need a specific custom pixel size not available in Figma's export presets.

How This Tool Works

The SVG source (from upload or text input) is converted to a Blob URL via URL.createObjectURL() or encoded as a data URI. An <img> element loads the SVG Blob. On img.onload, the image is drawn to an HTML5 Canvas at the specified export dimensions via ctx.drawImage(). The Canvas uses the browser's built-in SVG rendering engine for drawing. canvas.toBlob('image/png') creates the PNG binary, which is triggered as a download via a programmatic <a> element.

Technical Stack

HTML5 Canvas APISVG Blob URL loadingctx.drawImage() SVG rasterizationcanvas.toBlob() PNG exportClient-side only

Related Tools

Image Cropper
Crop, rotate, and resize images with preset aspect ratios — all locally in your browser with no quality loss.
Placeholder Image Generator
Generate placeholder images with exact dimensions, colors, and text — download as PNG or copy the URL for development.
Favicon Generator
Create favicons from text, emoji, or images — generates ICO, PNG, and all required Apple Touch icon sizes.
Base64 Image Encoder
Convert PNG, JPG, WebP, and SVG images to Base64 strings for direct embedding in HTML, CSS, or JSON payloads.
Image Converter
Convert images between PNG, JPG, WebP, and AVIF formats — with quality controls and batch conversion.
Image Compressor
Reduce image file size online — compress JPEG, PNG, and WebP without losing visible quality.