Vectorization — turning pixels into paths — is the reverse of rasterization, and it's inherently lossy. It works well for logos, icons, and line art (content with flat colors and hard edges) and poorly for photographs (which don't have vector structure). The Rankato PNG-to-SVG vectorizer uses ImageTracerJS, an open-source WebAssembly-friendly rasterizer that gives you fine control over color quantization, curve smoothing, and minimum path length. For a good source image, you'll get a clean SVG in seconds; for a photograph, you'll get an interesting but unusable art piece.
When vectorization works — and when it doesn't
Vectorization excels at: flat-color logos, monochrome line art, cartoon-style illustrations, and text (when high contrast). It fails at: photographs, gradient-heavy illustrations, images with noise or JPEG artifacts, and anything with sub-pixel detail. Before you try, ask: could a designer have made this with the Pen tool in Illustrator? If yes, vectorization has a chance. If no, you'll get an abstract mosaic that no one will want to use.
Color count — the most important knob
The vectorizer first reduces your image to N colors, then traces each color's region into a path. Too few colors (2–4) loses detail; too many (32+) produces an unusable mess of overlapping paths. Sweet spots: 2 colors for black-and-white line art, 4–8 colors for typical logos, 16 colors for detailed illustrations. Preview updates on every change so you can dial it in visually.
Smoothness and path simplification
Once regions are traced, the tracer converts pixel boundaries into Bezier curves. Smoothness controls how aggressively pixels get replaced by curves — high values produce clean rounded shapes but lose sharp corners; low values preserve corners but produce jagged edges. Minimum path length filters out tiny path fragments (specks from JPEG noise or anti-aliased edges) — start at 8 for clean sources, 20+ for noisy ones.
Pre-processing to improve results
The tool includes three optional pre-processing steps that dramatically improve trace quality: Denoise (Gaussian blur that reduces JPEG artifacts before quantization), Sharpen edges (unsharp mask that makes region boundaries crisper), and Threshold (converts near-white pixels to true white and near-black to true black — great for scanned line art). Toggle each and preview.
Cleaning up the result
Even a good trace produces some junk — tiny paths, overlapping regions, per-color duplicated coordinates. Toggle Optimize output (on by default) to run the result through SVGO before download. Additional cleanup happens on the frontend: colors sharing a boundary get merged, degenerate paths (length < 3 pixels) are dropped, and coordinate precision is rounded to 1 decimal. The resulting SVG is often 3–5× smaller than the raw ImageTracerJS output.