How it works
Vectorizing means replacing a grid of pixels with shapes whose edges are described mathematically. The hard part is not drawing curves — it is deciding where the edges are. This page walks through what GetSVG does with your picture, in the order it does it, so the controls in the inspector make sense.
1. The picture is read on your device
The file is decoded by your browser into raw pixels and resized to a working size of at most 2200 px on the long side (small pictures are enlarged 2×). Those pixels are handed to a Web Worker, so tracing does not freeze the page. Nothing is sent anywhere: the page makes no network requests after it has loaded, which you can verify in the browser's developer tools.
2. The picture is profiled and a preset is chosen
GetSVG samples the pixels and measures four things: how many distinct colours there are, how much of the picture is saturated colour, how soft the edges are, and how much of the border is one plain colour. From that it picks a preset — and every other setting follows from the preset. You can change it with one click.
| Preset | When it is picked | What it does |
|---|---|---|
| Clean logo | Few colours, crisp edges, one ink (plus an optional accent). | Flat colour, sharp corners, no texture. |
| Hairline | Black & white artwork with thin strokes and fine detail. | Thin strokes stay joined; traces at higher quality. |
| Brush | One dark ink with soft, textured edges and a small colour accent. | Keeps dry-brush gaps and spatter as shapes. |
| Sketch | Chosen by hand for scans and pencil work. | Softens scanned edges, removes paper specks. |
| Illustration | Many colours or soft, shaded transitions. | More colours, medium detail. |
| Artwork | Chosen by hand when you want the most faithful, detailed result. | Follows every detail; larger files. |
3. Background and edges are prepared
- Background detection. The colour that appears most along the picture's border is the background. With Transparent background on, GetSVG floods inwards from the border and removes every pixel that is both close to that colour and connected to the edge — so a white counter inside a letter is removed, but the light end of a fade that merely resembles the background is kept. Semi-transparent pixels are composited onto white first so alpha fringes do not become shapes.
- Upscaling. Single-ink modes trace at 2-3× the working size, so a one-pixel hairline becomes a three-pixel stroke that survives thresholding. The curves are scaled back afterwards.
- Sharpening. An unsharp mask crisps the grey fringe around strokes, so the ink/paper decision follows the stroke edge rather than wobbling through the anti-aliasing.
4. Pixels become masks
Potrace only understands black and white, so every colour mode reduces the picture to one or more masks:
- Black & white. Otsu's method finds the threshold that best separates two groups — but GetSVG thresholds on how different a pixel is from the background, not on brightness, so a yellow logo on white is still ink. The dominant ink colour is measured and kept.
- Ink + one colour. Before thresholding, one small, strongly saturated region (a seal, a dot, a wave) is detected and traced as its own mask.
- Full colour. Median-cut quantisation reduces the picture to N colours (up to 16). Near-identical colours can be merged so a fade becomes one region; with Smooth gradients GetSVG fits a linear gradient across that region and writes a real SVG
<linearGradient>.
5. Potrace fits the curves
Potrace — the same algorithm behind Inkscape's Trace Bitmap — turns each mask into closed paths. It finds the pixel outline, straightens it into a polygon with as few corners as it can justify, then replaces polygon segments with cubic Bézier curves where a curve fits. Three of the Fine-tune controls map straight onto its parameters:
| Control | Potrace parameter | Effect |
|---|---|---|
| Smooth edges | alphamax | How readily a corner becomes a curve. Low keeps corners; high rounds them. |
| Fewer points | opttolerance | How much a fitted curve may deviate from the polygon; higher means fewer, longer curves. |
| Remove specks | turdsize | Drops closed shapes smaller than this area (Keep brush texture sets it to zero). |
The Detail slider moves those three together: Simplest gives few, calm shapes; Faithful follows every wobble of the original.
6. Paths are cleaned up and grouped
Potrace returns paths inside a flipped, scaled transform. GetSVG bakes that transform into the coordinates (absolute, one decimal), computes the exact bounds of every curve including Bézier extrema, and crops the SVG view box to the artwork with a small margin. Every colour becomes one <g fill="#…"> with a<path> per shape.
7. You check it and download
The Paths overlay draws every outline and anchor point on top of the result — the quickest way to see that the file is real geometry and to judge whether there are more points than you would draw by hand. Download gives you the SVG, PNG at 1×/2×/4×, or the SVG code on the clipboard.
Try it on the examples, or start with your own file on the vectorizer.