PNG to SVG Tracer

SVG tracer

Turn a bitmap into SVG paths you can open in Inkscape, Illustrator or Figma. You choose how many colors to keep and how smooth the curves should be.

How to use it

  1. Add a bitmap: PNG, JPG, WebP, GIF or BMP.
  2. Choose a style, then set the number of colors for the trace.
  3. Move the comparison line across the preview to check corners, thin strokes and small text.
  4. Download the SVG and open it in your vector editor.

How the trace is built

The tracer reduces your image to a small palette, finds the boundary of each color area, and fits straight lines and curves along those boundaries. Holes, such as the inside of an O, are cut out of the shape that surrounds them.

Each color ends up as one path in the SVG. That makes the file easy to work with: click a color in your editor, and every shape of that color is selected together, ready to recolor or delete.

Choosing settings by image type

Logos with flat fills do well with 4 to 8 colors and the default smoothing. Line drawings and handwriting trace best in the black and white style, where the threshold decides what counts as ink. Illustrations with soft shading need more colors, 16 or so, and will produce banded areas instead of gradients.

What the settings do

Threshold (black and white only)
Pixels darker than this become shapes. Raise it to catch faint lines, lower it to ignore paper texture.
Trace light shapes
Flips the logic for light artwork on a dark background.
Colors
The size of the palette. Each color becomes one path in the SVG.
Smoothing
Trades precision for cleaner curves. Higher values give fewer points and smaller files.
Soften
Blurs the image slightly before tracing so noise does not turn into jagged edges.

What people use it for

  • Redrawing a flattened logo when the original vector file is lost
  • Preparing artwork for screen printing, embroidery digitizing or vinyl cutting
  • Converting scanned drawings and signatures into scalable shapes
  • Creating a starting point to refine by hand in a vector editor

Questions

Does it keep gradients?

No. Tracing produces flat color areas. A gradient becomes several bands, and more colors give smoother bands. If you need a true gradient, rebuild it in your vector editor after tracing.

Why is one path used per color?

It keeps the file small and tidy. Shapes of the same color sit together, so recoloring takes one click. If you need separate shapes, use Break Apart or Ungroup in your editor.

How do I make the SVG file smaller?

Lower the number of colors, raise Smoothing, and raise Remove small specks. Each change reduces the number of points the tracer has to store.

How is this different from Image Trace in Illustrator?

Image Trace is a built-in feature of Illustrator with its own presets. This tool is a free option that runs in any browser, which is handy when you do not have Illustrator open. Results differ between tracers, so it can be worth trying both on a difficult image.

Is my file uploaded anywhere?

No. Tracing and file creation happen in your browser, using code that is part of this page. Your image is not sent to a server. You can check this in your browser's network tab while you use the tool.

More tools