Image Vectorizer — Browser Edition

I was sick of the shitty ones on the internet that make you pay or upload your files, so I "made" my own.

This program allows you to convert raster images (PNG, JPEG, WebP, GIF) into clean, editable SVG files.
This program runs entirely in your browser. Nothing is uploaded. No install required.

Live Demo

Go to https://vectorize-it.ilovemyhonda.fit/ to use in the browser.

---

How to Use

1. Open the page in any modern browser (Chrome, Firefox, Edge, Safari).
2. Drop an image onto the drop zone, click to browse, or paste from the clipboard.
3. Adjust the parameters (or leave the defaults — they work well for most images).
4. The SVG is traced automatically. Adjust sliders; it re-traces live.
5. Click Download SVG to save, or Copy SVG to paste into a design tool.

---

Parameters

Binarization

Control	Default	What it does
Foreground	Auto	Whether the subject is the dark or light part of the image. Auto detects it.
Auto threshold (Otsu)	On	Automatically find the best light/dark cutoff. Uncheck to set it manually.
Despeckle	8 px	Discard isolated specks smaller than this many pixels before tracing.
Fill holes	8 px	Close interior pinholes smaller than this many pixels.

Geometry

Control	Default	What it does
Trace mode	Sub-pixel	Sub-pixel uses marching squares for smooth curves on anti-aliased art. Pixel traces exact pixel boundaries — jagged but pixel-perfect.
Simplify	0.35	Ramer–Douglas–Peucker tolerance. Higher = fewer points, smaller file, less detail.
Curve error	0.35	Max allowed deviation (in pixels) when fitting Bézier curves.
Corner threshold	55°	Turns sharper than this become hard corners instead of smooth curves.
Fit Bézier curves	On	Uncheck to emit straight-line polygons instead of curves.

Output

Control	Default	What it does
Fill	#000000	Fill color for the shapes.
Background	#ffffff	Background rectangle color. Check "Transparent background" to omit it.
Scale	1.0	Multiply all coordinates by this factor.
Decimals	2	Decimal places in path coordinates. Fewer = smaller file, less precision.

Working resolution

Scales the image down before processing. Speeds up tracing on large photos; quality is unchanged for images ≤ 2048 px on their longest side.

---

Views

Tab	Shows
Vector	The traced SVG rendered by the browser
Source	The original image
Binary target	The black/white mask used for tracing
Difference	Per-pixel accuracy: ■ missed · ■ extra · ■ match

---

Stats

After tracing, the status bar shows:

Stat	Meaning
Paths	Number of filled shape paths in the SVG
Curves	Total Bézier / line segments
Size	SVG file size
IoU	Intersection-over-Union vs. the binary target
F1	Harmonic mean of precision and recall
Precision	Fraction of traced pixels that were foreground
Recall	Fraction of foreground pixels that were traced
Threshold	The binarization cutoff used (0–1)

A good result is F1 ≥ 0.98. Sub-pixel mode on a typical anti-aliased logo achieves ~0.99.

---

Files

index.html        — UI and image decoding
tracer-core.js    — Tracing algorithm (pure JS, no dependencies)
tracer.worker.js  — Runs the algorithm in a Web Worker

All processing happens in tracer-core.js. The Worker keeps the UI responsive on large images. On browsers that block Workers (e.g. opened via file:// in some browsers) it falls back to the main thread automatically.

---

Algorithm

1. Grayscale — luminance-weighted average of R, G, B channels, premultiplied by alpha.
2. Otsu threshold — maximises between-class variance to find the optimal light/dark split.
3. Connected components — union-find, 8-connectivity for foreground, 4-connectivity for holes.
4. Noise removal — despeckle (remove small regions) + fill holes.
5. Contour tracing — marching squares on the grayscale field (sub-pixel mode) or pixel-boundary walking (pixel mode).
6. Simplification — Ramer–Douglas–Peucker to reduce point count.
7. Curve fitting — Schneider least-squares cubic Bézier with Newton–Raphson reparameterization; corners detected by turn angle.
8. SVG output — one <path fill-rule="evenodd"> per connected component; holes share the same d attribute with opposite winding.

---

License

MIT