PNG to SVG: How Image Tracing Works and When It’s Worth It

A PNG is a grid of colored squares. An SVG is a set of instructions: draw a curve from here to there, then fill this shape with that color. Converting one into the other is less a format change than a redrawing job.

That is why the same PNG to SVG conversion can give you a crisp logo one minute and a blotchy mess the next. The software is not translating pixels one by one. It is guessing where the edges are and rebuilding them as shapes.

Once you understand that guess, it gets much easier to pick the right images, choose sensible settings, and notice when tracing is the wrong tool altogether.

Pixels versus paths

PNG is a raster format. Every pixel stores a color, and the image has a fixed width and height. Scale a small PNG logo up for a banner and the software has to invent the missing pixels, which is where soft, blurry edges come from.

SVG, short for Scalable Vector Graphics, is an XML-based format standardized by the W3C. Instead of pixels, it describes points, lines, Bézier curves and fills. A browser or design app redraws those shapes at whatever size you ask for, so an edge stays sharp on a favicon and on a trade-show banner alike.

Because SVG is plain text, it is also easy to work with on the web. You can change a fill color with CSS, compress the file with gzip, or open it in a code editor and read exactly what is inside.

What tracing actually does

When you turn a PNG into an SVG, a tracing algorithm looks for the boundaries between areas of color. It follows each boundary, smooths the stair-stepped pixel edge into curves, and saves the result as a closed path with a fill.

Potrace, the open-source tracer written by Peter Selinger, is a well-known example and powers the Trace Bitmap feature in Inkscape. Adobe Illustrator has its own version, called Image Trace. Browser-based tools follow the same basic idea, often compiled to WebAssembly so the work runs on your own device.

For color images, most tracers first reduce the picture to a limited set of colors, a step known as color quantization. Each color then becomes its own group of shapes, stacked so the result resembles the original.

One warning: not every so-called converter traces anything. Some simply wrap the original PNG inside an SVG file using an image element. The file ends in .svg, but there are still pixels inside, and it will blur when scaled just like the PNG did.

A quick check is to open the result in a text editor. If you see a long base64 string instead of path data, nothing was vectorized.

Images that trace well, and images that don’t

Tracing rewards simplicity. Logos, icons, line art, signatures, stamps, silhouettes and flat illustrations usually come out clean, because they have hard edges and only a handful of colors.

Photos are a different story. Soft gradients, skin tones, shadows and fine texture get broken into thousands of tiny shapes. The SVG can end up larger than the original PNG and still look like a posterized print rather than a photograph.

Source quality matters too. A logo saved at 200 pixels wide with heavy compression artifacts gives the tracer very little to work with. If a larger or cleaner version exists anywhere, start there, because the extra resolution helps the algorithm find true edges instead of noise.

If all you need is a sharp icon and you have no artwork of your own, it is often quicker to start from a library that already ships SVG files. Our roundup of free icon libraries and illustration kits lists several good places to look.

Getting PNG to SVG with color right

Color is where most traces go wrong. Ask for too many colors and you get noisy edges, halos and stray slivers along every boundary. Ask for too few and gradients collapse into flat bands.

Start by counting the colors the artwork really uses. A two-color logo should be traced with two colors plus transparency, not sixteen. Raise the number only when a section visibly loses detail.

Anti-aliasing is the usual culprit behind halos. The soft pixels on an edge are blends of the shape color and the background, and a tracer may treat them as a color of their own. Lowering color detail, or increasing the minimum shape size, tends to absorb them.

After tracing, compare the fills with the original values. Quantization can nudge a brand red by a few points, so it is worth correcting the hex codes by hand. If you don’t know the originals, a color palette extractor can read the dominant colors from the source image for you.

Preparing the PNG before you convert

A few minutes of preparation often does more than any slider. Crop away everything that is not part of the artwork, since borders, shadows and stray marks all become shapes too.

Transparent or plain backgrounds help. A white background is usually traced as one large white shape behind your logo, which you then have to delete before the SVG can sit on a colored page.

For line art scanned from paper, raise the contrast until the lines are close to pure black and the paper close to pure white. Otherwise the gray texture of the paper turns into a field of speckles.

Choosing a free PNG to SVG converter

There are plenty of ways to go from PNG to SVG free of charge. Inkscape is free, open-source desktop software with a capable Trace Bitmap dialog. Online tools are faster for one-off jobs, but they differ a lot in how they handle your file.

Before you upload artwork, check where the processing happens. Many web converters send your image to a server, which may be fine for a public logo and less so for unreleased client work.

Our own PNG to SVG converter runs the tracing in your browser with WebAssembly, so the image is never uploaded. It accepts PNG or JPG files up to 4000 × 4000 pixels, with a color detail slider for simpler output and a setting that removes small specks when a result looks grainy.

Whichever PNG to SVG converter you pick, free or paid, judge it by the output rather than the promise. Zoom in on curves and corners, confirm that the shapes are real paths, and keep an eye on file size.

Cleaning up the SVG afterwards

Even a good trace benefits from a quick tidy. Open the SVG in a vector editor and delete any leftover background shape first.

Then look for tiny fragments, especially in corners and inside letters. Removing them by hand, or using a simplify command to reduce the number of nodes, makes the file lighter and the curves smoother.

Text deserves special attention. Traced letters are shapes, not editable type, and small lettering often comes out lumpy. If you know the typeface, it is usually better to retype the words in that font and convert them to outlines.

Finally, run the file through an optimizer such as SVGO, which strips editor metadata and trims unnecessary precision from coordinates. It is a small step, but it adds up for icons used across a whole website.

When tracing is the wrong answer

If you want to turn a PNG into an SVG only because a printer or a developer asked for vector files, ask what they actually need. A photo for a brochure is better supplied as a high-resolution raster image.

Cutting machines and laser cutters do need clean vector paths, so tracing makes sense there. Simpler is still better, because fewer colors mean fewer layers to cut or engrave.

And when a logo really matters, such as a company mark headed for signage, vehicles and merchandise, an automatic trace is a starting point rather than a finished asset. Redrawing it with a pen tool, using the trace as a guide, still gives the cleanest result.

Used within those limits, tracing is one of the handiest small tricks in a designer’s kit. Pick simple artwork, keep the colors few, check what you got, and the SVG will stay sharp at any size you need.