Image to SVG Converter

What "raster to SVG" really means here

A PNG or JPEG is a raster image: a fixed grid of colored pixels. Zoom in and it goes blurry, because there is no more detail to show. An SVG is a vector image: it describes shapes mathematically, so it stays crisp at any size. Converting one to the other is not a simple file rename — the pixels have to be reinterpreted as shapes. This tool does that with a posterization tracer: it reduces the image to a handful of flat colors and rebuilds it out of small filled rectangles. The result is a stylised, poster-like approximation, not a pixel-perfect copy.

The two algorithms doing the work

Two ideas combine to produce the output, and the sliders control each one directly.

K-means color clustering (the "Colors" slider)

To posterize, the tool first decides which colors to keep. It runs k-means clustering, where k is the number of colors you choose (2 to 6). It samples pixels, picks k starting colors, then repeats a two-step loop up to ten times: assign every sampled pixel to its nearest color (measured as squared distance in red-green-blue space), then move each color to the average of the pixels assigned to it. After a few rounds the colors settle on the most representative tones in your image. With k=2 you get a stark two-tone silhouette; with k=6 you keep more subtlety.

Grid sampling and rectangles (the "Resolution" slider)

The image is then scanned on a grid whose spacing is the Resolution value (2 to 12 pixels). Each grid cell is snapped to the nearest of the k cluster colors and emitted as one <rect> element with that fill. A small step (2 px) captures fine detail but produces thousands of rectangles; a large step (12 px) gives a chunky, mosaic look with a much smaller file.

A worked example

Upload a 1200×800 photo and the tool first scales it down so its longest side is at most 400 pixels — here to 400×267 — to keep the math fast. With Resolution set to 6, it lays a grid roughly 67 cells wide by 45 tall, producing on the order of 3,000 rectangles. With Colors set to 4, every one of those rectangles is painted in one of just four averaged tones. Raise Resolution to 12 and the rectangle count drops to about a quarter, and the reported file size shrinks accordingly — the stats line under the preview shows the exact rectangle count and approximate kilobytes.

When this approach shines — and when it doesn't

• Good for: logos, icons, high-contrast graphics, flat illustrations, and stylised "pop-art" effects where bold blocks of color are the goal.
• Poor for: detailed photographs, smooth gradients, fine text, and anything needing clean curved outlines. Because the output is built from axis-aligned squares, diagonal and curved edges come out stair-stepped.
• Not a true vectorizer: professional tracers like Inkscape's "Trace Bitmap" or Adobe Illustrator's Image Trace fit smooth Bézier paths to edges. This rectangle method is faster and fully in-browser, but the geometry is blockier.

Managing file size

Because every grid cell becomes its own rectangle, the SVG can grow large fast. Two levers keep it in check: raise the Resolution slider to use bigger cells (fewer rectangles), and lower the Colors slider so adjacent cells share a fill. Ironically, a posterized SVG can be bigger than the original PNG for a busy photo — vectors only win on file size when the image is genuinely simple.

Tips for the best result

• Start with a clean, high-contrast source. A subject that already separates clearly from its background clusters into far better colors.
• Tune colors before resolution. Settle the palette first with the Colors slider, then adjust detail with Resolution.
• Use Copy SVG to inspect the markup. The output is plain text you can paste into HTML or edit by hand; Download .svg saves it as a file.
• For print-quality logos, redraw rather than trace. A tracer reproduces what is in the pixels, flaws included; for a true scalable logo, rebuild it as real paths.

Is the image uploaded anywhere?

No. The file is read locally, drawn onto an in-page HTML5 canvas, sampled, clustered, and turned into SVG entirely in your browser. Nothing is sent to a server, so even private images stay on your device, and the conversion still works with your network disconnected.