The fundamental difference
A PNG is a raster image — a fixed grid of colored pixels. An SVG is a vector image — a set of mathematical instructions (lines, curves, shapes). This single difference drives every trade-off between them.
When SVG wins
- Logos and icons: they scale to any size with zero quality loss and stay razor-sharp on any screen.
- Small file size for simple graphics — a flat icon can be a few hundred bytes.
- Styleable and animatable with CSS/JS since it's just markup.
When PNG wins
- Photographs and complex images: vectors can't efficiently describe millions of subtly different pixels.
- Screenshots and detailed textures.
- Guaranteed identical rendering everywhere — no dependence on how a renderer interprets paths.
A simple rule
If you could draw it with shapes and it needs to scale — use SVG. If it's a photo or richly detailed — use PNG (or JPEG/WebP for photos to save more space). For transparency with photos, PNG; for transparency with flat graphics, SVG.
Frequently Asked Questions
Is SVG always smaller than PNG?
For simple graphics like icons, usually yes. For complex or photographic content, SVG becomes huge or impossible — PNG wins there.
Can SVG display photos?
Technically you can embed a raster image inside an SVG, but a true photo can't be efficiently drawn as vectors. Use PNG/JPEG/WebP for photos.
Which is better for a website logo?
SVG — it stays perfectly crisp at every size and on high-density displays, and is typically a tiny file.