Why your traced SVG looks wrong, and what a good source image looks like

Someone traces a logo, gets back something lumpy with specks around it, and starts turning dials. Occasionally that helps. Far more often the problem arrived with the source image, and no setting can put back information that was never in the file.

It is worth being blunt about what tracing is. It looks at where the image changes from artwork to background, follows that boundary, and writes it out as curves. It is a redrawing of what it can see. Give it a clean edge and it draws a clean curve. Give it a soft, compressed, forty-pixel edge and it draws exactly that, faithfully. The finest PNG gives you the finest SVG, and the reverse is just as reliable.

The five things that decide the result

1. Size

This matters more than everything else combined. At 512 pixels across, the edge of a shape is a crisp transition and the traced curve sits exactly on it. At 32 pixels, that same edge is three or four pixels of intermediate grey, and the tracer has to pick a line through the middle of the fuzz. It picks a reasonable one. It cannot pick the right one, because there is no longer a right one recorded in the file.

512px is comfortable. 1024px is better and costs nothing. Below about 128px expect visible softening on curves and corners, and below 32px expect a rough approximation of the shape rather than the shape.

2. The background

A transparent PNG is the best possible source, and by a bigger margin than people expect. When the background is transparent, the artwork is already recorded separately from everything else in the alpha channel — there is no judgement to make about what counts as ink, because the file already says. Colours inside the artwork become irrelevant and every visible pixel is traced.

A solid white background is the next best thing: there is a hard, unambiguous edge to find. A photograph or a gradient behind the artwork is the difficult case, because the tracer has to separate two things that overlap in brightness, and where they genuinely overlap no threshold exists that can do it.

3. Flat colour versus gradients

A gradient has no edge in it. That is the definition of a gradient. Tracing it produces bands — the tracer finds the places where the gradient crosses a threshold and draws a curve there, which is a real answer to the question and not what you wanted.

The same applies to soft drop shadows and outer glows, which trace into a second lumpy shape sitting behind the first. If the shadow is decorative, the honest move is to remove it from the source before tracing and add it back in CSS afterwards, where it will look better anyway.

4. Compression damage

JPG compression destroys exactly what tracing needs. It was designed for photographs, where neighbouring pixels are similar, and it responds to a hard black-to-white edge by softening it and surrounding it with faint ripples. Those ripples are called ringing, and they are why a traced JPG logo often comes back with a scatter of small dots around it — the ringing crossed the ink threshold and got traced as artwork.

Despeckle exists for this and handles it well: it discards any shape smaller than a size you set, and a speck that small was never part of the design. PNG has no such damage at all, being lossless, which is the real reason a PNG source beats a JPG one.

5. Anti-aliasing that has been applied twice

Every screen image has softened edges by design — that is anti-aliasing, and it is what stops diagonal lines looking like staircases. One layer of it is fine and the tracer handles it. The problem is images that have been through it repeatedly: a logo exported at 200px, scaled up to 400px by a page, screenshotted at that size, then saved as a JPG. Each step adds softness to softness, and by the end the edge is a gradient several pixels wide.

What a perfect source looks like

• PNG, 512 to 1024 pixels on its longest side.
• Transparent background, or failing that a solid flat colour clearly different from the artwork.
• Flat colours with hard edges. No gradient, no shadow, no glow, no texture, no bevel.
• Exported once from the original artwork, not screenshotted, not scaled up, not re-saved.
• Cropped to the artwork, without a large empty margin around it.

An icon downloaded from a decent icon set meets every one of these without you doing anything. That is why tracing an icon PNG works so well and tracing a logo pulled off a website often does not.

Where people get their source wrong

Screenshots

A screenshot captures whatever size the logo was displayed at, with the page's own scaling and anti-aliasing baked in, and on a non-retina screen that is often smaller than the file behind it. It is the worst common source. If the logo is on a web page, the file itself is nearly always available: right-click and open the image in a new tab first, and you may find it is four times the size it was being shown at.

Images taken from a website

Often these are genuinely small, because whoever built the site optimised them. Check whether a larger version exists — many sites serve a 2x file for retina screens, usually with @2x in the name, and it is exactly what you want. A site's favicon or app icon is sometimes the largest clean copy available.

Photographs of a logo

A photo of a printed sign or a business card can work, and more often than you would think, because the ink threshold is measured from your image rather than fixed. Where it fails is uneven lighting: a bright patch and a deep shadow in the same photo cannot both be right under one threshold. Shoot it flat and evenly lit, crop tightly to the artwork, and expect to raise despeckle for paper texture.

AI-generated images

These deserve their own treatment, because they look flat and clean and very often are not — soft edges, subtle gradients, faint noise, and half a dozen near-identical shades where you thought there was one colour. There is a full account in turning an AI-generated logo into a real vector.

When no source is good enough

If the original vector file exists anywhere, it beats any trace ever made of it. A trace is a redrawing of a picture of the artwork; the original is the artwork. Asking whoever owns the logo for the SVG, EPS or AI file takes them one export dialog and is a smaller favour than the hour you are about to spend.

Ask specifically. SVG if it is going on a website, PDF if it is going to print, and a large transparent PNG as a fallback. If what comes back is a .cdr or an .eps that nothing on your machine will open, there is a guide for that.

Common questions

Should I convert my JPG to PNG before tracing?

It makes no difference. PNG is lossless, but that means it will faithfully preserve damage that has already happened — you get a perfect copy of a degraded image. Feed the JPG in directly and raise despeckle if you see specks.

Will upscaling the PNG with AI help?

Sometimes, and it is a genuine gamble rather than a free improvement. An AI upscaler invents plausible detail, which for a flat logo can mean cleanly sharpened edges — a real win — or invented wobble in a shape that was meant to be a perfect circle. Trace both and compare. Do not use one on artwork where precision matters, such as a wordmark, without looking hard at the letterforms afterwards.

What resolution is actually enough?

For a simple icon, 256px is fine and 512px is comfortable. For a logo with fine detail or small text in it, aim for 1024px or more, because the text is the first thing to fall apart. There is little benefit past about 2000px — the edges are already as sharp as they are going to be, and tracing simply takes longer.

Why does my traced file have hundreds of tiny shapes?

Usually compression noise or a textured background being traced as artwork. Raise despeckle, which drops everything below a size you set. If it persists, the source probably has a subtle gradient or paper texture across it that is crossing the threshold in patches.

Does a bigger source make a bigger SVG?

Slightly, and much less than you would expect. The output size is driven by how complex the shapes are, not by the pixel dimensions of the input. A 1024px trace of a simple icon and a 256px trace of the same icon produce files of a similar size — the larger one is simply more accurate.