Image to SVG Vectorizer
Convert an image to SVG with the vtracer engine. Three tracing presets, five manual sliders, and a shape count under the result that tells you how heavy it is.
How to use
- Drop in a PNG, JPG or WebP. Clean edges and few colours trace best.
- Choose a preset: Logo / Icon for flat graphics, Photo / Artwork when the source has many colours, Sketch / B&W for pen and pencil work.
- Tick Trace at full resolution if the detail you care about is finer than 2048 px across. Left off, the trace is quicker.
- Press Trace to SVG. Cancel sits beside it if a big image is taking longer than you want to wait.
- Drag the compare slider, then read the size chip and the shape count underneath.
- Take the file with Download SVG, or use Copy SVG markup to paste it straight into your code.
About this tool
A logo turns up as a 400 px PNG and the printer wants vector. Converting that image to SVG means redrawing every flat region of colour as a path, so the artwork is stored as maths instead of pixels and stays sharp whether it lands on a business card or a banner. What you get back is ordinary SVG markup. Figma, Illustrator and Inkscape all open it with each path selectable.
Four presets sit in the dropdown. Logo / Icon is the default and traces at colour precision 6 with the speckle filter on 4, which keeps edges hard and colours flat. Photo / Artwork lifts precision to 8 and speckle to 10, so busier art doesn't shatter into thousands of tiny patches. Sketch / B&W flips the engine into binary mode and ignores colour completely, which is what a scanned pen drawing needs. Custom opens five sliders.
The image gets resized before tracing unless you tick Trace at full resolution. Anything longer than 2048 px on its long side comes down to 2048. Anything shorter than 1024 px is scaled up to 1024 first, because a small bitmap gives the tracer jagged edges to follow and the paths come out lumpy. The engine is a WebAssembly build of vtracer, about 98 KB, fetched once and then cached.
Tracing suits flat art. A photograph turns into posterised blobs of colour, which can look good as a poster effect and nothing like the original. Two numbers appear under the result. The size chip says whether the SVG came out lighter or heavier than the file you dropped in, and the shape count tells you how much work an editor will do to render it. A few hundred paths is comfortable. Several thousand and Illustrator starts to drag.
A 512 px app icon, traced
Drop in app-icon.png at 512 px square and leave the preset on Logo / Icon. Its long side is under 1024, so the image is scaled up to 1024 before the trace runs, and the speckle filter doubles along with it, from 4 to 8. That keeps the tracer ignoring the same specks it would have ignored at the original size.
Press Trace to SVG and the result lands in a slider labelled Original on one side and SVG on the other. Drag it across the corners first, because that is where a bad trace shows. Download SVG saves the file as app-icon.svg. If a stray blob survived, switch the preset to Custom, push Speckle filter up a notch, and run it again.
Good to know
- Photographs come out posterised, and the SVG is often heavier than the JPG you started with. That is what tracing does to continuous tone, not a setting you can turn off.
- Gradients, soft shadows and anti-aliased edges become bands of flat colour. Small text loses its letterforms and is usually better set again in real type.
- Cancel does not interrupt a trace mid-path. It throws the run away and terminates the worker, so a full-resolution pass on a big photo can hold a core busy for a few seconds before it gives up.
- Paths follow what the tracer sees, so grouping and layer names from the original design file are gone. You get stacked flat shapes.
Frequently asked questions
What kind of image traces cleanly?
Flat art with a handful of colours: logos, icons, badges, simple maps, scanned line drawings. Clear boundaries give the tracer regions it can follow, which means few paths and a small file.
Can I convert a photo to SVG?
You can trace one and it will finish, but expect paint-by-numbers patches rather than a photo. The size chip will usually tell you the SVG came out heavier than the original as well.
What do the five Custom sliders actually do?
Detail, 1 to 8, sets how many colours the tracer keeps apart. Layers, 4 to 128, sets how different two colours must be before they get separate shapes. Speckle filter, 1 to 16, drops patches smaller than that. Corners, 0 to 180 degrees, decides when a bend becomes a sharp corner. Curves switches between smooth splines, straight polygons and pixel-exact edges.
Why did my SVG come out bigger than the PNG?
Each colour region becomes its own path, and a noisy source can produce thousands of them. Raise the speckle filter, pull the detail slider down, or accept that this particular image belongs as a raster.
Can I edit the traced file in Figma or Illustrator?
Yes. The output is plain SVG built from path elements with solid fills, nothing exotic, so any vector editor opens it and lets you recolour or delete individual shapes.
Missing something in Image to SVG Vectorizer? Suggest a feature →
Tell someone who needs this.