When You Still Need PNG From SVG Assets
SVG scales perfectly in browsers but PNG is still required for email, OG images, legacy apps, and some CMS fields. When to export raster from vector — and at what sizes.
The email signature used SVG — Outlook rendered a broken attachment icon. The press kit demanded 300 DPI PNG. The OG crawler ignored inline SVG entirely. Same logo, three channels, three format requirements.
SVG won the website. PNG still wins everywhere SVG can't go.
Where SVG works
- Modern browsers
<img src="logo.svg"> - Inline SVG in HTML with CSS theming
- Icon systems in React/Vue components
- Crisp UI on any DPI
PNG Transparency Web Usage — SVG handles transparency differently (alpha in vector).
Where PNG (or JPG) still required
| Context | Why raster | | --- | --- | | Email signatures | SVG blocked/ stripped | | Outlook/Word embed | Security blocks SVG | | Open Graph / Twitter cards | Raster meta images — OG Image Sizing | | Favicon legacy | ICO/PNG — Favicon Sizes | | Some CMS upload fields | MIME whitelist JPG/PNG only | | PowerPoint / Google Slides | Inconsistent SVG support | | App store screenshots | PNG required | | Print vendor | May want PDF/EPS not SVG |
Export size guide
| Use | Export dimensions | | --- | --- | | 16–32px UI icon | 32–64px PNG | | 180px apple-touch | 180 or 360px | | 1200×630 OG | Exact or 2x | | Print logo | Vector PDF/EPS from source — not tiny PNG upscale |
Resize Image after export if batch sizes needed.
Export workflow
- SVG master in Figma/Inkscape — paths simplified, no unnecessary filters
- Export PNG at target pixel dimensions (not "scale 3x" mystery)
- Compress Image — flat logos compress well
- PNG to JPG only if no transparency needed and size critical
Security note on SVG uploads
User-uploaded SVG = XSS vector on some platforms. Sites block SVG uploads; PNG sanitized raster safer for UGC avatars.
When WebP replaces PNG
When to Use WebP Instead of PNG — site delivery; email still PNG/JPG usually.
Batch logos
Batch Image Convert Naming — brand_logo_email_200w.png, brand_logo_og_1200w.png
Don't rasterize too early in pipeline
Keep SVG source in repo. Generate PNG in build step (sharp, rsvg-convert) for reproducible exports.
Troubleshooting
Why convert SVG to PNG if SVG is scalable? Many platforms don't support SVG — email clients, some CMS image fields, PowerPoint, older social crawlers, and certain native apps require raster formats. PNG provides predictable rendering everywhere.
What PNG size should I export from SVG? Export at 2x the display size for retina — e.g., 32px icon → 64px PNG, 1200px OG image → 2400px source scaled down if needed. For infinite scalability needs, export largest intended use once.
Does PNG from SVG lose quality? Rasterization fixes resolution at export size. Scaling PNG up later causes blur — unlike SVG. Export large enough or keep SVG master for re-export.
Limitations
When not to use this approach
Conclusion
SVG for site UI; PNG exports for email, social, and hostile platforms.
Export at 2x display size from vector master — never upscale tiny PNG. Outlook doesn't care that your logo is mathematically perfect in SVG.
Rasterization DPI math
Display size 128px → export 256px PNG for retina. Display 1200px hero → 2400px PNG max unless print use — file size grows quadratically with dimension.
Inkscape CLI batch
inkscape icon.svg --export-type=png --export-width=512 — scriptable for CI asset pipeline from SVG source repo.
Security scrub SVG
SVG can contain scripts and external entity references — sanitize before rasterizing user-uploaded SVG in server pipeline. Raster PNG from untrusted SVG in sandbox.
Frequently Asked Questions
Common questions answered to help you get the most from this tool.
Vertex Solutions Editorial Team
Guides and articles are produced under this collective byline — not attributed to invented individual experts. We research tool workflows, check steps against live tools where practical, and avoid fabricated personal stories, client anecdotes, or invented test results.
- Content research — Topics come from real tool workflows, common questions, and gaps in existing guides.
- Technical review — Steps, tool behavior, and examples are checked against the live tools on this site before publication when practical.
- Fact checking — Claims about formats, browser behavior, and calculator outputs are verified against documentation and tested sample inputs where practical.
- Updates — Pages may be revised when tools, official guidance, or browser behavior changes. There is no fixed review calendar for every URL.
- Corrections — Report factual errors via Contact.
Full policy: Editorial Standards. Tool checks: How we verify tools.