SVG Fitter

Overview

SVG Fitter is a fully local application — all processing happens in your browser. No images, data, or keystrokes are ever sent to any server or the internet.

It converts regions of a raster image into clean, scalable SVG paths made of cubic Bezier curves. Click a colored area in your image, and the tool traces its outline, fits smooth curves to it, and exports the result as a standard SVG file.

Quick Start

1. Load an image — click the Load Image button in the sidebar.
2. Click a region — left-click a colored blob on the canvas. A red crosshair marks the seed point and a curve-fit appears immediately.
3. Drag to adjust tolerance — instead of clicking, click and drag outward from the seed point. The drag distance controls how much color variation is included (tolerance). Drag further = wider selection.
4. Fine-tune with sliders — tweak Margin, Simplify, Segments, and Shape until the outline looks right. Changes re-fit in real time.
5. Export — click Export to download an SVG or Copy to copy the SVG markup to your clipboard.

Canvas Navigation

• Zoom — scroll wheel zooms in/out, centered on the cursor. Pinch-to-zoom on trackpads is also supported.
• Pan — right-click and drag to pan the view. Two-finger scroll on trackpads pans as well.
• Click — left-click places a seed point (or removes it if you click near an existing one).

Fitting Controls

• Tolerance (0–100) — how similar a pixel's color must be to the seed. Higher values select a wider area.
• Margin (−10 to +10) — grow or shrink the selection by this many pixels before tracing.
• Simplify (0.1–20) — pre-smooth the contour. Higher values remove pixel-level noise but may lose fine detail.
• Segments (3–160) — number of Bezier curve segments. Fewer = smoother; more = closer to the original outline.
• Shape — Smooth (all curves), Sharp (all corners), or Auto (detect corners automatically).
• Fill holes — when checked, inner holes are removed so the shape is filled solid. Useful for layering: click the outer region first, then click the hole separately to extract it.

Display Controls

• Color — fill color for the current fit overlay.
• Opacity — transparency of the overlay, so you can see the original image underneath.
• Overlay / Blob Only — toggle between showing the image + overlay and showing just the fitted blob on a checkerboard.

Stash (Multi-Shape)

Press Enter or click + Stash to save the current fit. A name prompt appears — type a label (e.g. body, head) and confirm. The stashed shape becomes a permanent layer and you can immediately click another region to fit it.

• Press Enter to accept, Escape or Cancel to dismiss. Leaving the name blank is fine too.
• The color dot next to the name shows the original pixel color at the seed point — this is the color used when exporting.
• The overlay color picker only affects the on-screen preview. Exported SVG paths always use the sampled seed color.
• Export toggle (E icon) — controls whether this item is included in Export/Copy. Bright E = included, dim E = excluded. On by default. An item can be invisible on canvas but still exported.
• Each stash item also has a visibility toggle (filled/hollow circle) and a delete button (✕).
• Double-click a name to rename it. Named shapes are wrapped in a <g id="name"> group in the exported SVG.
• Stashes are persisted per image — they survive page reloads.

Semi-Manual Mode

For fine control over node placement:

1. Click Semi-manual to enter node-editing mode.
2. Left-click the canvas to place anchor nodes (blue circles = smooth).
3. Click an existing node to cycle: smooth → free/corner (amber triangle) → remove.
4. With 3+ nodes the fit updates in real time. Press Fit to force a refit.
5. Click Stop Semi-manual to exit and return to the normal pipeline.

Genetic Algorithm (GA)

Use the GA to automatically find the minimum number of nodes that still cover the shape well:

1. Click Genetic to expand GA options.
2. Penalty — cost per node. Higher values push toward fewer nodes at the expense of fit accuracy.
3. Pop — population size per generation.
4. Gen — number of generations to evolve.
5. Click Evolve & Fit to start. The status bar shows live progress. Click again to cancel.
6. Auto GA — when checked, the GA runs automatically after every slider change or seed placement, replacing the normal instant fit. Changes to tolerance, margin, or GA parameters trigger a fresh evolution.

Other Buttons

• Refit — re-runs the auto-fit with the current slider values.
• Reset Settings — restores all sliders to their defaults.

Typical Workflows

Persistence

The app remembers your session across page reloads: the loaded image, seed point, all slider values, display mode, and per-image stash are restored automatically.