~/ink-trace > trace raster images to SVG and draw simple SVG art, runs in your browser, nothing is uploaded
Result
Original
Traced SVG
Drop an image above to trace it. Logos, icons and line art work best.
Canvas
800 x 600Pixel canvas
16 x 16About
Trace turns a raster image into SVG paths, and Draw is a small canvas for making
SVG art by hand or touching up a trace. Everything runs in this tab. Nothing is
uploaded, there is no network call and no analytics.
How tracing works
and its limits
A vector is an approximation of pixels, so no tracer can keep every pixel. This one
keeps what matters for logos, icons and line art. Anti-aliased edge pixels are
treated as partial coverage, so edges land at sub-pixel positions instead of
snapping to the grid. Corners are detected and snapped back to the point where the
two edges meet. Curves are fitted with cubic beziers inside the fit error you set.
In colour mode, layers are stacked so neighbouring colours never leave a hairline gap.
Photographs are not a good fit. A photo has no flat regions, so it traces to a
posterised look and a very large file. Images wider than 1800 px are downsampled
for tracing, and the SVG keeps the original dimensions.
Draw
what it does
Pen (freehand, smoothed to curves), line, rectangle, ellipse and polygon tools, with
move, restyle, reorder, duplicate, delete and undo. Edit in Draw on a trace turns each
colour layer into a path you can move, recolour or delete. There is no node editing
or resizing yet.
Fill finds the enclosed area under your click and adds it as a new vector shape, placed
under the outlines. It works by rendering the canvas, so a gap in an outline lets the fill
leak. Close the gap, or lower the fill tolerance if anti-aliased edges are being swallowed.
Pixel
what it does
A separate grid for pixel art, up to 128 x 128. Paint and erase squares one at a time or by
dragging, bucket fill connected squares, pick a colour from the art, undo and redo. Export
to SVG (one path per colour, crisp edges) or PNG at the square size you choose.
Appearance
design, mode, accent
Three controls in the top bar, saved between visits. Design sets the shape
language and backdrop, mode sets the lightness, and the accent can be any
hue. They combine freely, and the accent is re-lit per mode so it never
drops below a readable contrast.