JPG to SVG: Trace a JPEG into Vector Paths

A JPEG stores a grid of pixels; an SVG stores shapes. This page rebuilds the shapes: it quantises the photo to a small palette, flattens the JPEG noise, knocks out a plain background and fits curves to every edge it finds. Everything runs in the tab, so the file never leaves your computer.

JPG / JPEG4–24 coloursBackground knock-outNo upload

1. Drop a JPEG

read in this tab
Drop a .jpg or .jpeg here
or
No image loaded yet — drop a file, or start from the sample.

2. Tracing

applies on change
Colours
Detail5
Smoothing6
Denoise
Background
Decimalspath precision

3. Preview & export

—
Load a JPEG to trace it
The download is a plain SVG: one <path> per colour, no embedded bitmap, no external reference.

Tracing a JPEG is guesswork done carefully: the file contains no shapes at all, so the tracer has to decide which pixels belong to the same region, find the outline of each region and then replace the stair-stepped pixel edge with a curve. That is why a traced JPEG looks right on logos, plans, scans and flat illustration, and wrong on faces — the information needed for a face was thrown away when the photo was saved.

What happens between the JPEG and the path data

Four passes, and three of them exist only because the input is JPEG rather than a clean bitmap:

The number of nodes in the statistics line is the honest measure of complexity: a logo lands in the low hundreds, a photograph in the tens of thousands. When the node count explodes, the fix is almost always fewer colours and a wider denoise, not more detail.

A 600 by 400 logo JPEG on the left and the same shape traced to a four colour SVG on the right, with the background knocked out and the path, node and byte counts underneath
Left: the JPEG, complete with ringing around every edge. Right: the trace at four colours with the background knocked out — 4 fills, 4 rings, 62 nodes, 2.0 KB from a 12.9 KB JPEG. · swipe to see it all

How many colours to choose

Colour count is the main lever, and it is not linear: each extra colour adds a new set of contours, so both the node count and the file size climb faster than the palette does. Measured on an 800×600 photograph saved as a 33.5 KB JPEG, at the default detail and smoothing:

ColoursSVG sizeRingsNodesUse it for
426.9 KB77954Two-tone logos, stencils, screens
862.3 KB2052,368Flat illustration, UI mockups
1682.2 KB2753,138Maps, plans, posters with banding
2489.5 KB3073,475The ceiling before a photo turns to mush

Two things worth noticing in that table. The jump from four colours to eight more than doubles the file, because every gradient in the photograph needs a second band and each band drags its own contours in. After that the growth flattens fast: sixteen colours cost about a third more than eight, and going on to twenty-four adds under a tenth, because most of the extra colours only re-cut regions that already exist instead of adding new area. What keeps climbing is fidelity, not bytes — and past about sixteen colours a photograph is a mosaic of bands that no longer reads as a vector version of anything. If that is what you want, the honest tool is a colour tracer with more engine behind it, such as VTracer, and this page is the better choice for flat art where you want clean curves and a small palette.

JPEG noise is what breaks a trace

A JPEG is compressed in 8×8 pixel blocks, and at a hard edge the transform leaves a ripple that extends a few pixels into both sides. To a naive tracer that ripple is real detail: it becomes a stack of one-pixel contours hugging every letterform, which is why so many online converters return a 2 MB SVG of a 40 KB logo. The cure is not a bigger tolerance on its own but a sequence: denoise first, then quantise, then vote.

The Detail slider controls the smallest region that survives, from roughly one part in 7300 of the image at 10 down to one part in 800 at 1. Dragging it to the left removes specks and stray dots; dragging it right keeps small type and thin strokes, at the cost of many more paths. If your artwork has 12 px text, trace it at a larger pixel size rather than raising detail on a small image: a JPEG already lost the information.

Background knock-out, and when it fails

The background option samples the average colour of the border pixels, then floods inwards from every edge, clearing pixels within the tolerance. Because it floods rather than thresholding the whole image, white inside the artwork survives: the interior of a letter O is only removed if it is connected to the border, which is exactly the behaviour a cutting workflow needs.

SourceResultWhat to change
Logo on flat white, clean scanClean transparent backgroundNothing; tolerance 20–26 is enough
Photo on a gradient backdropHalo, then a bite out of the subjectRaise tolerance until the halo goes, then stop; a gradient cannot be flooded flat
Drop shadow under the artworkGrey fringe kept as a colour bandReduce the colour count so the shadow merges into one band, or crop it first
Paper texture or JPEG mottlingBackground survives in patchesDenoise 2 px, then knock out again

What a traced JPEG is good for

What it is not good for: portraits, product photos, anything with soft shading or a shallow depth of field. Those come back as posterised blobs with thousands of nodes, and the honest answer is that a photograph does not want to be a vector. If you need an enlarged print of a photo, resample the JPEG, not trace it.

After the trace

The output is a normal SVG, so the next step is usually one of these: shrink the path data with SVG Compressor; pull it apart in the SVG Editor; flatten the palette to the single colour your cutter wants in SVG Color Changer; or check that the file survives an export with SVG Validator. If you need a bitmap back at a larger size, SVG to PNG will rasterise it at 1× to 4×.

Two neighbours are worth knowing about. A PNG to SVG converter is the better entry point when the artwork is already a clean bitmap with transparency, because there is no compression noise to fight. And a BMP to SVG converter is the better entry point for palette files, where the exact colours are in the file and do not have to be guessed.

Frequently asked questions

Does converting a JPEG to SVG restore the original artwork?

No. A JPEG only stores pixels, so a trace rebuilds a stack of flat colour regions that follow the edges it finds. It recovers logos, line art, plans and scans well, and it cannot recover a photograph: faces and gradients come back as posterised patches, because the data needed to describe them as curves was never in the file.

Why does my JPEG look noisy when it is traced?

JPEG compresses in 8×8 blocks and the quantisation leaves ringing around every high contrast edge, so a supposedly flat area contains six or seven near-identical colours. The tracer runs a denoise pass and a 3×3 majority filter before it looks for contours, which collapses those islands. Raise Denoise to 2 px for an aggressive scan.

Is the traced SVG smaller than the JPEG?

For flat art, usually yes: a 600×400 logo JPEG of 12.9 KB traces to about 2.0 KB at four colours. For photographs, usually no: an 800×600 photo that is a 33.5 KB JPEG lands near 26.9 KB at four colours and 62.3 KB at eight, because every gradient becomes a set of stacked bands. Size is not the point of tracing a photo; editability at any scale is.

Can I remove the white background in the same step?

Yes. Tick the background option and the tracer samples the border colour, then floods inwards removing every pixel within the tolerance you set. The removed area becomes transparent in the SVG. It fails on uneven scans and drop shadows, where it either leaves a halo or eats into the subject.

Is my JPEG uploaded to a server?

No. The file is read with FileReader, painted onto a canvas in the tab, quantised and traced there. There is no upload endpoint on this page and no external script — disconnect the network and it keeps working.

Related SVG workflows

More free SVG tools