PNG to SVG: How to Vectorize Any Image (and Why Colour Count Is the Whole Game)

You have a logo at 500 pixels wide. You need it on a banner. You scale it up and it turns to mush. This is the oldest problem in graphics, and the fix is not a bigger PNG — it is a different kind of file entirely.

Pixels versus shapes

Vectorizing (or tracing) is the conversion between them. A tracer scans your image, groups similar pixels into regions, and draws a smooth outline around each region. The output is a set of shapes that can be scaled, recoloured, and edited forever.

Why colour count is the setting that matters

Every other slider is a refinement. Colour count changes the entire character of the output, because the tracer creates one layer of shapes per colour. Two colours means two layers. Twenty-four colours means twenty-four stacked layers with far more paths.

The instinct is to crank it to maximum for accuracy. Resist it. More colours means more paths, a bigger file, and a result that is miserable to edit afterwards. Start low and climb only until it looks right — a good logo trace is usually done by eight.

The white background problem

Here is the trap that catches everyone. Your PNG looks like it has a transparent background, but it does not — it has a white rectangle. Trace it, and the tracer faithfully draws that white rectangle as a shape sitting behind your artwork. Drop it on a coloured background later and you get an ugly white box.

Two ways out: turn on transparency before tracing so the flat background colour is knocked out, or trace normally and then tap that white swatch in the palette to delete it from the SVG. The PNG to SVG Vectorizer detects flat backgrounds and switches transparency on automatically, so usually this is handled before you notice it.

A workflow that gets clean results

1. 1Start with the cleanest source you have. Tracing amplifies whatever is already there — if your PNG is small and noisy, run it through the AI Image Upscaler first.
2. 2Pick the image type that matches your artwork. Logo for flat colours, Photograph for gradients, Silhouette for cutting machines.
3. 3Set colours low, then climb. Stop the moment it looks right rather than pushing to maximum.
4. 4Check the background. If there is a white swatch in the palette and you did not want one, remove it.
5. 5Raise speckle removal if you see tiny stray dots. These come from compression noise and become real cut lines on a cutting machine.
6. 6Compare side by side at full zoom before downloading — that is where you catch a lost detail.

Vectorizing AI-generated art

AI image generators produce raster output, usually with soft edges and subtle noise that is invisible until you trace it. Two adjustments help enormously: nudge smoothing up to settle those soft edges into clean curves, and use speckle removal to drop the faint artefacts that would otherwise become dozens of pointless micro-shapes.

If the background is busy rather than flat, cut the subject out first with the Background Remover, then trace. You will get a far cleaner silhouette than any tolerance slider can produce.

After you have the SVG

• ✦Shipping it on a website? Inline SVG is usually smaller than a PNG and stays sharp on every screen. For React, the SVG to JSX Converter turns it into a component.
• ✦Cutting vinyl or card? Use two colours, raise speckle removal, and check every path is closed.
• ✦Still need a raster version? Export the SVG at whatever size you want and compress it — you now have one source file for every size you will ever need.