PNG to SVG Tracing, Explained

After reading this you will understand how a tracer turns a grid of pixels into scalable vector paths, when the result stays small and crisp, and when it balloons into a useless mess.

What tracing does

A PNG stores an image as a grid of pixels. A logo saved at 512 by 512 has 262,144 color samples, and if you scale it up to 2048 pixels wide the browser has to invent the missing detail, so edges turn blocky. An SVG stores the same picture as shapes: curves, straight segments and filled regions described by math. Scale an SVG to any size and the curves recompute at full sharpness.

Tracing (also called vectorization) is the process of looking at the pixel grid and fitting outlines around regions of similar color. The tracer groups nearby pixels into a small number of color areas, walks the boundary between areas, then fits smooth curves to that boundary. The output is a set of <path> elements, one filled shape per color region.

Here is the hook. A two-color company logo that weighs 40 KB as a PNG often traces to a 3 KB SVG that renders identically at 16 pixels or 1600 pixels. That is the payoff when the source is flat-color artwork.

When to trace and when not to

Tracing works well when the image is made of large areas of solid color with clean edges. Logos, icons, monochrome line art, flat illustrations and simple maps all trace cleanly.

Tracing works badly on photographs and anything with smooth gradients or fine texture. A photo has thousands of subtly different colors and no clean boundaries. Forcing it into vector paths produces a huge file that still looks like a posterized copy of the original, never like the photo.

If your real goal is a different raster format rather than vectors, use the Image Format Converter instead. If you are starting from iPhone photos, convert them first with the HEIC to JPEG Converter.

The steps inside a tracer

Most tracers, including the one behind this page, run four stages in order.

Color quantization

Reduce the full color set to a small palette of k colors. Every pixel is reassigned to its nearest palette color.

Region labeling

Group adjacent pixels of the same palette color into connected regions.

Edge following

Trace the boundary of each region as a chain of short pixel-step segments.

Curve fitting

Replace the jagged boundary chain with straight lines and Bezier curves that stay within a tolerance of the original edge.

The detail level controls the tolerance in the last stage. A loose tolerance uses fewer, longer curves and produces a smaller file with softer corners. A tight tolerance hugs every jag and produces a larger, more faithful file.

The size math

The output size is driven mostly by the total number of path points, and that number depends on both the color count and the detail tolerance. A rough model:

Here k is the number of palette colors, L_i is the total boundary length in pixels of all regions of color i, and s is the average segment length that the curve fitter allows. A larger tolerance raises s, which lowers the point count. Adding colors adds more boundaries, which raises the sum.

The file size in bytes is close to linear in the point count, because each point costs a handful of characters in the path data string:

where b_0 is fixed overhead (the SVG header and element tags, typically 200 to 400 bytes) and c is the bytes per point, usually 6 to 15 depending on coordinate precision. If a trace produces 800 points at 10 bytes each, expect roughly 300 + 8000 = 8300 bytes before compression.

A worked example with the demo data

Explore the two knobs

The color count and the detail tolerance pull in opposite directions. More colors and tighter detail mean higher fidelity and a bigger file. Fewer colors and looser detail mean a smaller file with softer, blockier shapes.

Reading and judging the result

Open the traced SVG and check three things. First, edge fit: zoom to 400 percent and look for corners rounded off or wavy lines where the source was straight. That signals a tolerance set too loose. Second, color count: if a solid area shows banding or a shape lost its outline, the palette dropped a color you needed. Third, file size: compare the SVG bytes to the source PNG bytes. For clean artwork the SVG should be smaller or comparable.

A useful sanity number is points per kilobyte. If your SVG is 20 KB and 90 percent of that is a single path with tens of thousands of coordinate pairs, the source was probably too complex for tracing and you are storing a bloated approximation.

Common mistakes

The most frequent error is tracing a photo and expecting a small clean vector. It will be large and posterized. The second is setting too many colors on a logo: a two-color mark traced with 16 colors picks up JPEG compression noise as extra tiny regions, adding hundreds of stray paths. Trace a logo with the exact number of colors it actually has.

A third mistake is tracing a low-resolution source. A 32 by 32 favicon has too few pixels for the curve fitter to find clean edges, so corners come out mushy. Start from the largest clean raster you have. If your source is already vector and you only need pixels, you want the reverse direction: use the SVG to PNG Rasterizer.

Related tools

To embed a small traced SVG directly in HTML or CSS without a separate file request, turn it into a data URI with Image to Base64. For everything that stays raster, the format converter and the rasterizer linked above cover the round trips.

Related tools

HEIC to JPEG Converter

Convert iPhone HEIC/HEIF photos to JPEG or PNG.

Image Format Converter

Convert between PNG, JPEG, WebP, AVIF, GIF, BMP, TIFF and ICO.

Image to Base64

Turn images into data URIs and back.

SVG to PNG Rasterizer

Render SVG vector graphics to PNG at any resolution.

EXIF Viewer & Remover

See and strip photo metadata: camera, GPS, dates.

Handwriting Font Maker

Turn your handwriting into a real font: print the template, write, photograph, download a TTF.