When you actually need PNG instead of SVG
SVG is the best format for most web content. A vector icon at 2 kilobytes renders pixel-perfect at any zoom level, theme-able with CSS, manipulable with JavaScript, and indexable by search engines if you add title and 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. First: app icons. iOS and Google Play require fixed-size PNGs — 1024 by 1024 masters with many derivative sizes. Submit SVG and get rejected.
Second: 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.
Third: email templates. Gmail, Outlook, Apple Mail strip SVG from HTML. The only reliable inline image format in email is PNG or JPG.
Fourth: social uploads. Instagram, WhatsApp, Facebook, and most ad platforms reject SVG uploads. They want raster.
Fifth: print and embedded documents. Word, PowerPoint, many PDF pipelines, and print-on-demand services need raster. SVG may render unpredictably in Word specifically.
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.
One: the width and height attributes on the root SVG. Two: if only one is present, derive the other from the viewBox ratio. Three: if both are missing, fall back to the viewBox extent. Four: if nothing is declared, rasterizers pick a default — browsers use 300 by 150, SammaPix uses 512 by 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.
Scaling strategy: 1x, 2x, 3x, custom
The output size is a function of intrinsic SVG size times scale factor. For a 100 by 100 SVG: 1x produces 100 by 100 PNG. 2x produces 200 by 200 PNG — standard for Retina and HiDPI. 3x produces 300 by 300 PNG — iPhone Plus and Pro models. 4x produces 400 by 400 PNG — Android XXXHDPI and 4K monitors. Custom allows any width up to 8192 pixels with height scaling to preserve aspect ratio.
SammaPix SVG to PNG parses the intrinsic size from width, height, or 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. First: favicon.svg — the original, served to modern browsers. Second: favicon.ico — multi-size container with 16, 32, 48 (and optionally 64, 128, 256) for legacy clients. Third: apple-touch-icon.png — 180 by 180 for iOS home screen shortcuts.
The HTML is three link tags in the document head. Build the favicon.ico from your SVG using the SammaPix Favicon Generator — upload the SVG, pick sizes, 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 by 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 master automatically, but some CI pipelines still expect the full matrix.
iOS App Store: 1024 by 1024, no alpha, square. Google Play: 1024 by 1024, 32-bit PNG with alpha allowed. iOS home screen: 180 by 180 apple-touch-icon. Android adaptive: 512 by 512 foreground layer with safe-zone padding. PWA manifest: 192 and 512 declared in manifest.json.
If you export a single 1024 PNG from SVG you can downscale inside Xcode or Android Studio. If you need all sizes pre-baked, SammaPix SVG to PNG custom width field accepts any value from 16 to 8192.
Open Graph and social previews
Social platforms require a raster image with a specific aspect ratio. 1200 by 630 for Facebook Open Graph standard. 1200 by 628 for Twitter summary_large_image. 1200 by 627 for LinkedIn recommendation.
You cannot generate this directly from a square SVG — the aspect ratio mismatch means you either design a dedicated 1200 by 630 SVG or composite your logo inside a larger background. Do the layout in SVG first, then rasterize to PNG at custom width 1200.
Transparency: keep it or flatten it
PNG supports 8-bit alpha, same as SVG. By default the conversion preserves any transparent region. Two reasons to flatten to a solid background.
First: iOS App Store. Submitted app icons must not have alpha channel. A 1024 PNG with transparency will be rejected.
Second: 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.
Print output: the DPI conversion
Print pipelines do not think in pixels — they think in inches or millimetres at a specific DPI. The math is pixels width equals inches width times DPI.
Common targets at 300 DPI offset printing standard. Business card 3.5 by 2 inches equals 1050 by 600 pixels. Postcard 6 by 4 inches equals 1800 by 1200 pixels. Letter 8.5 by 11 inches equals 2550 by 3300 pixels. A4 equals 2480 by 3508 pixels. Poster 24 by 36 inches equals 7200 by 10800 — exceeds the 8192 tool limit, split into quarters.
Common pitfalls
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 to an external file 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 render differently across rasterizers. Test the output visually.
Huge viewBox — an SVG with viewBox 0 0 10000 10000 scaled 4x produces a 40000 by 40000 PNG. Crash territory. Check intrinsic size before picking scale.
Size benchmarks: SVG vs PNG at scale
We took a 2.1 kilobyte logo SVG and rasterized at five target sizes. 256 by 256: PNG 14 kilobytes, 6.7 times the SVG. 512 by 512: PNG 38 kilobytes, 18 times. 1024 by 1024: PNG 112 kilobytes, 53 times. 2048 by 2048: PNG 320 kilobytes, 152 times. 4096 by 4096: PNG 920 kilobytes, 438 times.
The SVG stays 2.1 kilobytes 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. SVG to PNG for any size conversion. Favicon Generator for multi-size favicon ICO. Compress Images for post-conversion reduction.
FAQ
When do I actually need to convert SVG to PNG? When the destination does not accept SVG: iOS and Android app icons, favicon fallback for legacy browsers, email templates, social media uploads, print pipelines, Word and PDF embedding.
What size PNG should I export from my SVG? Depends on the target. Favicons 16, 32, 48 minimum plus 64, 128, 256. App icons 1024 by 1024. Open Graph 1200 by 630. Retina web 2x the display size.
How does the SVG viewBox affect the PNG output? The viewBox defines the SVG coordinate system. If your SVG has width and height attributes, that is the intrinsic size. A 4x scale produces 4x the pixels.
Will transparency be preserved when I convert SVG to PNG? Yes by default. PNG supports 8-bit alpha, same as SVG.
Why is my PNG file much larger than the SVG source? Because SVG encodes shapes as math and PNG stores every pixel. A 2 kilobyte SVG can render at any resolution.
Can I batch convert SVG to PNG in the browser? Yes. SammaPix SVG to PNG runs 100 percent in your browser using the Canvas API. Drop up to 20 SVGs on the free plan, 200 on Pro.
Originally published at sammapix.com
Try it free: SammaPix — 35 browser-based image tools. Compress, resize, convert, remove background, and more. Everything runs in your browser, nothing uploaded.
Top comments (0)