How Image Vectorization Works: Raster to SVG

What Is Image Vectorization?

Image vectorization is the process of converting a raster image (a grid of colored pixels — PNG, JPEG, BMP) into a vector image (mathematical descriptions of shapes and curves — SVG, AI, EPS). The result is an image that can be scaled to any size without quality loss, because the shapes are defined by equations rather than fixed pixels.

This is not a simple conversion like changing JPEG to PNG (both raster formats with different compression). Vectorization is a fundamentally different process — an algorithm must analyze pixels and infer the geometric shapes they represent. A black circle in a PNG is stored as thousands of pixels arranged in a roughly circular pattern. The vectorizer must detect that pattern and generate an SVG <circle> element (or more commonly, a Bezier curve path that describes a circle).

The quality of vectorization depends on two things: the source image characteristics (simple graphics vectorize well; photographs do not) and the sophistication of the tracing algorithm. This guide explains how the major vectorization methods work under the hood.

The Vectorization Pipeline

Every vectorization algorithm, regardless of implementation, follows a similar pipeline:

Stage 1: Preprocessing

The raw image is prepared for tracing:

Color quantization reduces the millions of possible colors in the source image to a smaller set of representative colors. A typical logo might use 4-8 colors, but the PNG version contains hundreds of slightly different shades due to anti-aliasing, JPEG artifacts, or subtle gradients. Quantization clusters these into the "intended" colors.

Common quantization methods:

• Median cut — Recursively divides the color space along the axis with the greatest range
• K-means clustering — Iteratively groups colors by proximity in color space
• Octree quantization — Builds a tree structure in RGB color space and prunes leaf nodes

The number of quantization colors is a key user-configurable parameter. More colors produce more faithful SVGs with more paths; fewer colors produce cleaner, simpler SVGs.

Thresholding (for black-and-white mode) converts the image to a 1-bit bitmap. Every pixel becomes either black or white based on a brightness threshold. This is used by potrace and similar contour-tracing algorithms.

Stage 2: Region Segmentation

The quantized image is divided into connected regions of the same color. Each region becomes a candidate for a vector path. Segmentation identifies which pixels belong together — the red area of a logo, the blue background, the white text.

Speckle filtering removes small isolated regions below a minimum size threshold. In raster images, noise, compression artifacts, and anti-aliasing create tiny stray-color regions that should not become vector paths. Filtering these out before tracing produces cleaner, smaller SVGs.

Stage 3: Contour Detection

The algorithm traces the boundary of each color region, generating a sequence of pixel coordinates that defines the region's outline. This produces a jagged, pixel-aligned boundary — not yet a smooth vector path.

For black-and-white images, potrace uses the Potrace algorithm (developed by Peter Selinger): it detects closed contours in the bitmap, decomposes them into straight-line segments, and identifies which segments are inside other segments (for handling holes, like the interior of the letter "O").

For color images, vtracer (which our converter uses) identifies the boundary between each pair of adjacent color regions. This is more complex because a pixel can border multiple different colors, and the algorithm must generate separate paths for each color boundary.

Stage 4: Path Fitting

The jagged pixel boundaries from Stage 3 are converted into smooth mathematical curves. This is where the magic happens.

Bezier curve fitting is the standard approach. The algorithm fits cubic Bezier curves to sequences of boundary pixels, minimizing the error between the curve and the pixel positions. Each Bezier curve is defined by four control points: two endpoints and two handle points that control the curvature.

The fitting process involves:

1. Corner detection — Identify points where the boundary changes direction sharply. These become endpoints of separate Bezier segments.
2. Segment grouping — Group boundary pixels between corners into segments.
3. Curve fitting — For each segment, compute the Bezier control points that best approximate the pixel sequence. The fitting algorithm minimizes the maximum distance between the curve and the original pixels.
4. Error checking — If the error exceeds a threshold, split the segment at the point of maximum error and fit two curves instead of one.

The corner threshold and segment length parameters control this process. A lower corner threshold detects more corners, producing more angular paths. A higher threshold produces smoother curves with fewer nodes but may round off intentional corners.

Stage 5: Optimization

The raw SVG output from path fitting is often verbose. Optimization reduces file size without changing the visual appearance:

• Decimal precision reduction — Coordinates like 123.456789 become 123.46. Two decimal places are sufficient for screen display.
• Path command shortening — Absolute coordinates (M 100 200 L 150 250) are converted to relative (M 100 200 l 50 50) when shorter.
• Redundant node removal — If removing a node changes the path by less than a threshold, it is removed.
• Group merging — Overlapping paths of the same color are merged into single paths.
• Metadata stripping — Editor comments, unused definitions, and empty elements are removed.

SVGO (SVG Optimizer) is the standard tool for this stage and typically reduces file size by 20-50%.

Tracing Algorithms Compared

Our PNG to SVG converter and JPG to SVG converter use vtracer for color tracing with potrace as a fallback for black-and-white mode. This combination covers the full range of vectorization needs.

What Vectorizes Well and What Does Not

Excellent Results

• Logos with flat colors and clean edges
• Icons with limited color palettes
• Line art and technical drawings
• Text rendered at sufficient resolution
• Cartoons and flat illustrations
• Silhouettes and simple shapes

Poor Results

• Photographs — Millions of colors produce enormous SVGs with thousands of paths that look worse than the original
• Gradients — Continuous color transitions become stair-stepped bands
• Textures — Fine patterns produce excessive detail in the vector output
• Low-resolution sources — Below ~200px, there is not enough pixel data to infer smooth shapes
• Noisy or compressed images — JPEG artifacts create false edges and stray-color regions

Quality and Settings Tips

Start with the highest resolution source. Vectorization quality is directly proportional to input resolution. A 1000px logo produces dramatically cleaner curves than a 100px version. If you only have a small image, upscale it 2-4x using a bicubic or AI upscaling method before vectorizing. The upscaled version gives the tracer more pixel data to work with.

Use limited color mode for most graphics. Unless your image genuinely uses dozens of distinct colors, manually setting a low color count (4-8 for logos, 12-16 for illustrations) produces much cleaner results than letting the algorithm auto-detect colors.

Increase speckle filter for scanned images. Scanned artwork, stamps, and printed materials contain scanner noise that creates thousands of tiny vector paths. A speckle filter of 4-8 pixels eliminates most scanner artifacts.

Compare with the source at zoom. The best way to evaluate vectorization quality is to zoom to 200-400% and compare the vector output with the original raster side-by-side. Edges should be smooth curves, not jagged stair-steps, and color regions should match the original.

For a step-by-step tutorial on converting PNG to SVG with our converter, see our PNG to SVG conversion guide. For understanding SVG as a web format, see our guide on best image formats for web and SEO.

Common Issues and Troubleshooting

SVG has thousands of tiny paths. The source image has too much color detail or noise. Increase speckle filter, reduce color count, and increase segment length. If the image is a photograph, vectorization is the wrong approach — keep it raster.

Curves are too angular. Increase the corner threshold to reduce corner detection sensitivity. Also increase segment length to produce longer, smoother curve segments.

Colors do not match the original. Color quantization simplifies the palette. Manually edit the fill colors in the output SVG to match your brand colors or intended palette.

SVG renders differently in different browsers. Verify that the SVG uses standard path commands and does not rely on browser-specific features. SVGO optimization generally produces clean, standards-compliant output.

Fine internal details are missing. The speckle filter is removing small features it interprets as noise. Reduce the speckle filter threshold, accepting that some noise may also be preserved.

Conclusion

Image vectorization works by quantizing colors, segmenting regions, tracing contours, fitting Bezier curves, and optimizing the output SVG. The process works exceptionally well for logos, icons, and illustrations with clean edges and limited colors. It does not work for photographs or heavily textured images. Start with the highest resolution source available, tune color count and speckle filtering for your specific image, and post-optimize with SVGO.

Ready to vectorize? Try our free PNG to SVG converter — no registration required.