SVG to WebP converter

How the SVG to WebP conversion works

Drop an SVG — or paste inline <svg> markup — pick a scale, a background and a quality, and download the WebP. The pipeline is the same renderer the PNG converter uses: the markup is serialised, loaded as an image, and drawn onto a canvas at the chosen multiple of the file's intrinsic size. That size comes from the viewBox, or from the width and height attributes, and a file that declares neither is measured — the drawn content's real bounding box becomes the frame, so nothing is cropped to an arbitrary default. The one difference from the PNG path is the last step: the canvas hands its pixels to the browser's own WebP encoder at the quality you set. Everything happens in your browser; the file is never uploaded.

Because the encoder belongs to the browser, so do its limits. Not every browser can encode WebP from a canvas — Safari notably lagged here — and the fallback behaviour in that case is treacherous: the canvas silently produces a PNG instead. The tool checks the actual type of the encoded blob and refuses to save a .webp that is secretly a PNG; you get a message pointing you at the PNG converter rather than a mislabelled file.

What the quality slider actually does

WebP from a canvas is lossy — that is where the size win over PNG comes from. The slider runs from 40 to 100 and maps directly onto the encoder's quality parameter. At 90, the default, photographic and soft-shaded artwork is visually indistinguishable from the PNG at a fraction of the bytes. Below about 70 the artefacts characteristic of block-based codecs start appearing: faint ringing around hard edges, smearing on 1-pixel strokes, mottling in flat colour fields. Vector art is mostly hard edges and flat fields, so it shows these earlier than a photograph would.

The practical method is to start at 90 and only move down while the preview of the downloaded file still looks right at 100% zoom. If you find yourself at 100 and the edges still bother you, the format is telling you something: that drawing wants lossless, which on this site means PNG — or, where the destination allows it, the SVG itself, which is smaller than either after a pass through the optimiser.

Scale and background

The 1×, 2× and 4× presets multiply the intrinsic size, and the Output line shows the resulting pixel dimensions before you export. Lossy compression punishes upscaling twice — first the softness, then artefacts encoded on top of it — so export at the size the image will actually be displayed, or 2× of it for high-DPI screens; the vector re-renders sharp at any of them. Transparency is the default background and it survives lossy WebP, which is the format's quiet advantage over JPEG: you get JPEG-like sizes with an alpha channel. Choose White or Black instead when the destination will flatten the image anyway — encoding a known background yourself beats letting an email client or CMS guess. The preview switches to the same background, checkerboard for transparent, so what you see is what gets encoded.

Where WebP fits between PNG and JPEG

WebP is a container with two codecs inside: a lossy one derived from VP8 video intra- frames, and a lossless one with its own design. Canvas encoding uses the lossy codec, with an optional alpha plane compressed separately — which is why transparency costs bytes but works. Against JPEG, lossy WebP is typically 25–35% smaller at equivalent quality and carries alpha; against PNG it can be several times smaller on anything with gradients, shadows or photographic texture. Decoding support stopped being a question years ago — every current browser reads WebP, and has since Safari 14 — it is only encoding in the browser that remains uneven, which affects the person making the file, not the people viewing it. A WebP you export here displays everywhere.

When to use it

When the deliverable is a raster for the web and bytes matter: hero images, blog illustrations, Open Graph previews, marketplace photos of vector artwork — anywhere a PNG of the same drawing would be several times the size and nobody will zoom to 400%. For crisp UI icons the answer is usually the SVG itself, inlined or via the data URI tool; WebP earns its keep on larger, softer imagery. If a stubborn old browser is in your audience, export both formats and let a <picture> element choose — the PNG converter renders the identical frame, so the two files line up pixel for pixel.

Common problems

• Thin lines grow artifacts. Lossy compression smears 1-px strokes and hard edges. Raise the quality toward 100, export at 2×, or accept that line art is PNG's territory and convert there instead.
• The export came out as PNG, or refused entirely. That is the missing-encoder case — the tool checks the encoded type and says so rather than downloading a .webp that isn't one. Use a Chromium browser or Firefox to encode, or ship PNG.
• Text renders wrong or an image is missing. Fonts and images referenced by URL are not fetched during rasterisation. Convert text to outlines with Text to Path and inline images as data URIs.
• Colours shift slightly. Canvas encoding drops colour profiles; sRGB is assumed. For colour-managed work, keep the SVG as the source of truth.
• The file is barely smaller than the PNG. Small, flat-colour graphics compress superbly as PNG already; WebP's advantage grows with pixel count and gradient content. For a 24 px icon the honest answer is often the SVG itself.