SVG to WebP Converter
Turn an SVG into a WebP picture: the small, sharp image format that websites and apps use in place of PNG and JPG. The SVG is drawn from its vector shapes at the size you choose, so a 2× or 4× WebP is crisp, not an enlarged copy of a small picture. Choose lossless for exact pixels or lossy with a quality slider for the smallest file, keep transparent areas transparent or fill them with a colour, and convert one SVG or a whole set into a ZIP. The tool reads each SVG’s size the way a browser does, from its width and height in px, mm, cm, in or pt, or from its viewBox, and shows which one it used. Every WebP is read back from its own bytes, so the page tells you its real size, whether it is lossless or lossy and whether it has transparency. It also warns you about things an SVG picture cannot show, such as fonts or images loaded from other files. Nothing is uploaded and there is no sign-up.
100% private — everything runs in your browser. Everything runs in your browser; your files are never uploaded.
Or paste SVG code
Your SVGs (click one to see it)
Your SVG
WebP
Size
WebP
Animated SVG
Runs in your browser with our own code: your SVGs are never uploaded and nothing is saved. You may use what you make here, including commercially, with no credit needed. The rights in your own SVGs stay as they were.
How to convert an SVG to WebP
- Drop an SVG on the box, or several; paste SVG code, or click Try a sample.
- Pick the output size: the SVG’s own size, 2× to 4×, or an exact width or height in pixels.
- Choose lossless, or set the quality for a lossy WebP; keep transparency or pick a background colour.
- Check the result and the read-back line under it, then download the WebP or a ZIP of all of them.
What you can use it for
- Make WebP icons and logos for a website from SVG files
- Export a 2× WebP of an illustration for high-density screens
- Turn a folder of SVG icons into WebP in one go
- Get a lossless WebP of a flat graphic with exact colours
- Put an SVG logo in a place that only accepts pictures
- Make a small WebP preview of an SVG drawing
Lossless or lossy WebP
| Setting | Inside the file | Best for | File size |
|---|---|---|---|
| Lossless | VP8L data: every pixel exact | Logos, icons, flat colours, text | Larger |
| Lossy, quality 90 | VP8 data, plus an alpha chunk for transparency | Most illustrations | Small |
| Lossy, quality 60 to 80 | VP8 data | Big drawings with gradients, previews | Smallest |
A WebP file is a small container: lossy picture data sits in a chunk called VP8, lossless data in VP8L, and transparency for a lossy picture in an ALPH chunk. The read-back line under the result reads those chunks from your file.
How the size is worked out
| Your SVG has | Size used | Example |
|---|---|---|
| width and height | Those, converted to pixels | 50mm × 25mm becomes 189 × 94 px |
| width and a viewBox | The width; the height follows the viewBox shape | width 300, viewBox 150 × 100 becomes 300 × 200 px |
| Only a viewBox | The viewBox width and height | viewBox 0 0 200 100 becomes 200 × 100 px |
| Sizes in % | The viewBox (a % has no fixed size) | 100% with viewBox 120 × 80 becomes 120 × 80 px |
| Nothing | 300 × 150 px, the browser default | The page tells you |
1 inch is 96 px, so 1 mm is about 3.78 px and 1 pt is 1⅓ px. The size you pick then multiplies this, or sets the width or height directly.
What an SVG picture can and cannot show
| In your SVG | In the WebP | What to do |
|---|---|---|
| Shapes, paths, gradients, patterns, clip paths, masks, filters | Drawn | Nothing |
| Text in an installed font | Drawn | Nothing |
| Text in a web font from another file | Fallback font | Outline the text or embed the font |
| Pictures linked from other files | Left out | Embed them in the SVG |
| Scripts | Not run | Export the finished drawing |
| Animation | One moment of it | Pick the time in seconds |
Browsers draw an SVG used as a picture in a locked-down mode: scripts never run and nothing is fetched from other files, while declared animations still play. That is why the page checks your SVG and lists what will be left out.
Tips
- Use 2× for pictures shown on phones and high-density screens.
- Use lossless for logos and icons with flat colours; lossy for big illustrations.
- If the SVG has text, outline it in your editor first so it looks the same everywhere.
- Tidy the SVG before converting if it came from a design program with lots of hidden layers.
Next steps: shrink the SVG itself with the SVG Optimizer or edit it in the SVG Editor. Need another format? Use SVG to PNG or SVG to JPG. Already have a PNG? PNG to WebP converts it directly.
Sources
Sources: Google for Developers: WebP Container Specification; W3C SVG Integration (processing modes); W3C Scalable Vector Graphics (SVG) 2.
More free SVG tools
Working with SVG?
Convert, edit, tidy and check SVG files with free tools that run privately in your browser: nothing uploaded.
See all free tools →Frequently asked questions
Is this SVG to WebP converter free?
Yes. There is no sign-up, no watermark and no limit on how many SVGs you convert. Everything runs in your browser, so your SVG never leaves your device.
Does the WebP keep the transparent background?
Yes. Transparent areas of the SVG stay transparent in the WebP, both lossless and lossy. Untick Keep transparent areas transparent to fill them with a background colour instead.
Can the WebP be lossless?
Yes. Tick Lossless and the WebP stores the exact pixels of the drawing. The line under the result reads the file back and says lossless or lossy, so you can check. Lossy with the quality slider gives a smaller file with small changes you rarely see in flat graphics.
What size will the WebP be?
By default the same size as the SVG: its width and height (px, mm, cm, in and pt are converted to pixels) or, if it has none, its viewBox. Choose 2×, 3× or 4×, or type an exact width or height; the other side keeps the shape. The SVG is redrawn at that size, so it stays sharp.
Why does my text look different?
An SVG used as a picture cannot load fonts from other files, so text set in a web font is drawn in a fallback font, and a font only looks right if it is installed on your device. The page warns you when this happens. Turn text into outlines (paths) in your vector editor first, or embed the font in the SVG.
What happens to an animated SVG?
A WebP made here is one still picture. The page tells you the SVG is animated and lets you pick the moment, in seconds, that the picture is taken at.
Can I convert several SVGs at once?
Yes. Add up to 20 SVGs; each one becomes its own WebP with the same settings, and Download all gives you a ZIP.
What if my browser cannot make WebP files?
Some browsers cannot save WebP pictures and quietly hand back a PNG instead. The tool checks the bytes of every file, and if that happens it tells you and saves nothing, rather than giving you a PNG with a .webp name.
Is my SVG uploaded?
No. Reading the SVG, drawing it and writing the WebP and the ZIP all happen in your browser.