JPG to SVG

The white box is the reason you are here

A JPG cannot store transparency. There is no mechanism in the format for it — every pixel has a colour and that is all. So a logo saved as a JPG is not a logo on nothing, it is a logo on a solid white rectangle, and that rectangle turns up on your coloured header looking exactly like the mistake it is.

Tracing removes it without anyone having to cut anything out. Only the artwork becomes shapes; the background is not drawn at all, because there is nothing there to draw. Put the traced file on any colour and the colour shows through. That is worth stating plainly because it is the single most common reason a JPG needs converting, and most tools answer it by giving you back the same rectangle in a different container.

Why your logo is a JPG in the first place

Usually because someone sent it in an email, or exported it from a slide, or saved it off a website — and JPG is the default almost everywhere. It is also, for this kind of image, the wrong format.

JPG was designed for photographs, where colour changes gradually across the frame. It achieves its small file sizes by discarding the fine detail that human eyes are least likely to miss in that sort of picture. A logo is the opposite: large flat areas separated by hard edges, which is the one thing the format handles worst. That is why a JPG logo often has faint smudging along its edges, and why the same logo as a PNG is sharp and sometimes smaller.

What compression actually damages

The edges, and almost nothing else. Open areas survive well, because there is nothing there for the compression to get wrong, and the faint noise that does appear across them usually sits far enough from the threshold that it never counts as artwork at all.

The boundary is the problem. A black-to-white edge arrives softened, with a faint halo either side of it. Tracing has to choose a line through that softness, and where it chooses is what decides whether strokes come out slightly heavy or slightly light.

The dots people report around a traced logo are the other half of the same effect: noise that happened to land close enough to count as ink. Minimum shape size discards anything below the size you set, which removes them completely and costs nothing, because a speck four pixels across was never part of the design. It is the setting that earns its place most often on a JPG.

Compression is why your three-colour logo traces as nine

Tracing is set to Full colour by default, which separates the image into its colours and traces each one on its own, so a two-tone logo stays two-tone rather than collapsing into a silhouette. On a JPG that separation has extra work to do, because compression does not leave flat areas flat — it leaves them very nearly flat, in a dozen shades that differ by a point or two.

Colour tolerance is the control for exactly this. It decides how far apart two shades have to be before they count as different colours, so raising it folds all those near-identical greys back into the one grey the designer used. If your logo comes back with a colour list longer than the logo has colours, that slider is the answer rather than the colour cap.

Each colour that survives becomes its own group with its own fill, which is what makes the file editable in Illustrator, Inkscape or Figma. If you would rather have one solid shape, tick “Make the whole thing one colour” after tracing — that way you get the flattened version without having discarded the colours to reach it.

Photographed and scanned artwork

A photograph of a sign, a scan of a letterhead, a picture of a whiteboard — these arrive as JPGs and they trace better than most people expect, because the threshold is measured from your particular image rather than assumed. Otsu's method finds the value that best separates the picture into two groups, so a page with one corner in shadow moves the threshold down instead of turning that corner into ink.

The limit is genuinely uneven lighting. A bright patch and a deep shadow in the same frame cannot both be right under one threshold, because there is only one. When that happens, no setting rescues it and the fix is not a setting: crop tightly to the artwork, or photograph it again more evenly. Cropping solves more of these than every slider combined.

What you cannot get back

A trace is a redrawing of what reached you, not a recovery of what was made. If the JPG has been resized, emailed and resaved a few times, the edges you are tracing are already several steps from the designer's. The result will be clean, scalable and editable — and it will be a faithful trace of a degraded copy.

Converting the JPG to PNG first does not help, and it is worth saying because it sounds as though it should. PNG is lossless, so it will preserve the damage perfectly. Feed the JPG in directly.

So it is always worth asking for the original first. Ask for SVG, PDF or AI, in that order. If what comes back is something that will not open at all, opening a CDR or EPS file covers what does — and if it is an Illustrator file, an .ai file is a PDF underneath and needs no tracing whatsoever.

Using the result

The colours you see are written into the file, so it looks correct the moment you open it and wherever you send it. That is what you want for a logo, and it is also why a theme cannot recolour it: a colour named on the file beats a colour inherited from the block around it.

If you need the opposite — a file with no colour of its own that takes your site's colour on hover and in dark mode — there is a checkbox for it once the artwork is a single colour, and Icon to SVG is the page built around that behaviour. Either way, CSS cannot reach inside an SVG loaded through an img tag, so paste the code into a Custom HTML block rather than uploading it as an image.

The same tracer handles PNG files if that is what you have, and going the other way, SVG to PNG exports at any size with the transparency intact.

Questions people ask

How to use it