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 width carefully.
Choosing the right width for SVG to PNG
Think about the largest place the image will appear, then go a little bigger.
- App icons and favicons: 512 or 1024 px, then make an icon with PNG to ICO.
- Email signature logo: around 400 to 600 px wide is plenty.
- Slides and documents: 1500 to 2000 px keeps logos sharp on big screens.
- Print or large banners: go up to the maximum of 4096 px.
Too large a PNG only wastes space. If needed, Compress PNG reduces the file size 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. Trim the canvas in your design app, or crop the PNG afterwards.
Converting a full icon set? Use the same width for every file so the icons line up evenly in your app, slides or website. A consistent size also makes later edits much easier.
Need a white background rather than transparency? Use SVG to JPG, which fills empty areas with white.