Image to SVG

What it's for

Turn a bitmap picture (PNG, JPEG, WebP and so on) into an SVG: a vector file of flat coloured shapes that can be scaled to any size without going blurry. It works best on logos, icons, drawings and simple graphics, and gives a stylised, posterised look to photographs.

For example, when you only have a small PNG of a logo and want a version for a banner or a cutting machine, trace it with 16 colours and save the SVG.

How to use it

Choose a picture (or drop or paste one). It’s traced as soon as you change a setting.

• Colours is how many flat colours to use; they’re the picture’s main colours, found the way Image Palette finds them.
• Detail sets how closely curves follow edges: low is smoother with fewer points, high is closer but bigger.
• Drop shapes smaller than ignores specks with fewer points than that; Smoothing blurs the picture first to clear noise.
• Trace at most this many pixels across shrinks a big picture first, which is quicker and gives a smaller file.
• Tidy the SVG runs the result through SVGO, which usually makes it smaller.

Save SVG saves the file; Copy SVG code copies its text. The settings are remembered.

Example

Choose a logo or drawing with a few flat colours, then set:

Colours: 8 · Detail: Medium · Drop shapes smaller than: 8 · Tidy the SVG: ticked

You see the traced shapes below, and a message such as 600 × 450 pixels traced into 14.2 KB of SVG.

Good to know

Tracing is an approximation: the result is made of flat colours, so gradients become bands and fine detail, soft shadows and small text are lost or blobby. Photographs make large files that look posterised. Transparent areas are filled with white. Large pictures are shrunk before tracing, up to the size you choose. Check the result before you rely on it, for example for printing or cutting. The picture doesn’t leave your browser.