Images
SVG vs PNG for icons
SVG wins for icons, logos and line art without qualification: it is smaller, scales to any size without variants, can be styled with CSS, and stays sharp on every display. PNG only wins where the artwork is genuinely photographic or the environment cannot render SVG.
Side by side
| Compared on | SVG | PNG |
|---|---|---|
| Scaling | Infinite, no quality loss | Needs a file per size |
| File size for line art | Tiny | Larger, and multiplied by variants |
| Styling with CSS | Yes — colour, size, animation | No |
| Retina displays | Sharp automatically | Needs 2x and 3x files |
| Photographic content | Unsuitable | Suitable |
| Email clients | Poor support | Reliable |
When SVG is the right choice
- Icons, logos, diagrams and any line art
- Anything that must match text colour or respond to a theme
- Anything appearing at more than one size
When PNG for icons is the right choice
- Photographic or heavily textured artwork
- Email templates, where SVG support is unreliable
- Favicons for older browsers, as a fallback alongside SVG
The saving people underestimate
An icon set as PNG needs a file per icon per size per pixel density. The same set as SVG is one file per icon, styled with CSS. On a site with twenty icons that is the difference between a hundred assets and twenty.
The safety note
SVG can contain script. Sanitise any SVG uploaded by a user before serving it, and prefer inline SVG from your own build over user-supplied files.
Inline or file?
Inline SVG can be styled with CSS and needs no extra request, which suits icons that change colour on hover or with a theme. A referenced file caches across pages, which suits a logo appearing everywhere. Both are correct in their place.
The verdict
SVG for anything that is not a photograph. It is one of the few decisions in web performance with essentially no trade-off, and it is still routinely got wrong.
If you want the full treatment
Image SEO: findable images that do not wreck your page speed covers this in about 3 minutes — free, ungated, written from client work.
Who wrote this comparison
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. Where a comparison involves something I sell, the page says so — and every comparison here has to name at least two situations where each side wins, because a comparison one option always wins is an advert with a table in it.