How to Prepare a PNG Logo for SVG Tracing

What tracing can and cannot do

A raster image is a grid of coloured pixels. A vector image is a set of mathematical shapes. Tracing bridges the two by examining the pixel grid, grouping adjacent pixels of similar colour into regions, and fitting curves around the boundaries of those regions. The result is a genuine vector file that scales cleanly, which is the whole point.

What it is not is recovery. The original logo was probably drawn in vector software as a small number of deliberate shapes, with text set in a specific typeface. The tracer never sees any of that. It sees pixels and produces its best geometric approximation of what it sees. Curves that were mathematically perfect in the source become sequences of fitted segments. Text becomes outlined shapes, not editable text in a font.

This distinction has practical consequences. A traced logo can be recoloured, scaled to any size, and used where a vector is required. It usually cannot be cleanly edited the way the designer's original could, because the editable structure — named layers, live text, reusable components — was never in the pixels to begin with.

Choose a source that tracing can explain

Start with the largest clean PNG available. Crop empty space, keep the background simple, and remove accidental specks in an editor if they are not part of the design. Strong boundaries between a mark and its background give the tracer clearer regions.

Do not assume more input pixels always mean a better SVG. Blur, JPEG halos inside a PNG, and antialiased text can become extra paths. An official SVG, PDF, EPS, or design file is always preferable to retracing a brand asset.

The JPEG-halo problem deserves a warning of its own because it is so common and so invisible. If a logo was ever saved as a JPG at any point in its history — emailed, downloaded from a webpage, pulled out of a slide deck — the compression left faint rings and blocks of off-colour pixels around every sharp edge. Saving that file as a PNG afterwards preserves the damage perfectly; PNG is lossless, so it faithfully stores the artifacts. The tracer then sees those rings as real colour regions and dutifully draws paths around them.

The practical test is to open the file and zoom to 400% on a sharp edge. If you see clean pixels stepping from one colour to another, the source is usable. If you see a halo of intermediate colours and faint square blocks, the source has been through JPEG and will trace poorly. Find a better copy.

Clean the source before you trace it

Ten minutes in an image editor beats an hour of fighting the tracer's settings. Crop the canvas tight to the mark so the tracer is not analysing empty space. Delete stray pixels, watermarks, and drop shadows — a shadow is a soft gradient and tracing will turn it into a stack of nested shapes.

Flatten the mark to the smallest number of distinct colours that still represents the design. If the logo is genuinely two colours, make sure it contains exactly two colours plus transparency, not two colours plus four hundred antialiasing intermediates. Many editors have a posterise or indexed-colour mode that does this in one step. The tracer's colour-precision control does something similar, but doing it deliberately in an editor gives you a chance to look at the result first.

If the mark sits on a background you do not want, remove the background rather than hoping the tracer will ignore it. A white background is a colour region like any other, and in colour mode the tracer will happily produce a large white rectangle behind your logo.

Use the controls deliberately

Colour mode builds coloured regions; binary mode is suitable for silhouettes and single-colour marks. The speckle setting removes isolated regions below a pixel-area threshold. Higher colour precision retains closer colour distinctions but may increase the number of shapes.

PixelConvert passes both speckle and colour-precision values to vtracer. Begin at the defaults, inspect the output, and change one control at a time so you know which setting affected the result.

Speckle filtering is the control to reach for first when the output looks noisy. It discards any traced region smaller than the threshold you set, which removes the scattered one-and-two-pixel islands that antialiasing produces. Raise it gradually. Too high and it starts eating genuine small details — the dot on an i, a thin separator line, the counter inside a letter.

Colour precision is the control that decides how eagerly the tracer treats two similar colours as the same region. Lower precision merges more aggressively and produces fewer, simpler shapes. Higher precision preserves subtle distinctions and produces more shapes. For a flat two-colour logo, lower precision is almost always right. For artwork with intentional gradients, higher precision preserves them at the cost of a much heavier file.

Binary mode deserves more use than it gets. If your mark is genuinely one colour on a transparent or single-colour background, binary mode sidesteps the entire colour-region problem and usually produces a dramatically cleaner result than colour mode does. You can recolour the resulting single path trivially afterwards.

Inspect paths, not only the thumbnail

Open the SVG in a browser at several zoom levels. Look for rough corners, holes in letters, stray islands, or changed brand colours. A thumbnail can hide path problems that become obvious on signage or print.

Work through a specific checklist rather than glancing at it. Corners: are the sharp corners of the original still sharp, or have they been rounded into curves? Counters: are the enclosed spaces in letters like a, e, o, and g still open, or have they filled in? Straight lines: are the edges that should be straight actually straight, or are they subtly wavy? Colour: does the traced fill match the brand colour exactly, or has it shifted by a few values?

Then check at the size the logo will actually be used. A traced mark that looks acceptable at 200 pixels on screen can look visibly wrong at 2 metres on a banner, because scaling is exactly what vectors do and every approximation scales up with the artwork.

Keep the source PNG and record the tracing settings. For brand-critical publishing, have a designer check the approximation or obtain the official vector artwork.

When tracing is the wrong answer

Photographs should stay raster. Tracing a photograph produces thousands of paths, a file frequently larger than the original image, and a result that looks like a poster-print filter rather than a photograph. If someone has asked for a vector version of a photo, the honest answer is usually that they want a high-resolution raster instead, or a deliberately stylised illustration that a person draws.

Marks with gradients, soft shadows, glows, or transparency effects trace badly for the same reason: these are continuous tonal transitions, and vector regions are discrete. The tracer approximates a smooth gradient as a series of banded shapes, which looks worse than the original at every size.

Very small sources trace badly regardless of settings. A 64-pixel favicon does not contain enough information to reconstruct the shape it was made from. Scaling it up before tracing does not add information — it adds interpolated pixels that the tracer will faithfully turn into wobbly paths.

And the case that matters most commercially: if the logo belongs to someone else, tracing it does not give you a licence to use it. Reproducing a brand mark is a legal question about permission, not a technical question about file formats, and a traced copy is still a copy.

Where to find the real vector first

Before tracing anything, spend five minutes looking for the original. Most organisations of any size publish a brand or press kit containing logo files in SVG, EPS, PDF, or AI format. Searching for the organisation's name together with words like brand assets, press kit, or media kit finds these surprisingly often.

If the logo appears on a website, check whether the site is already serving it as an SVG — many are. Viewing the page source or inspecting the image element will show the file type immediately, and if it is an SVG you can save it directly and skip tracing entirely.

For a logo someone sent you, ask them for the vector before assuming it does not exist. Marketing departments and design agencies keep these files; the person who emailed you a PNG from a slide usually just grabbed the most convenient copy.