PNG vs SVG
SVG is the right choice for logos, icons and anything drawn from shapes: it is infinitely scalable, usually tiny, and can be restyled with CSS. PNG is the right choice for photographs and any image made of pixels, which SVG fundamentally cannot represent efficiently.
| PNG | SVG | |
|---|---|---|
| Type | Raster — a grid of pixels | Vector — shapes and maths |
| Scaling | Blurs when enlarged | Perfect at any size |
| Photographs | Yes | No — unsuitable |
| Logos and icons | Fixed resolution | Ideal |
| File size for flat art | Larger | Usually tiny |
| Styling with CSS | No | Yes — colours, hover, animation |
| Editing later | Pixels only | Shapes remain editable |
Use PNG for
- ·Photographs
- ·Screenshots
- ·Anything with real-world texture
Use SVG for
- ·Logos
- ·Icons
- ·Illustrations and diagrams
- ·Anything that must scale