PNG vs SVG
SVG is a set of drawing instructions, so it stays sharp at any size. PNG is a grid of pixels, so it blurs when enlarged. Use SVG for logos and icons, PNG for anything photographic or with effects a drawing cannot describe.
Last updated
Choose PNG when
- Screenshots, photographs, and anything with texture or noise.
- Images with complex shadows, blurs or gradients.
- Places that will not accept SVG, which includes most email clients.
Choose SVG when
- Logos, icons and illustrations that need to work at every size.
- Graphics you want to restyle with CSS or recolour later.
- Print, where the same file scales from a business card to a banner.
What PNG actually is
PNG stores every pixel exactly as it was, using a compression method that throws nothing away. It carries a full alpha channel, so a pixel can be any degree of transparent rather than simply on or off, and it handles up to 16 bits per colour channel.
People save photographs as PNG and wonder why an email bounces. A photo that is 400 KB as a JPG is routinely 4 MB as a PNG, because lossless compression cannot do much with the noise in a real photograph.
What SVG actually is
SVG describes shapes, paths and text as instructions rather than pixels, so it is drawn fresh at whatever size it is displayed. A logo in SVG is equally sharp on a watch and a billboard, and the file is often smaller than a single small PNG of the same thing.
Converting a photograph to SVG does not turn it into vectors. It embeds the same pixels inside an SVG wrapper, which is larger than the original and no sharper.
PNG and SVG side by side
| PNG | SVG | |
|---|---|---|
| Extension | .png | .svg |
| Media type | image/png | image/svg+xml |
| Compression | Lossless | Lossless |
| Transparency | Yes | Yes |
| Animation | No | No |
| Quality setting | Not applicable | Not applicable |
| We can write it | Yes | Yes |
Questions
Can I convert a PNG to a proper SVG?
Not meaningfully. Tracing a photograph produces a huge SVG full of shapes that only approximates it. Converting SVG to PNG is the direction that works.
Why is my SVG bigger than my PNG?
Because it was exported from a drawing tool that left every editing artefact in. A hand-cleaned icon is usually a couple of kilobytes.