SVG vs PNG: what is the difference?
| SVG | PNG | |
|---|---|---|
| Type | Vector (shapes and paths) | Raster (pixels) |
| Scaling | Sharp at any size | Fixed size, blurs when enlarged |
| Transparency | Yes | Yes |
| Support | Browsers and design tools | Almost everything |
An SVG is really a small text file describing shapes. A PNG is a grid of colored pixels. Once you convert, the size is fixed, so pick the scale carefully.
Choosing the right scale for SVG to PNG
The PNG size is the SVG's own size times the scale you pick, with the longest side capped at 4096 pixels. Check the width and height in your design app to know the starting point.
- Favicons and app icons: aim for a PNG of at least 256 px, then turn it into an icon file with PNG to ICO.
- Email signature logo: 1x or 2x of a logo around 200 to 300 px wide is plenty.
- Slides and documents: 2x keeps logos sharp on big screens.
- Print or large banners: use 4x. If the SVG is very small, increase its width and height in your design app first.
A bigger PNG than you need only wastes space. Compress PNG can trim it afterwards.
Tips for a perfect render
Fonts are the most common surprise. If your SVG uses a web font that is linked rather than embedded, the text may appear in a fallback font. In your design app, convert text to outlines or paths before exporting the SVG.
Linked images inside the SVG, pointing to other files or websites, may not load either. Embed them in the SVG instead.
Check the viewBox too. If your SVG has extra empty space around the artwork, the PNG will include it as transparent margin. Trim the canvas in your design app, or crop the PNG afterwards.
Converting a full icon set? Export every icon on the same artboard size and convert them at the same scale, so they line up evenly in your app, slides or website.
Need a white background rather than transparency? Use SVG to JPG, which fills empty areas with white.