PNG to SVG
Convert a PNG or JPG to a real SVG in your browser — outlines traced into vector paths, not your image wrapped in an SVG tag. Keeps every colour as an editable group, scales without blurring. No upload.
- ProcessingOn your device
- Uploaded to a serverNothing
- InternetNot needed
Don't take our word for it. Turn off your Wi‑Fi, then use this tool. It will work exactly the same, which is only possible because your file never goes anywhere.
Worth knowing
Tracing suits flat, single-colour artwork — icons, logos, line drawings, signatures, stamps. A photograph traces into thousands of meaningless shapes, and no setting fixes that.
The result is a redrawing, not a recovery. If the original vector file exists somewhere, it will always be better than a trace of a picture of it.
Detail below about 32 pixels across cannot be traced faithfully, because it was never in the file. Small icons come out slightly softened.
Full colour tracing separates the artwork into its colours and traces each one, 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 editable in Illustrator, Inkscape and Figma. You can recolour any of them here, or flatten the whole thing to one colour afterwards.
WordPress blocks SVG uploads by default, and an SVG placed with an <img> tag cannot be recoloured by CSS. Paste the code into a Custom HTML block instead.
Most PNG to SVG converters do not convert anything
This is worth checking before you trust any of them, including this one. Open the SVG you were given in a text editor. If what you see is a short file containing a very long run of letters and numbers beginning iVBORw0KGgo, you have been handed your own PNG in an SVG costume — the same pixels, at the same resolution, inside a wrapper.
It passes every casual test. The file ends in .svg, it opens, it looks right. It also blurs the moment you enlarge it, because there is nothing in it but the pixels you started with, and it cannot be recoloured, because there is no shape to fill. Those are the two reasons anyone wants an SVG in the first place.
A traced SVG contains coordinates. Open one and you will see path data — long strings of numbers describing curves. That is geometry, and geometry can be drawn at any size and filled with any colour.
Full colour is the default, and usually the right one
Tracing set to Full colour separates your image into its actual colours first and traces each one on its own. A crest keeps its gold as well as its navy. A two-tone wordmark stays two-tone. This matters more than it sounds, because the alternative — judging every pixel against a single brightness threshold — puts a gold laurel and a navy shield on the same side of the line, so whichever way you move the slider one of them disappears.
Each colour comes back as its own group in the file, with its own fill. That is what makes the result genuinely editable: open it in Illustrator, Inkscape or Figma and you can click the gold and change the gold, without touching anything else. It is also why the file is bigger than a one-colour trace, and worth it for anything where the colours are part of the design.
The controls, and which of them earn their place
Colours caps how many the trace is allowed to use. It is a ceiling rather than a quota — a four-colour crest comes back as four layers even with the cap at eight, because colours holding a negligible share of the image are dropped rather than padded out.
Colour tolerance decides which shades count as the same colour. Low keeps a navy and a near-black apart; high folds them together. This is the setting to raise when a logo you know has three colours comes back with nine, which happens constantly with images that have been compressed or generated rather than exported.
Minimum shape size discards anything smaller than the size you set, which removes compression specks. It is also the first setting to lower if fine outlines or small type are vanishing — those are small shapes too, and the filter cannot tell the difference. Smoothness fits longer curves through each outline: raise it for a wobbly edge, lower it if corners are being rounded off.
Ignore the background colour is on by default, which is why a logo on white comes back with nothing behind it. Turn it off on the rare occasion the background is genuinely part of the artwork.
One colour, when that is what you want
Switching Tracing to one colour reduces the image to artwork and background — every pixel judged against a threshold, nothing in between — then follows the boundary between them. The threshold is measured from your image using Otsu's method, which finds the value that best separates it into two groups, rather than assumed. It is still a slider, because the measurement is a good starting point and not always the right answer.
Transparent PNGs are read differently and automatically. When the background is transparent, the transparency describes the shape and brightness is irrelevant — which matters, because a white logo on transparency is invisible to anything looking at brightness alone. That is a common way to be handed an empty file.
You can also trace in full colour and tick “Make the whole thing one colour” afterwards. That gets you the flattened result without having thrown the colours away to reach it, so you can change your mind without re-tracing.
The colour is written into the file
Pick a colour before you download and the file is saved in it. Open it on its own and it looks right, drop it into a document and it looks right, send it to someone and it looks right. For a logo that is exactly what you want — nobody should be able to turn your brand mark pink by accident.
It is also the reason such a file cannot be recoloured by a theme. A colour named on the file beats a colour inherited from the block around it, so the moment your SVG has an opinion, your site loses the argument. There is a checkbox to write no colour at all if you want inheritance instead — and if that is the whole reason you came, Icon to SVG is built for it: one shape, no colour named anywhere, and your theme decides.
One condition catches nearly everybody either way. CSS cannot reach inside a file loaded through an img tag, so an SVG uploaded to the media library and inserted as an image will not recolour no matter what your stylesheet says. Paste the code into a Custom HTML block instead — the five reasons an SVG will not change colour goes through the rest.
What traces well
Flat artwork with hard edges: icons, logos, line drawings, signatures, stamps. Bigger is better — 512 pixels is comfortable, 1024 is better, and below about 128 the edges arrive as soft grey that the tracer has to guess a line through. Transparent beats white, and white beats a photograph behind the artwork.
A photograph traces into thousands of overlapping blobs that are larger than the photograph was and look worse, and no setting fixes that — there are no boundaries in a photograph to follow. If your result is disappointing, the source is a more likely cause than the settings: what a good source image looks like covers what to check.
Where a trace is the wrong tool
If the original vector file exists anywhere, get that instead. A trace is a redrawing of a picture of a logo, and it will never beat the logo. Ask for SVG, PDF or AI — and if you have been sent something that will not open at all, opening a CDR or EPS file covers what actually does.
If you already have an Illustrator file, there is no need to trace anything — an .ai file is a PDF underneath and converts directly. And going the other way, when what you need is an image rather than a vector, SVG to PNG exports at any size and keeps the transparency.
Questions people ask
Is this a real vector, or just my PNG inside an SVG?
A real vector. Most converters returned by searching for this write your PNG into the SVG as an embedded image, which looks like a conversion and is not one — it is the same pixels, it still blurs when enlarged, and CSS cannot recolour it because there is no shape to fill. This follows the outlines of your artwork and writes them out as path data. Open the file in a text editor: you should see coordinates, not a long run of base64.
How do I change the colour once it is on my site?
Pick the colour before you download and the file is written in it, so it looks right the moment you open it. To recolour it from CSS instead, the SVG has to be inline in the page — pasted into a Custom HTML block, for example — and then a rule like svg { fill: currentColor } takes over, because a stylesheet rule outranks the colour written on the element. What cannot work is an SVG loaded through an img tag: CSS cannot reach inside a separately-loaded file, so it keeps the colour it was saved with.
Why will WordPress not let me upload the SVG?
WordPress blocks SVG uploads by default, for a real reason: an SVG is code and can carry a script. Yours cannot, because it was built here from path data and contains nothing but shapes. The simplest route is not to upload it at all — paste the code into a Custom HTML block, which also happens to be the version that can be recoloured. If you need it in a menu or a widget, a plugin that permits and inlines SVGs will do it.
My colourful icon traced into a mess. What now?
It was probably traced in one-colour mode. A single brightness threshold puts a gold laurel and a navy shield on the same side of the line, so whichever way you move it one of them vanishes. Leave Tracing set to Full colour: the image is separated into its colours first and each is traced on its own, so both survive. If you still want a one-colour version, tick “Make the whole thing one colour” after tracing — that way you get the flattened result without having thrown the colours away to get it.
My traced icon looks lumpy. What should I change?
Raise Despeckle first — it removes stray specks, which are usually JPEG compression rather than artwork. Then raise Smoothing, which fits longer curves through the outline. If the edges look eaten away or the background is bleeding in, the ink threshold is the setting to move: it decides what counts as artwork, and it is the one thing worth adjusting by eye.
Nothing appeared, or the whole square went black.
Almost always a white or light-coloured icon. Tick ‘Light artwork on dark’, or set ‘Read artwork from’ to Transparency if your PNG has a transparent background. Detection handles most files on its own, but an icon that is mid-grey on a mid-grey background genuinely is ambiguous and needs telling.
Can I trace a photograph?
You can, and you should not. A photograph has no outlines to follow, so it traces into thousands of overlapping blobs that are larger than the photo was and look worse. Tracing is for artwork that was flat to begin with.
Is my image uploaded anywhere?
No. The tracer runs in your browser, including the Potrace engine itself, which is compiled to WebAssembly and shipped with the page. Once the page has loaded, tracing works with your network disconnected — which matters when the file is a logo nobody has announced yet.
How to use it
PDFs and AI · 21 August 2026 · 7 min
Turning an AI-generated logo into a real vector file
Every AI image generator hands you a PNG, and a PNG is not a logo file. Here is why they cannot give you vectors, how to prompt for an image that traces well, and what the result honestly will and will not be.
How-to guides · 21 August 2026 · 8 min
PNG to SVG, JPG to SVG, or Icon to SVG: which one you actually want
Three tools, one tracing engine, three different answers to the same question about colour. The choice is not about what you are uploading — it is about what the file has to do once it is on your site.