Image to SVG

Raster images are made of pixels and get blurry when enlarged. Vector images describe shapes with mathematical paths, so they stay sharp at any size, from a business card to a building wrap. Tracing converts one into the other: it finds areas of similar color in a bitmap and outlines them with lines and curves. The result is an SVG you can scale, recolor and send to cutting machines.

How tracing works

First the image is reduced to a limited palette, for example eight colors for a logo. Then the outline of each color area is followed pixel by pixel, and those outlines are simplified into straight lines and quadratic curves within a tolerance. Tiny areas below a minimum size are dropped as noise. Finally every area becomes an SVG path filled with its color. All of this runs in a background worker, so the page stays responsive while large images are processed.

Picking the image type

Logo mode uses eight colors and suits flat artwork with clear edges. Illustration mode allows sixteen colors for drawings with more shades. Photo poster mode blurs the image slightly before reducing it to twenty-four colors, which turns a photograph into a posterized artwork rather than a noisy mess of tiny shapes. Black and white mode first converts the picture to two tones at a threshold you control; it is the right choice for signatures, stamps, line drawings and stencils.

Colors and detail

The color count should match the artwork. A logo with three colors plus white traces best at four; extra colors only create thin outlines along anti-aliased edges. The detail setting controls how small a shape can be and how closely curves follow the pixels: Smooth straightens wobbles and drops specks, Detailed keeps tiny features but produces more paths. Start with Balanced and adjust while watching the preview, which updates automatically.

Working size and quality

The tracer analyzes a copy of the image scaled to the working size, 1000 pixels by default. A larger working size keeps fine features but takes longer and produces bigger files. If the source is small, say a 200-pixel logo from a website, tracing will not invent detail; the result will be smooth but simple. Start from the largest, sharpest version of the artwork you have.

Removing the background

Logos often sit on a white or colored rectangle. Switch on background removal and the paths of the color closest to the image corners are left out, so the SVG is transparent around the logo. In black-and-white mode the option removes the white areas, leaving only the ink, which is what a vinyl cutter or laser engraver needs.

After tracing

Download the SVG or copy its code. Open it in a vector editor to clean up details, combine shapes or adjust colors. To get a pixel image again at a specific size, for example for an app store, use SVG to PNG. For a two-tone stencil from a photo before tracing, Posterize Image gives more control over the threshold. And for icons, SVG to ICO turns the traced logo into a multi-size favicon.