Image to SVG — trace a logo or icon into flat-colour vector shapes

How to use Image to SVG

1. Choose an image. PNG with a clean background gives the best result.
2. Set Colours (2 to 16). Count the solid colours in your logo, including the background, and use that number.
3. Set Detail (grid size) from 40 to 400 px. This is the longest side of the grid the shapes are drawn on.
4. Press Trace. You get the SVG preview with a download, the palette that was used, and a notice with the grid size and file size.

What it does and when to use it

Use it when you have a small raster logo and need something that scales: a large print, a vinyl cutter, a laser engraver, or a site header that must stay crisp on every screen. A two-colour trace also makes a quick stencil or rubber-stamp outline.

Be clear about what you get. The output is real vector code, but the shapes are made of grid cells, not fitted curves. For a clean, professional logo file, use this as a starting point, then tidy it in a vector editor.

If you only need a bigger PNG of an existing SVG, use SVG to PNG instead. To pick the exact brand colours first, try the image colour picker. For a very busy picture, reduce it to black and white with Image Threshold before tracing.

How it works

Everything runs in a background worker on your device; the image is not uploaded.

1. The picture is decoded, and anything larger than 2,000 px on its long side is scaled down first.
2. It is shrunk to fit inside the Detail grid, keeping its proportions.
3. A median-cut step picks the palette: it keeps splitting the colours into groups until there are as many groups as you asked for, then averages each group.
4. Each grid cell is matched to the nearest palette colour. Runs of the same colour in a row become one rectangle, and all rectangles of a colour are joined into one <path>.
5. The SVG uses shape-rendering="crispEdges" so cell edges do not blur.

Worked examples

These sizes follow from the tool’s grid rule.

• A 1200 × 800 logo at the default Detail 160. The grid is 160 × 107 cells, so the result says “Traced SVG (160 × 107 grid)”. Each cell covers 7.5 original pixels, and the SVG is sized about 1200 × 803 so it keeps the logo’s proportions.
• A two-colour stencil. The same logo with Colours 2 and Detail 300 uses a 300 × 200 grid. You get two paths, usually the ink colour and the background colour, with finer steps on the edges.
• A small icon. A 64 × 64 PNG is never enlarged, so the grid stays 64 × 64. Raising Detail above the image size adds nothing.

Limits and tips

• Anti-aliased edges add in-between colours. If you see odd thin outlines, lower Colours by one.
• A large Detail value on a busy image can make a very large SVG. Check the size in the notice before using it on a web page.
• Gradients and shadows turn into bands. Flatten them in the source if you can.