How to use it
- Choose a size: 2× for most screens.
- Drop in your SVGs.
- Download the WebP files.
When a raster version is needed
SVG is ideal on your own site, but many platforms refuse it for security reasons, since SVG files can carry scripts. Content management systems, marketplaces, ad networks and social tools often want a raster image instead. WebP is a good choice where it is accepted: smaller than PNG, with the same transparency.
Quality for vector art
Illustrations have crisp edges and flat colours, which show lossy compression more than photos. The default quality of 90 keeps edges clean. For the absolute sharpest result, SVG to PNG is lossless, at the cost of a bigger file.
Picking a size
The SVG is redrawn at the chosen scale, so a 4× render is genuinely sharper, not just enlarged. For an image shown at 300 pixels wide on a web page, 2× (600 pixels) looks crisp on high-density screens.
SVG and WebP compared
| SVG | WebP | |
|---|---|---|
| First released | 2001 | 2010 |
| Compression | Vector, stored as text | Lossy or lossless |
| Transparency | Yes | Yes |
| Animation or pages | Animation via CSS | Animation |
| Best for | Logos, icons and diagrams | Images on websites |
| Support | Browsers and design tools | All current browsers; some apps and forms still refuse it |
Questions people ask
Why convert SVG to WebP instead of PNG?
WebP files are usually smaller with the same transparency, if the destination accepts WebP.
Will fonts render correctly?
Fonts the SVG links to externally cannot load. Convert text to outlines before exporting from your design tool.
Is the background transparent?
Yes, unless the SVG draws its own background.