Inlay

Trace images into vector shapes that fit together.

Inlay turns 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: no gaps, no overlaps, no slivers when you recolour, cut or print one colour at a time.

It comes two ways:

• The app traces an image in your browser, lets you check the result against the original, fix colours and shapes, and download SVG, PDF, EPS or PNG. Nothing is uploaded. Open the app
• The package, inlaytrace, is the tracer on its own: no dependencies and no WebAssembly, for browsers, Web Workers and Node 20+.

Use the package

npm install inlaytrace

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

// rgba: the image's pixels (a canvas's ImageData.data, or any RGBA bytes)
const result = trace(rgba, width, height, {
  mode: 'palette',
  palette: peakPalette(rgba, 8), // the image's main colours
  speckle: 8,
  tolerance: 1,
  cornerAngle: 45,
})

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

Getting started · Options · API reference

How it compares

On the app's sample badge, traced from a 640 px JPEG and rendered back at 4× against the clean art (how this is measured):

	Inlay	VTracer (cut-out shapes)
Pixels wrong	0.54%	0.85%
Nodes	175	271
Time for a 2048 px image¹	1.3 s	17.5 s

¹ Timed by hand, one run each, when Inlay replaced VTracer for the Logo preset (design notes); the other rows are re-measured by npm run site:assets.

VTracer is an excellent general tracer, and the app used it until Inlay overtook it, for photos last (on three photos: 17% closer to the photo, 57% fewer shapes, a 30% smaller file). Straight edges stay single lines and corners stay sharp. Compared with other tools covers Vectorizer.ai, Vector Magic, Illustrator, Inkscape and SVGcode.

Docs

• What Inlay is
• How it works: palettes, shared-edge tracing, curve fitting, measuring quality
• The app: every feature and how it works
• Design notes: why things are the way they are, with the measurements
• Roadmap · Changelog · Research

This repo

Path	What
packages/inlay	The tracer, inlaytrace
apps/app	The app (React, Vite)
apps/site	The landing page and docs site (Astro, Starlight); the docs come from docs/
docs	The docs, as Markdown
scripts	Browser checks, quality scoring, hosting checks

npm install
npm run dev     # the app: http://localhost:5173/app/
npm test

CONTRIBUTING has the rest: every command, how changes are checked, and what to include in a bug report.

Support

Inlay is free. If it has saved you time, you can buy it a coffee on Ko-fi.

Licence

MIT. SVGO, fflate and paper.js are MIT. VTracer (MIT OR Apache-2.0) is only a benchmark in the scoring scripts, not part of the app or the package. Potrace (GPL) and the @imgly packages (AGPL) are deliberately not used.