Reference guide · images · Published 2026-08-15 · 3 min read
SVG vs PNG: which format when
Compare SVG and PNG for web graphics: vector vs raster, scaling behaviour, favicons and logos, when to fall back to PNG, with a decision table.
- ·Vector and raster
- ·Decision table
- ·When to stay PNG
Vector and raster: the core difference
PNG is a raster format: it stores a grid of pixels, one value per position, with lossless data compression. SVG is a vector format: it stores instructions for drawing shapes, lines, gradients, and text as XML. A vector is resolution independent, a raster is not.
The visible consequence is scaling. An SVG file can grow to any size without losing sharpness because the browser recomputes geometry. A PNG that is scaled beyond its natural resolution shows blurry edges and soft gradients. For a logo shown at 16px in a favicon and 600px on a sign-off page, the vector wins at both ends.
Decision table
| Use case | Format | Reason |
|---|---|---|
| Logo, icon, simple diagram | SVG | tiny, sharp at any size, editable in code |
| Photograph or illustration with many gradients | PNG (or JPEG/WebP) | raster keeps photo detail as pixel data |
| Screenshot with text and crisp edges | PNG | sharpness preservation at export resolution |
| Colour-managed image used in print | PNG | pixel-level fidelity across software |
| Complex illustration with hundreds of anchors | PNG | very detailed raster may still beat a bloated SVG |
| Favicon | SVG/PNG combo | see the favicon sizes table |
When to use SVG
An SVG logo or icon is often 1 to 5 KB where a PNG is 30 to 300 KB, and it stays sharp in responsive HTML because it scales with the layout. Because SVG is code, it also supports styling: you can recolour it with CSS fill and stroke, animate parts, and reference it inline. That makes it the right default for a logo, an icon set, or any graphic your developers intend to restyle.
Keep the SVG simple. A clean icon path with a handful of shapes stays small; a ten-thousand-node traced photograph explodes the file and the render cost.
When to fall back to PNG
PNG remains the right choice when you cannot update the source file, the graphic has photographic content, or the output depends on natural textures (gradients, noise, soft drop shadows) that would cost hundreds of paths to rebuild as vectors. PNG also has the best interoperability for flows that do not include an SVG editor.
For website integration, a single high-quality PNG exported at 2x covers most contexts and keeps the file count down.
Recommended approach
- For logos and icons, request the designer's original vector file and export both an SVG (for code) and a high-resolution PNG (for email or flat exports).
- For photos, stay with JPEG or WebP, covered in image optimisation.
- For favicon and apple-touch-icon, choose both formats: an ICO legacy file and a PNG set, detailed in the favicon guidance.
A working rule: if the asset is a photograph with gradients, raster; if it is a geometric shape that should scale, vector. Serve SVG as an img or inline; the image optimisation guide covers the delivery defaults.