Free tool
Image to SVG: Trace a Logo, Icon or Drawing into Vector Shapes
Turn a flat picture into scalable shapes you can resize without blur. Tell the tool what kind of picture it is, set how many colours to keep, and watch the SVG update beside the original.
Colours in the SVG
Click a colour to change it, or the cross to take that colour out.
Settings
The picture is traced in your browser and is never uploaded. Your trace settings are saved on your own device.
The logo that only exists as a small PNG
A client sends a logo as a small PNG and wants it on a banner, a shop window or a website header. Scaled up, the pixels turn to blur. A vector version redraws itself crisp at any size, which is why designers trace a picture into shapes when no original file can be found.
Drop a picture on the page, click to choose one, or paste it. Four input types work here: PNG, JPG, WebP and HEIC. The original and the traced result sit side by side, and the result refreshes shortly after each change. Very large pictures are traced at a reduced size, 2000 pixels on the long side, which keeps the work quick.
Settings that change the result
| Setting | Choices | Effect |
|---|---|---|
| What is in the picture | Logo or icon, Drawing or illustration, Photo, Black and white | Loads a set of defaults suited to that kind of picture |
| Lines | Outlines, Smooth curves, Straight lines | How edges are drawn |
| Colours | Auto, or a number from 2 to 64 | How many fills the result uses |
| Dark enough to be black | A slider | The cut-off in Black and white mode |
| Drop specks | A size in pixels | Removes tiny stray shapes |
| Shapes | Stacked, or Cut out | Smaller shapes on top, or no overlaps |
Start with the picture type, then adjust only the setting that fixes what you see wrong.
Editing colours and the background
Below the result is a list of the colours in the SVG. Click a colour to change it, or the cross beside it to take that colour out. This is the fastest way to turn a muddy second shade into your brand colour, or to remove a leftover grey.
The Make the background transparent box fills from the edges, like a magic wand. That is the usual route to a logo that sits cleanly on any page colour. It works best when the background is a single flat colour.
What you can save
- Download the SVG gives a vector file that keeps the picture's own dimensions.
- Copy SVG code puts the markup on your clipboard, which is useful for pasting into a page or component.
- PDF makes one page the size of the picture, with each shape drawn as a vector.
- PNG, twice the size exports a sharper raster copy.
A summary line tells you how many shapes and colours the result has, its file size and how long tracing took. A very high shape count means the picture was too detailed for this approach, and the file may be heavier than you expect.
Where tracing stops being the right tool
Tracing suits flat artwork with clear edges. A photograph has millions of colour shifts, so a trace of one becomes a huge pile of shapes that looks like a painting and weighs more than the photo. The Photo option exists, but treat it as an effect, not a replacement for the picture.
- Start from the largest, cleanest source you have.
- Choose fewer colours for a logo, since brand marks rarely need many.
- Check the edges at a large zoom before you hand the file over.
If a brand mark needs to be redrawn properly for a new site, that is part of the work in our web design and UI/UX service.
Handing the file to a developer
Name the file clearly and say which colours it uses. A developer will often change the fill with a style rule, so fewer colours and clean shapes make that easier. If you copy the SVG code, paste it into a plain text file first and open it in a browser to check it before it goes anywhere else.
Frequently asked questions
How do I convert a PNG to SVG?
Drop the PNG on the page, choose Logo or icon, and adjust the colours. When the traced shapes look right, press Download the SVG.
Why does my traced logo look rough?
A small or blurry source gives the tracer little to work with. Try fewer colours, switch between Smooth curves and Straight lines, or start from a larger copy.
Can I make the background transparent?
Yes. Tick Make the background transparent. It fills from the edges, so it works best on a plain single-colour background.
Can I change a colour after tracing?
Yes. Click the colour in the list under the result and choose another, or remove it with the cross.
Does it work for photos?
It will run, but the result is a painted look with many shapes. Tracing is meant for logos, icons and flat drawings.
Is my picture uploaded?
No. The tracing runs in your browser.
More free tools
- SVG to PNG converter: Export SVG files as PNG at a width from 16 to 8000 pixels, one or many at a time.
- SVG to JPG converter: Draw SVG files as JPG at a chosen width, with a quality setting and a background colour.
- Favicon generator: Turn letters, an emoji or a logo into a favicon.ico, PNG sizes and a manifest, with live previews.
- Image to Base64: Encode pictures as Base64 data URLs, CSS backgrounds, img tags, Markdown or JSON.
- image resizer: Resize pictures by pixels or percent with fit, crop or stretch, presets and file type choices.