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
- Load an image — click the Load Image button in the left sidebar.
- Click a region — left-click a colored blob on the canvas. A red crosshair marks the seed point and a curve-fit appears immediately.
- 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.
- Fine-tune with sliders — tweak Margin, Simplify, Segments, and Shape until the outline looks right. Changes re-fit in real time.
- 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. ∞ auto-estimates from contour perimeter.
- 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.
Multi-Select Groups (Shift+Click)
Shift+click adds the current fit to an in-memory group and lets you immediately fit another region. All selected shapes are stashed together as a single named group.
- Click a region and adjust the fit as usual.
- Shift+click another region — the previous fit is locked (shown with a numbered blue marker) and a new fit starts.
- Repeat shift+click to add more shapes. The status bar shows the count.
- Press Enter or click + Stash to name and stash the entire group at once.
- Group items share one color (the current overlay color) and are exported inside a
<g id="name"> element.
- Escape cancels the group selection without stashing.
- A normal click (without Shift) clears the group and starts a fresh single selection.
- Sliders only affect the currently active (last) fit — locked shapes in the group are not re-fitted.
Guided Mode
For fine control over node placement:
- Click Guided to enter node-editing mode.
- Left-click the canvas to place anchor nodes (blue circles = smooth).
- Click an existing node to cycle: smooth → free/corner (amber triangle) → remove.
- With 3+ nodes the fit updates in real time. Press Fit to force a refit.
- Click the Guided rocker again 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:
- Click Genetic in the right sidebar to expand GA options.
- Penalty — cost per node. Higher values push toward fewer nodes at the expense of fit accuracy.
- Pop — population size per generation.
- Gen — number of generations to evolve.
- Click Evolve & Fit to start. The status bar shows live progress. Click again to cancel.
- 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
A. Single shape extraction
Load image → click the region → adjust tolerance/segments → export.
B. Multi-layer illustration
Load image → click region → adjust → + Stash → click next region → repeat → export (all visible stash items are combined).
C. Precise manual control
Load image → click region → Guided → place nodes on key corners/curves → adjust node types → exit → export.
D. Optimal node count
Load image → click region → Genetic → set penalty/pop/gen → Evolve & Fit → stash result → export.
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.