WebP to SVG, in your browser.

Real editable paths, grouped per colour. Converting uploads nothing.

Drop a PNG, JPG or WebP
or paste from the clipboard
Best from 500 px wide, sharp edges, plain background
Or try:

WebP to SVG, in your browser

WebP is what you get when you save an image from most modern websites. Many converters still ask you to turn it into a PNG first; GetSVG does not, because your browser already knows how to decode WebP. Drop the file, and it is traced like any other picture — on your device, without an upload.

What is specific about WebP input

  • Two kinds of WebP. Lossless WebP behaves exactly like PNG: crisp edges, exact colours, optional transparency. Lossy WebP behaves like a cleaner JPEG: softer edges and some smoothing, but far less block noise.
  • Transparency is kept. Both flavours can carry an alpha channel, and GetSVG treats it the same way as PNG alpha: transparent pixels are background, soft edges are composited before tracing.
  • Animated WebP. Only the first frame is read, which is what the browser hands over when it decodes the file as a still image.
  • Small web sizes. WebP files saved from a website are often small (200-400 px). GetSVG warns under 300 px and upscales small pictures before tracing, but a larger source will always trace better.

Tips for the cleanest result

  1. If the site offers a 2× or "retina" version of the image, save that one.
  2. For a lossy WebP with visible smoothing, use the Sketch preset or raise Remove specks.
  3. Turn on Paths to confirm the shapes follow the edges rather than the compression artefacts.

See also PNG to SVG and JPG to SVG, or go straight to thelogo to vector page if the WebP is a company logo.

How WebP to SVG works in GetSVG

  1. Drop, paste or choose a picture. PNG, JPG or WebP. The file is read by your browser and is not uploaded.
  2. GetSVG picks a preset. It looks at the pixels — how many colours, how soft the edges are, how much plain background — and chooses Clean logo, Hairline, Brush, Sketch, Illustration or Artwork. Every other setting follows from that.
  3. The tracer runs. For each colour a mask is built and Potrace fits smooth Bézier curves to its outline, in a Web Worker so the page stays responsive. Re-tracing after a settings change keeps the previous result on screen until the new one is ready.
  4. Check it is real geometry. Turn on Paths to see outlines and anchor points, or drag the Split handle to compare original and vector.
  5. Download. SVG grouped per colour, PNG at 1×/2×/4×, or copy the SVG code.

What you get

  • Editable paths, not an embedded bitmap. The SVG contains only <path> elements with cubic Bézier curves.
  • One group per colour. Each colour is a <g fill="#…">, so one click selects a whole colour in Illustrator, Figma or Inkscape.
  • A tight view box. Empty space around the artwork is trimmed automatically, with a small safety margin.
  • Transparent background on request. The dominant border colour is detected and removed.
  • Real gradients when you want them. In Full colour mode, Smooth fits a linear gradient across a faded region and writes a genuine <linearGradient>.

Questions

Do I need to convert WebP to PNG first?

No. Every current browser decodes WebP natively, so GetSVG reads the file directly, including transparency and animation's first frame.

Does lossy WebP behave like JPG?

Mostly. Lossy WebP has less blocking than JPEG but still smooths edges; if you see stray specks, raise Remove specks or use the Sketch preset. Lossless WebP behaves exactly like PNG.

Which browsers support WebP input?

Chrome, Edge, Firefox, Safari 14+ and their mobile versions. If a very old browser cannot decode the file, GetSVG shows an inline error instead of a blank result.

What is WebP, and why do so many sites use it?

WebP is an image format Google published in 2010. It stores the same picture in a smaller file than PNG or JPEG, which is why most modern websites serve it. If you saved an image from a site recently and got a file you could not open, it was probably a WebP.

Does the transparency in my WebP survive?

Yes. Both lossy and lossless WebP can carry an alpha channel, and GetSVG treats it exactly like PNG transparency: transparent areas count as background, and the SVG comes out with no background rectangle.

Can I convert an animated WebP?

Only the first frame. The browser hands over a single still image when it decodes an animated file, and that is what gets traced. If you need a later frame, extract it first in any image editor.

My WebP was saved from a website and is quite small. Will it trace well?

It depends on the size. Web images are often 200 to 400 px wide, and below 300 px GetSVG warns you that the trace will be rough. Check whether the site offers a larger version: look for a file name ending in @2x, or open the image in a new tab and see whether it loads bigger.

Why is the SVG larger than the WebP it came from?

They store completely different things. WebP compresses pixels very efficiently; an SVG stores the coordinates of every curve. For a simple logo the SVG is usually smaller. For a detailed illustration with many shapes it can be larger, and that is the honest trade for being able to scale it to any size.

Can I convert WebP to SVG on a phone?

Yes. The tool runs in mobile Chrome and Safari, and the settings panel becomes a sheet at the bottom of the screen. Very large images may be slow, because the tracing uses your phone's processor rather than a server.

Does it work without an internet connection?

After the page has loaded, yes. Open the developer tools, switch the network to offline, and tracing and downloading keep working. That is the simplest proof that your file is not being uploaded.