Why convert SVG to PNG?
SVG is the right format almost everywhere on the modern web. But there are still places that need raster PNG:
- Email clients. Most email clients strip or fail to render SVG. PNG works in Gmail, Outlook, Apple Mail.
- Print / PDF embedding. Print shops and PDF tools handle PNG more predictably than SVG, especially with custom fonts.
- App icons. iOS and Android both want PNG at specific pixel sizes.
- Social media uploads. Twitter, Instagram, LinkedIn — none accept SVG.
- Office docs. Pasting SVG into older Word / PowerPoint is unreliable.
- Favicons (legacy). Modern browsers support SVG favicons, but older ones still need PNG fallbacks.
SVG vs PNG
| SVG | PNG | |
|---|---|---|
| Type | Vector (math) | Raster (pixels) |
| Scaling | Infinite, no blur | Fixed; blurry above 100% |
| File size | Tiny for shapes; huge for complex art | Predictable; grows with pixels |
| Transparency | Yes | Yes |
| Editable in code | Yes — XML | No |
| Email / print / app icons | Limited | Universal |
Picking the right export size
- 1× — when the PNG will replace the SVG at the exact intended display size (favicons, app icons with known dimensions).
- 2× — the default for UI assets. Retina displays render every CSS pixel as 4 physical pixels; 2× gives sharp results everywhere.
- 4× — for design files that will be downscaled later, or for marketing graphics that need to look perfect on 4K displays.
Transparent vs white background
Pick Transparent when the icon will sit on a colored UI background. Pick White when the PNG will be printed, embedded in a document, or used somewhere a dark background might bleed through (some email clients default to dark mode).
SVG to PNG for iOS and Android app icons
iOS requires PNG app icons at specific sizes: 1024×1024 (App Store), 180×180 (home screen on iPhone), 167×167 (iPad Pro), 152×152 (iPad), and 120×120 (iPhone older). The fastest approach is to export a single 1024×1024 PNG from your SVG using the 4× setting (if your SVG is 256×256), then let Xcode auto-generate the smaller sizes. For Android, export at 512×512 for the Play Store asset and use Android Studio's Image Asset Studio to generate the density-specific launcher icon variants automatically.
SVG to PNG in design tools
In Figma: select the frame or component → Export panel on the right → add a PNG export at the desired scale → Export. In Adobe Illustrator: File → Export → Export As → PNG → check Use Artboards → set resolution. In Sketch: select the artboard or symbol → make it exportable → set scale and format to PNG → Export. All three handle fonts and embedded images correctly, which avoids the external-font limitation of this browser-based tool.
Batch exporting SVGs to PNG
Drop up to 30 SVG files at once and choose a uniform scale for all. This is useful for icon libraries — drop an entire folder of SVG icons and get a ZIP of PNGs all at 2× (or 4×) in seconds. Each output file keeps the source filename with .svg replaced by .png. For icon sets where each SVG has a different target size, export them individually at 1× with the correct dimensions pre-set in each SVG.
SVG to PNG for social media
Twitter, Instagram, LinkedIn, and Facebook all reject SVG uploads — they require raster images. For a profile picture or post graphic created as an SVG in Figma or Illustrator, export at the platform's recommended size: 400×400 for Twitter/X profile, 1080×1080 for Instagram square post, 1200×627 for Facebook and LinkedIn link previews. Use 2× or 4× scale to ensure the PNG looks sharp on retina screens and then resize down if the platform has a file size cap.
Privacy
The SVG is parsed by your browser's DOM, rasterized by a sandboxed Canvas, and encoded to PNG locally. There is no upload, no server, no log.