SVG to PNG: How It Works
SVG describes shapes mathematically, so it stays sharp at any size. PNG stores a fixed grid of pixels. Converting from one to the other is a deliberate downgrade — done for compatibility, and the only real decision is what resolution to lock in.
What you give up
| SVG | PNG | |
|---|---|---|
| Scaling | Infinite, always sharp | Fixed; blurs when enlarged |
| File size for a logo | 2–20 KB | 50–500 KB |
| Editable | Yes, as text or in a vector editor | Only as pixels |
| Styleable with CSS | Yes | No |
| Animatable | Yes | No |
The moment you export to PNG you choose a resolution permanently. Enlarging beyond it produces blur, so the export size has to anticipate every place the image will be used.
Why convert at all
- Email. Most email clients block or fail to render SVG.
- Social media and Open Graph images. Platforms generally require raster formats.
- Older software and some print workflows that cannot place SVG.
- App and OS icons, which require specific pixel dimensions.
- Anywhere SVG is blocked for security — SVG can contain scripts, so many upload handlers reject it outright.
Choosing an export size
Export at two to three times the largest display size. An image shown at 400 pixels should be exported at 800–1200 to stay sharp on high-density screens. Exporting several sizes is usually better than picking one compromise.
| Use | Export at |
|---|---|
| Favicon | 32, 180 and 512 px |
| Email logo | 2× the display width |
| Open Graph image | 1200 × 630 |
| 300 DPI at final physical size |
Fonts are the usual failure
An SVG containing text references a font by name. If the renderer does not have that font, it substitutes another — and the exported PNG shows the wrong typeface, often with broken spacing. The reliable fix is to convert text to outlines in your vector editor before exporting, which turns letters into shapes that need no font at all.
Transparency
PNG supports an alpha channel, so a transparent SVG background is preserved. Confirm this is what you want: a logo exported with transparency looks correct on any background, while one exported with a white background shows a visible box wherever the page is not white.
Keep the SVG
PNG is an output, not a source. Every future size, colour change or edit should come from the SVG. Losing the vector original and being left with only rasterised exports is a genuinely expensive mistake for a brand asset — recreating a logo from a PNG means redrawing it.
Rendering here happens in your browser, so the file is not uploaded.