Convert SVG to WebP - Much Smaller, Still Transparent
WebP is the format to reach for when an SVG has to become pixels and the result is going on the web. It keeps the full alpha channel that PNG offers, and it does so at a fraction of the weight - on our three test files the WebP came out between 81% and 97% smaller than the PNG of exactly the same dimensions. Those figures are measured through this tool rather than quoted from a specification, and the full table is further down this page, along with an explanation of why the largest saving comes from the file you would least expect. Conversion happens entirely on your own device, so nothing is uploaded, nothing is queued behind anyone else's job, and the file never leaves your machine. Pick a scale or an exact pixel width, decide whether to keep transparency, and the drawing is re-rendered from the vector at that size.
How to use this tool
Drop in your SVG
Drag an SVG onto the box above or click to browse. Up to 5 MB per file, several files at once. Each one is validated by its contents rather than by its extension before anything is rendered.
Set the output size
Choose a scale of 1×, 2×, 4× or a figure you type, or switch to Exact size for a specific pixel width with the aspect ratio locked. The artwork is re-rendered from the vector at that size rather than stretched from a smaller render, so detail is genuinely gained.
Keep or replace the background
Transparency is on by default and WebP preserves it exactly, so unpainted areas stay see-through. Untick the box if you would rather flatten onto a solid colour, and a colour picker appears next to it.
Set the quality
The slider defaults to 85, which is where WebP's size advantage is largest without visible damage. Our gradient test file measured 3,998 bytes at quality 90, 1,872 at 50 and 1,394 at 20, so there is very little left to gain by going low.
Convert and download
Click Convert to WebP. Each file shows its own progress. Download them one by one, or take the whole batch as a single ZIP archive.
Frequently Asked Questions
How much smaller is WebP than PNG, really?
We measured three files at 512 pixels wide with default settings. A stroked icon went from 20.8 KB as PNG to 3.8 KB as WebP, an 81% saving. A dense pixel-art mark went from 44.6 KB to 7.0 KB, 84%. A gradient illustration went from 152.3 KB to 4.2 KB, a 97% saving.
Why is the gradient file's saving so much larger?
Because a smooth gradient is the worst case PNG has. PNG compresses losslessly by finding repeated pixel patterns, and a gradient repeats almost nothing, so it stores nearly every pixel individually. WebP's lossy mode describes the same smooth ramp with a handful of coefficients, which is why 152 KB collapses to 4 KB.
Does WebP keep the transparency?
Yes, fully. WebP carries an 8-bit alpha channel, so transparent and semi-transparent areas survive exactly as they do in PNG - we verify this on every output. Soft shadows and partial opacity come through intact. This is the main reason to choose WebP over JPG, which has no alpha at all.
Is this WebP lossy or lossless?
Lossy, at the quality you set with the slider. That is the deliberate choice: lossless WebP does beat PNG, but usually by 20–30%, where lossy WebP at quality 85 beats it by 80% or more with no difference you can see at normal viewing size. The alpha channel stays lossless either way.
Will WebP work everywhere I need it?
On the web, yes. Every current browser has supported WebP for years, including Safari since 2020. Outside the browser it is patchier: some older desktop software, print workflows and upload forms still reject it. Check the destination before you commit, and fall back to PNG when it will not take WebP.
My SVG is animated - will the WebP animate too?
No. WebP does support animation, but the animation in an SVG lives in SMIL tags or CSS that only run when the file is treated as a document, not as an image. Rendering captures one still frame in its starting state. For a moving version, export from your design tool as a video or an animated GIF.
When should I choose PNG over WebP?
When the file is going somewhere that will not accept WebP, or when you need pixel-exact lossless output - a screenshot destined for documentation, or artwork that will be edited further and re-saved several times. Repeated lossy re-encoding compounds, so keep an editing master as PNG or as the original SVG.
What quality setting should I use?
Leave it at 85 unless you have a reason. WebP holds up far better than JPEG at moderate settings, and pushing to 100 typically doubles the file for a difference you cannot see. Drop towards 60 only for large decorative background images where absolute sharpness does not matter.
Should I just use the SVG on my site instead?
Often, yes. For a logo, an icon or any flat illustration, the SVG itself is usually smaller than any raster of it, stays sharp at every zoom level, and can be restyled with CSS. Convert to WebP when you need a fixed-size raster: Open Graph images, email, or a canvas or game texture.
You might also need
Something not working? Report a bug