WebP to SVG converter

Choose a WebP and get an SVG of vector shapes traced from it, in one colour for cutting or in up to twelve flat colours.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

or drop it here, or paste

An animated WebP is traced from its first frame only.

How to convert a WebP to SVG

  1. Choose your WebP file or drop it on the box.
  2. Pick black and white for a logo, a sketch or a cut file; pick colours for flat artwork.
  3. Watch the preview while you move the threshold or the number of colours.
  4. Download the SVG, named after your WebP.

Why you have a WebP in the first place

WebP is the picture format Google released in 2010 to make web pages lighter, and most large sites now send their pictures in it. That is why “Save image as” so often hands you a .webp when you expected a PNG or a JPG, and why a logo taken from a website is usually a WebP. Programs for cutting machines and lasers mostly do not open it, which is the usual reason to convert.

A WebP file can be one of two quite different things, and the name does not say which. Lossless WebP keeps every pixel exactly, like a PNG. Lossy WebP throws detail away to save space, like a JPG, using a method taken from video compression.

Lossy WebP: soft colour edges

Lossy WebP stores brightness at full detail but colour at half the detail in each direction, so one colour value covers a block of four pixels. Where two strong colours meet, say red lettering on blue, the boundary in the file is a smear a pixel or two wide, with faint ripples beside it. Traced in many colours, that smear becomes slivers of in-between shades along every edge.

Two settings deal with it. In colour mode, use no more colours than the artwork has, so the in-between shades have nowhere to go but into their neighbours. And leave the smoothing on automatic or raise it a step, which evens out the ripples before edges are found. A black and white trace is barely affected, because it follows brightness, and brightness is kept at full detail.

Lossless WebP needs none of this. Its edges are exactly as they were drawn and it traces like a PNG.

Transparency, animation and browsers

  • Transparency: both kinds of WebP can be see-through, with soft edges. The tracer treats see-through areas as white paper, so a logo on a transparent background traces as the logo alone in black and white mode.
  • Animation: a WebP can hold several frames, as a GIF can. The first frame is traced and the others are not read.
  • Size: a WebP can be up to 16,383 pixels on a side. Anything over 2,000 pixels on its longer side is scaled down to that before tracing.
  • Browsers: the file is decoded by your browser. Chrome, Edge and Firefox have read WebP for years, and Safari has since version 14, released in 2020. On an older Safari the page will say it could not read the file.

Questions

How can I tell whether my WebP is lossy or lossless?

Trace it in colours and look closely at an edge in the preview. Clean edges mean lossless, or lossy at high quality. Thin slivers of odd colour along the edges mean lossy. Photographs and website banners are nearly always lossy; logos are a mix.

Is the WebP converted to PNG first?

No. Your browser decodes the WebP straight to pixels in memory and the tracer works on those. No other file is made on the way, and nothing leaves your device.

Will the SVG open in Cricut Design Space or LightBurn?

Yes. It is a plain SVG of vector shapes: one path for each colour, and in colour mode a rectangle for the background colour. Those programs open SVG even though they do not open WebP.

The website gave me a tiny WebP. Can I still trace it?

You can, but a small picture has little edge to follow and the result will be rough. Look for a larger version of the same picture: open it on its own in a new tab, or look for the site’s logo in its press or brand pages.

Related