SVG to PNG: Complete Guide for Developers [2026]

When you actually need PNG instead of SVG

SVG is the best format for most web content. A vector icon at 2 KB renders pixel-perfect at any zoom level, theme-able with CSS, manipulable with JavaScript, and indexable by search engines if you add title/desc. For buttons, logos, illustrations, and data visualizations, SVG beats PNG on every axis.

But there are five places where SVG does not work and you need PNG:

• App icons. iOS and Google Play require fixed-size PNGs (1024×1024 masters, many derivative sizes). Submit SVG → rejected.
• Favicon fallback. Modern browsers accept SVG favicons but Safari on older iOS versions and many email clients that preview favicons do not. Multi-size .ico is the safe fallback.
• Email templates. Gmail, Outlook, Apple Mail strip SVG from HTML. The only reliable inline image format in email is PNG (or JPG).
• Social uploads. Instagram, WhatsApp, Facebook, and most ad platforms reject SVG uploads — they want raster.
• Print and embedded documents. Word, PowerPoint, many PDF pipelines, and print-on-demand services need raster. SVG may render unpredictably in Word specifically.

For a broader look at format tradeoffs read our complete image format guide for 2026.

viewBox math and intrinsic size

The first thing a rasterizer needs to know is “what size is this SVG naturally?” There are three places it can find the answer, in priority order:

1. The width and height attributes on the root <svg>.
2. If only one is present, derive the other from the viewBox ratio.
3. If both are missing, fall back to the viewBox extent (e.g. viewBox="0 0 100 50" → intrinsic 100×50).
4. If nothing is declared, rasterizers pick a default (browsers use 300×150; SammaPix uses 512×512).

Always declare both width and height on the root element. Skipping them leads to unpredictable output across rasterizers. This is the single most common reason that “my SVG converted fine in tool A but broke in tool B” — the two tools used different fallback rules.

<!-- Good: explicit intrinsic size -->
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#6366F1"/>
</svg>

<!-- Risky: rasterizer-dependent -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">...</svg>

Scaling strategy: 1×, 2×, 3×, custom

The output size is a function of intrinsic SVG size × scale factor. For a 100×100 SVG:

• 1× → 100×100 PNG. Good for matching the SVG design on non-HiDPI screens.
• 2× → 200×200 PNG. Standard for Retina and HiDPI (most desktops and tablets in 2026).
• 3× → 300×300 PNG. iPhones with 3× density (Plus and Pro models since iPhone 6 Plus).
• 4× → 400×400 PNG. Android XXXHDPI, 4K monitors used at 100% scaling.
• Custom → any width up to 8192 pixels. Height scales to preserve aspect ratio.

SammaPix SVG to PNG parses the intrinsic size from width/height/viewBox automatically and lets you pick the scale preset or custom width. The maximum 8192 pixels is a deliberate guard — larger canvases can crash the tab on low-memory devices.

Building a favicon pack from one SVG

A modern favicon setup serves three files from one SVG master:

1. favicon.svg — the original, served to modern browsers (Chrome/Firefox/Edge).
2. favicon.ico — multi-size container with 16×16, 32×32, 48×48 (and optionally 64/128/256) for legacy clients.
3. apple-touch-icon.png — 180×180 for iOS home screen shortcuts.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Build the favicon.ico from your SVG using the SammaPix Favicon Generator — upload the SVG, pick sizes (16/32/48 minimum), download the .ico file. For the Apple touch icon, run the SVG through SVG to PNG at 180 pixels wide.

App icons for iOS and Android

Both iOS and Google Play require a 1024×1024 master PNG (no transparency for iOS App Store, transparency optional for Play). Historical derivative sizes have shrunk because both platforms now generate them from the 1024 master automatically, but some CI pipelines and older tooling still expect the full matrix:

If you export a single 1024 PNG from SVG you can downscale inside Xcode/Android Studio. If you need all sizes pre-baked, SammaPix SVG to PNG's custom width field accepts any value from 16 to 8192 px — batch multiple runs or use Pro to process up to 200 files at once.

Open Graph and social previews

Social platforms (Facebook, Twitter/X, LinkedIn, Slack previews) require a raster image with a very specific aspect ratio:

• 1200×630 — Facebook Open Graph standard (ratio 1.91:1).
• 1200×628 — Twitter summary_large_image (nearly identical).
• 1200×627 — LinkedIn recommendation.

You cannot generate this directly from a square SVG — the aspect ratio mismatch means you either design a dedicated 1200×630 SVG or composite your logo inside a larger background. Do the layout in SVG first (full fidelity design), then rasterize to PNG at custom width 1200.

Transparency: keep it or flatten it?

PNG supports 8-bit alpha (256 levels of transparency per pixel), same as SVG. By default the conversion preserves any transparent region. Two reasons to flatten to a solid background:

• iOS App Store. Submitted app icons must not have alpha channel. A 1024 PNG with transparency will be rejected.
• Email clients. Some legacy clients render transparent PNGs on a dark background, making light icons invisible. A solid white or theme-matched background avoids the issue.

For a deep dive on transparency handling across formats, see our PNG to JPG vs WebP analysis.

Print output: the DPI conversion

Print pipelines do not think in pixels — they think in inches or millimetres at a specific DPI. The math to go from print dimensions to PNG pixels is:

pixels_width  = inches_width  × DPI
pixels_height = inches_height × DPI

Common targets at 300 DPI (offset printing standard):

• Business card (3.5 × 2 in) → 1050 × 600 px
• Postcard (6 × 4 in) → 1800 × 1200 px
• Letter (8.5 × 11 in) → 2550 × 3300 px
• A4 (8.27 × 11.69 in) → 2480 × 3508 px
• Poster (24 × 36 in) → 7200 × 10800 px (exceeds the 8192 tool limit — split into quarters)

Common pitfalls (and how to avoid them)

• External fonts. If your SVG references a Google Font via @import, the rasterizer cannot load it. Convert all text to paths before rasterizing, or embed the font with base64.
• External images. <image xlink:href="./photo.jpg"> inside an SVG will not load cross-origin. Inline via base64 or host same-origin.
• Script tags. Rasterizers disable <script> inside SVG for security. Any JS-driven animation is gone in the PNG.
• Filters. Complex SVG filters (feTurbulence, feGaussianBlur) render differently across rasterizers. Test the output visually, do not assume byte-level consistency.
• Huge viewBox. An SVG with viewBox="0 0 10000 10000" scaled 4× produces a 40000×40000 PNG — crash territory. Check intrinsic size before picking scale.

Size benchmarks: SVG vs PNG at scale

Quick illustration of why SVG wins on the web. We took a 2.1 KB logo SVG and rasterized at five target sizes:

The SVG stays 2.1 KB regardless of display size. The PNG grows quadratically because every additional pixel needs encoding. This is why you ship SVG to browsers and rasterize only when the target rejects SVG.

Free browser-based SVG tools

SammaPix ships three tools covering the full SVG workflow, all running locally in your browser:

Browse the full toolbox on the SammaPix homepage — 35 free tools, all browser-based.

FAQ

When do I actually need to convert SVG to PNG?

When the destination does not accept SVG: iOS and Android app icons (fixed sizes required), favicon fallback for legacy browsers, email templates (most clients strip SVG), social media uploads, print pipelines, and embedding in Word or PDF. For web use, keep the SVG — it scales perfectly at any resolution.

What size PNG should I export from my SVG?

Depends on the target. Favicons: 16, 32, 48 minimum plus 64, 128, 256 for HiDPI. App icons: 1024×1024 for both iOS and Play Store. Open Graph: 1200×630. Retina web: 2× the display size. Print at 300 DPI: multiply inches by 300. Do not upscale beyond what you need — PNG file size grows quadratically.

How does the SVG viewBox affect the PNG output?

The viewBox defines the SVG coordinate system. If your SVG has width/height attributes, that is the intrinsic size. A 4× scale produces 4× the pixels. If width and height are missing, rasterizers fall back to the viewBox dimensions. For predictable output, always set both on the root SVG element.

Will transparency be preserved when I convert SVG to PNG?

Yes, by default. PNG supports 8-bit alpha — same as SVG. Any transparent region stays transparent. For apps that need a solid background (iOS App Store), tools including SammaPix offer a background color option.

Why is my PNG file much larger than the SVG source?

Because SVG encodes shapes as math and PNG stores every pixel. A 2 KB SVG can render at any resolution. A 2048×2048 PNG can be 200-500 KB. This is normal and expected — the reason SVG wins on the web.

Can I batch convert SVG to PNG in the browser?

Yes. SammaPix SVG to PNG runs 100% in your browser using the Canvas API. Drop up to 20 SVGs on the free plan (200 on Pro) and pick the scale preset or custom width up to 8192 pixels. No server, no upload.