Vector shapes, cut to fit.

Inlay traces logos, illustrations, line art and pixel art into SVG. Every edge between two colours is traced once and shared by both shapes, so they fit together exactly, like inlaid wood.

Trace an image

npm install inlaytrace

Free and open source. Runs in your browser: your image is never uploaded.

The sample badge as Inlay traced it: 12 shapes, 177 nodes.

Shapes a designer would draw

A 48 px square of the badge: the left peak and its snowcap. Inlay keeps the straight edges straight and the summit sharp; a tracer that smooths each colour's outline on its own lets them wander. The dots are each tracer's nodes.

The source artThe clean art. Both tracers got it as a 640 px JPEG

Inlay62 px wrong here, 9 nodes

VTracer96 px wrong here, 9 nodes

The whole badge, rendered at 4× and compared with the clean art
	Inlay	VTracer
Pixels wrong	0.70%	0.85%
Nodes	177	271
Time for a 2048 px image	1.3 s	17.5 s

VTracer is the excellent open-source tracer, run with the settings the Logo preset used before Inlay replaced it. How these are measured.

Two ways to use it

In the app

Drop in a PNG, JPG or WebP. Compare the trace with the original, fix colours and shapes, then download an SVG, PDF, EPS or PNG, or a zip with one SVG per colour for screen printing and vinyl.

Open the app

In your code

import { trace, toSvg, peakPalette } from 'inlaytrace'

const result = trace(rgba, width, height, {
  mode: 'palette',
  palette: peakPalette(rgba, 8),
  speckle: 8,
  tolerance: 1,
  cornerAngle: 45,
})

result.paths // [{ d, fill }, …]
toSvg(result) // '<svg …>'

Pure TypeScript, no WebAssembly: browsers, Web Workers and Node. Getting started