Blog / Guides
SVG vs PNG vs WebP for illustrations: which should you use?
Most illustration problems on the web (blurry edges, huge files, wrong colours in dark mode) come from the wrong file format. Here is how to choose.
By Abdullah NomanOctober 23, 20263 min read
Short answer: use SVG for illustrations on websites and in apps, because it stays sharp at every size, is usually small for line art, and can change colour with CSS for dark mode and branding. Use PNG where SVG is not supported, such as most email clients and some slide tools. Use WebP for large previews and thumbnails where you need a small raster file.
The quick decision table
| SVG | PNG | WebP | |
|---|---|---|---|
| Type | Vector (shapes and lines) | Raster (pixels), lossless | Raster, lossy or lossless |
| Sharp at any size | Yes | No, export large | No, export large |
| Recolour with CSS | Yes | No | No |
| Animation and interaction | Yes, with CSS or JavaScript | No | Animated WebP only, no interaction |
| Email clients | Poor support | Works everywhere | Mixed support |
| Best for | Websites, apps, Figma | Email, slides, documents | Large previews, galleries |
Why SVG is the default for line illustrations
Line art is mostly lines and flat shapes, which SVG describes in very little data. A detailed hairline illustration is often smaller as SVG than as a sharp PNG, and it stays crisp on high-density screens. Because colours can be CSS variables, one file can switch between light and dark themes.
When SVG is the wrong choice
- Email: most clients strip or block SVG. Use PNG.
- Very complex artwork: thousands of paths can be larger and slower than a WebP.
- User-uploaded files: SVG can contain scripts, so sanitise or convert uploads.
Sizes to export
For PNG and WebP, export at least twice the displayed size for sharp results on high-density screens: a 400-pixel hero image needs an 800-pixel file. Liniqo offers PNG at 1000, 2000 and 4000 pixels.
Accessibility
Give meaningful illustrations alt text ("empty inbox"), and mark decorative ones as decorative (alt="" or aria-hidden="true" on inline SVG).
Questions
Is SVG better than PNG for websites?
For illustrations, icons and line art, yes: SVG stays sharp at any size, is usually small and can be recoloured with CSS. Use PNG where SVG is not supported, such as email.
Is WebP better than PNG?
For photos and large previews, WebP is usually much smaller at similar quality. For lossless line art, the difference is smaller and SVG is often better still.
Can I use SVG in email?
Not reliably. Most email clients do not display SVG, so use PNG for illustrations in email.
