Trace a PNG or JPG into real SVG paths, with holes that stay holes and transparency that is not read as black. The page counts the pixels its own vector differs from the picture, and at the exact setting that count is zero.
Initializing in your browser…
Render SVG to PNG, JPG or WebP at a chosen size, with the size worked out from the file by the rules that define it and checked against the browser's own rendering.
Turn an image into a data URL whose payload is decoded again and compared byte for byte with the file, with the media type taken from the file's own signature rather than its extension and the size cost of embedding stated in full.
Optimize and minify SVG files over a real markup tokenizer, then verify the result by drawing both versions and comparing every pixel.
A black ring traced to SVG, then rendered by the browser and compared with the picture it came from, pixel for pixel.
Input
trace-ring.png · 256 by 256 · outer radius 100, inner radius 40
The browser rendering both files at the same size
before after pixels different 5,943 0 of 65,536 65,536 the hole, filled 1,600 0 of its 1,600 pixels a disc on a transparent ground pixels different 33,162 0 of 40,000 40,000
A contour follower that emits every contour as its own filled path cannot make a hole: the ring’s middle came out solid, all 1,600 pixels of it. Here a region carries its holes as subpaths of one path with fill-rule="evenodd". The transparent case is the other structural fault: a canvas hands a fully transparent pixel back as BLACK, so reading only the colour channels drew 82.91 percent of a disc-on-transparent fixture as a solid black field.
Trace a PNG or JPG into real SVG paths. Boundaries follow the edges between pixels, so at the exact setting the vector covers precisely the pixels it was traced from and the page prints that count. Holes stay holes, transparency is handled explicitly, and the luminance definition the threshold uses is named.
Convert a raster logo into scalable vector format that stays sharp at any size, with its counters and cutouts intact.
Trace simple icons and illustrations into SVG for web or app use, keeping a transparent background transparent.
Convert graphics to vectors for large-format printing where raster images would pixelate.
Trace a 256 by 256 ring at Simplify 0. The page reports 0 of 65,536 pixels different, and the hole is empty: the outer boundary and the hole are subpaths of one path.
Set Transparency to "Is the shape". The alpha channel becomes the outline, and nothing is painted where the file has nothing, instead of the black field a canvas would otherwise report.
A tracer makes exactly one promise: the paths draw the picture they were traced from. This one is built so that promise is measurable without leaving the page, and the number is printed above the preview. Boundaries are followed along the CRACKS between pixels rather than through their centres, so an untouched contour is a polygon on integer coordinates whose interior is exactly the set of pixels it came from. Filling that polygon back with a scanline is an identity, which is why the page can say "0 of 65,536 pixels differ" and mean it literally. Every later step is then priced against that exact boundary: the Simplify slider reports how many pixels its Ramer-Douglas-Peucker pass moved, so a smaller file is a trade you make with the number in front of you rather than a hope.
Holes are real holes. A region carries its outer boundary and every one of its holes as subpaths of ONE path element with fill-rule="evenodd", so the middle of a ring, the counter of an O and the gap in a figure 8 stay empty. Emitting each contour as its own filled path, which is what a contour follower does by default, fills them all in. Transparency is a first-class input rather than an accident: a canvas hands a fully transparent pixel back as black, so a tracer that reads only the colour channels sees a black field where a logo has nothing at all. Here transparency either composites onto a matte colour you choose (which is what a canvas does anyway) or becomes the shape itself, where a pixel at least half opaque is inside and the threshold is not consulted.
The threshold is measured on a luminance definition you name: ITU-R BT.709-6, which holds the coefficients that belong to sRGB, ITU-R BT.601-7, which is standard-definition television and what Photoshop's Luminosity channel shows, or CIE L* lightness. They disagree by more than 30 levels on a saturated colour, so which one is in use decides whether a pixel is ink. Colour mode groups the picture into a palette by frequency, Heckbert median cut or k-means in CIE Lab, every entry being a colour the image really contains, then maps each pixel to the nearest entry by CIEDE2000 and traces the regions. Because the layers TILE the image, no region overlaps another, so the order they are painted in cannot change the result and the largest layer is left unpainted as the background.
The working resolution is yours (256 to 2000 pixels on the long side), and the file still declares the source's own dimensions: an SVG has no resolution, so there is no reason for the output to claim the tracer's working size. Smoothing rounds only the vertices whose turn is flatter than an angle you set, so a cross keeps its eight right angles while the staircase along its arms is rounded away. The output is standard SVG with one path per colour, ready for Illustrator, Inkscape or Figma. Photographs still trace into many regions, which is inherent to region tracing rather than a tuning problem; the page tells you how many regions and points it produced so you can see it happening.
It is the tool checking its own work. The emitted paths are filled back with a scanline using the same even-odd rule a renderer uses, and the result is compared with the pixels that were traced. With Simplify at 0 that count is 0: the vector covers exactly the pixels it came from. Above 0 the count is what the simplification cost you, in pixels.
It should not, and that is the point of this version. Each region carries its holes as subpaths of one path with fill-rule="evenodd", so the hole is cut out. If you see a filled hole, the region is smaller than the Drop regions under setting, or the two parts were separated by the threshold.
You decide. On a matte composites the picture onto a colour first, which is what a canvas does anyway, and is right for a logo drawn on white. Is the shape uses the alpha channel directly: a pixel at least half opaque is inside and the threshold is ignored, which is right when the transparency IS the outline.
Whichever you choose. Rec. 709 (ITU-R BT.709-6 item 3.2) holds the coefficients that belong to sRGB and is the default; Rec. 601 (ITU-R BT.601-7 table 3) is the television definition Photoshop shows as Luminosity; CIE L* is the perceptually even one. On pure green they differ by more than 30 levels, so the choice really does decide what counts as ink.
A photograph traces into many regions, because region tracing has to draw a boundary wherever the colour changes. The page reports the region and point counts so you can see the cost. Logos, icons and flat illustrations are what this is for.
Yes. The output is standard SVG with one path element per colour, which opens in Illustrator, Inkscape, Figma or any vector editor.
Because an SVG has no resolution. The viewBox is the grid the trace ran on and the width and height are the source image's own, so the file drops into a layout at the size the picture was, and scales from there without loss.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.