PNG to SVG, JPG to SVG, or Icon to SVG: which one you actually want

All three tools take a PNG or a JPG and hand back a genuine vector — outlines followed and written out as path data, not your image wrapped in an SVG tag. All three accept both formats. So picking by what is in your downloads folder is the obvious approach and the wrong one.

What separates them is what happens to colour, and colour is where these conversions succeed or fail.

The short answer

• An interface icon that should take its colour from your site — a menu icon, a feature bullet, a social link. Use Icon to SVG.
• A logo, crest or illustration whose colours are part of the design. Use PNG to SVG in full colour mode.
• A logo that arrived as a JPG and is sitting on a white rectangle you need to get rid of. Use JPG to SVG.

If that settles it, the rest of this is optional. If you are between two of them, the difference is worth five minutes.

Feature by feature

All three share the tracer, so everything in this first group is true of every one of them:

• Real path data — coordinates and curves, not your image wrapped in an SVG tag.
• PNG, JPG, GIF, BMP and WebP in, up to 20MB.
• Transparent background out. The artwork becomes shapes and nothing else is drawn.
• Entirely in your browser. The Potrace engine is compiled to WebAssembly and ships with the page, so tracing works with the network disconnected.
• The threshold is measured from your image rather than fixed, using Otsu's method.

Icon to SVG

• One shape, always pure black, with no colour named anywhere in the file.
• Written as fill="currentColor", so your site sets the colour — hover states and dark mode included.
• No colour picker and no settings on show. Two controls behind a "Not coming out right?" disclosure for the icon that comes out too heavy or too thin.
• Holes are kept when the source is transparent, so an outline icon stays an outline instead of filling in solid.
• Typically under a kilobyte.

PNG to SVG and JPG to SVG

These two are the same tool with different prose around them, so their features are identical:

• Full colour tracing by default. The image is separated into its colours and each is traced on its own.
• Every colour becomes its own group with its own fill — editable in Illustrator, Inkscape or Figma, and recolourable one at a time on the page before you download.
• Five colour controls: Colours (the cap), Colour tolerance (which shades count as the same colour), Minimum shape size, Smoothness, and whether to ignore the background colour.
• A one-colour mode with its own controls: ink threshold, whether to preserve detail or produce a single silhouette, and whether to read the artwork from transparency or from darkness.
• "Make the whole thing one colour" flattens a colour trace afterwards, so you can change your mind without re-tracing.
• The colour you pick is written into the file. A checkbox writes none instead, if you want the page to set it — available once the artwork is a single colour.
• Shapes, points, viewBox and file size are reported, so you can see what you got.

Icon to SVG: for anything your site should colour

This one produces a black silhouette that names no colour anywhere in the file, and it does that on purpose. A colour written into an SVG overrides the colour a theme is trying to apply to it, so a file with an opinion about its own colour is a file your site cannot recolour. Removing the opinion is the entire trick.

The result works with Elementor's icon colour control, with hover states, with dark mode, and with any CSS you write yourself. It has no settings to speak of and no colour picker, which is not minimalism — a colour picker on this tool would produce files that fail at the job.

Colour in your original is discarded. A three-colour icon becomes one shape. For an interface icon that is correct; for a logo it is destruction.

PNG to SVG: for artwork that owns its colours

This one separates the image into its actual colours first and traces each one on its own, so a crest keeps its gold as well as its navy. Every colour becomes its own group with an editable fill, which is what makes the file properly editable in Illustrator, Inkscape or Figma — click the gold, change the gold.

It also has the controls artwork needs: a cap on how many colours, a tolerance for how far apart two shades must be to count as different, a minimum shape size, smoothing, and a separate one-colour mode with its own threshold. Eleven controls across the two modes — right for a logo you are going to live with, and hostile to someone who wants a menu icon in ten seconds.

The trade-off is the one above, stated from the other side: a file that names its colours is a file that renders correctly anywhere and cannot be recoloured by a theme. For a logo, that is what you want. Nobody should be able to accidentally turn your brand mark pink.

JPG to SVG: the same engine, one specific rescue

Underneath, this is PNG to SVG. It exists as its own page because the JPG case has a distinct problem and a distinct payoff.

The problem: JPG compression damages hard edges specifically, which is exactly where tracing looks. It was built for photographs, where everything changes gradually, and a black-to-white edge is its worst case. Expect faint ringing around the outlines, which lands as scattered specks in the trace, and expect strokes to come out a fraction heavy or light depending on where the threshold falls.

The payoff: a JPG cannot store transparency, so every logo saved as one sits on a solid rectangle. Tracing only draws the artwork — the background is never drawn at all — so the white box disappears completely rather than being cut out. Dropping the traced file onto a coloured header just works.

Why not one tool with a switch

It was one tool. The honest account is that it grew to eleven controls, and then it turned out the colour question has two opposite right answers depending on what the file is for. One page cannot both write your colour into the file and refuse to write any colour into the file. A dropdown offering the choice sounds reasonable and puts the single most consequential decision in front of someone who has no way to know which answer they need.

Splitting them means each page can be explicit about what it is for. It also means the prose on each answers a different question, so they are not competing with each other.

The thing all three depend on

The source image, more than any setting on any of the pages. Tracing follows edges that exist in the file; it cannot follow edges that are not there. The finest PNG you can find gives the finest SVG — and a 40-pixel screenshot of a logo gives a 40-pixel screenshot's worth of vector, whichever tool you feed it to.

In short: bigger is better, transparent is better than white, white is better than a background, flat colour is better than gradients, and PNG is better than JPG. Why your traced SVG looks wrong goes through each of those and what to do when you cannot get a better source.

Common questions

Can I put a JPG into PNG to SVG?

Yes. All three accept PNG, JPG, GIF, BMP and WebP. The names describe the common case rather than a restriction, and the tracer reads all of them the same way once they are decoded.

Which one gives the smallest file?

Icon to SVG, usually by a wide margin — a traced icon is often under a kilobyte, because it is one shape with no colour information. A full-colour trace of a detailed crest can reach tens of kilobytes, which is still smaller than the PNG and is doing considerably more.

I used the wrong one. Do I start over?

Just drop the original image into the other tool. Nothing is stored, nothing is queued, and tracing takes a second or two. There is no cost to trying both and comparing.

Can any of them trace a photograph?

They will all accept one and none of them should. A photograph has no outlines to follow, so it traces into thousands of overlapping blobs — a file larger than the photo, that looks worse than the photo. Tracing is for artwork that was flat to begin with.

What is the flatten option for?

It turns a finished colour trace into a single shape without re-tracing. Useful when you wanted one colour but were not sure — trace in full colour, look at it, then flatten. Because the colours were separated first, the result is usually better than a one-colour trace of the same image, which had to make the artwork-or-background decision with a single brightness threshold and no knowledge of the colours.

Which one keeps my logo's colours?

PNG to SVG or JPG to SVG, both of which trace in full colour by default. Icon to SVG discards colour by design — it exists to produce a file with no colour in it. If you have already used it and want the colours back, re-trace the original in one of the other two; nothing was stored, so it costs you a few seconds.

Which one for a scanned signature?

Icon to SVG. A signature is one colour, wants a transparent background, and is far more useful when your document's text colour applies to it. If you only need to sign a PDF rather than put the signature on a website, Sign PDF draws it directly onto the page and skips the conversion entirely.

Do any of them upload my file?

No. The tracing engine is compiled to WebAssembly and shipped with the page, so all three run entirely in your browser and keep working with the network disconnected.