Image to SVG

About turning an image into an SVG

A PNG is a grid of pixels. Blow it up and you get bigger pixels. An SVG is a set of shapes described with maths, so it stays crisp at any size — on a business card, on a billboard, on a screen that does not exist yet.

The problem is that you rarely have the SVG. You have a logo somebody emailed you as a 400 px PNG, and now it needs to go on a sign.

This tool traces the picture into shapes. It finds the edges between colours and draws real vector paths along them, so what you get out is a proper SVG you can scale, recolour and open in any design program.

What tracing can and cannot do

Tracing is not recovering the original file. It is drawing around what it can see, and the result depends entirely on what you feed it.

It works well on:

• Logos and wordmarks with flat colours
• Icons, symbols and pictograms
• Line drawings, sketches and inked art
• Diagrams, maps and floor plans
• Stencils, silhouettes and stamps

It does not work on photographs. A photo has no clean edges between colours — it has millions of gradual ones. Tracing turns that into thousands of tiny coloured blobs: technically an SVG, usually *larger* than the photo it came from, and no use for anything. The tool spots a likely photo and says so rather than handing you a 12 MB file that looks like spilled paint.

The settings

Start by telling it what the image is — Logo or icon, Line drawing or Detailed art. Each just sets the three sliders to a sensible starting point, and then you can adjust.

• Number of colours is the one that matters most. Tracing works by reducing the picture to a small palette and drawing around each region. A two-colour logo traced with 8 colours picks up anti-aliasing fringe as extra shapes; traced with 2 it comes out clean. Fewer colours is almost always better than more.
• Smoothing straightens out the wobble that anti-aliasing leaves along an edge. Raise it if the outlines look ragged; lower it if genuine detail is being rounded off.
• Detail decides how small a shape has to be before it gets dropped. Lower it to throw away speckles and noise; raise it to keep fine features in an intricate drawing.

Trace, look at the result on the right, adjust, trace again. It takes seconds.

Leaving the background out

Leave the background out drops the large flat shape behind the artwork, so the SVG has a transparent background instead of a white rectangle.

Use it for a logo that needs to sit on somebody else's page or on a coloured header. Leave it off if the background is genuinely part of the design.

Check the edges before you use it

Zoom into the traced panel on the right. Corners that should be sharp, curves that should be smooth, and small text are the places where tracing shows its limits.

If the result is nearly right but fussy, try fewer colours first. If the original is a very small image, tracing can only guess at detail that was never there — a 64 px favicon will not become a crisp logo.

Nothing is uploaded

The image is read and traced inside your browser. It never reaches a server, which matters when the file is an unreleased logo, a client's brand mark or artwork under NDA.

It also means there is no size limit and no waiting. Very large images are scaled down before tracing, because past a point the extra pixels only add noise, not detail.

What people use it for

• A logo that only exists as a PNG and now has to go on signage or print
• An icon that needs to be recoloured or resized in code
• A sketch or line drawing being prepared for cutting, engraving or embroidery
• A stencil or silhouette for a vinyl cutter or laser
• Turning a diagram into something editable
• Getting an SVG for a website, where it stays sharp on any screen

Good to know

• The SVG has a proper viewBox, so it scales correctly when you set a width in CSS or HTML
• Copy SVG code puts the markup on your clipboard, ready to paste straight into a page or a component
• The result opens in Illustrator, Inkscape, Figma and Affinity, where the paths can be edited by hand
• Thousands of shapes means the settings are wrong for this image, not that the tool failed — reduce the colours
• To go the other way, use SVG to PNG or SVG to JPG
• To clean the background off a photo instead, use Background Remover

How to use it

• Click Click to upload, or drop your logo or drawing onto the box
• Choose what it is: Logo or icon, Line drawing or Detailed art
• Press Trace it and look at the result on the right
• Adjust the number of colours first if the edges are messy, then trace again
• Tick Leave the background out if you need transparency
• Press Download SVG, or Copy SVG code to paste it straight into a page

Related tools

• SVG to PNG — the other direction
• SVG to JPG — an SVG as a flat picture
• Background Remover — cut a subject out of a photo
• Image Upscaler — make a small bitmap bigger without tracing it
• Favicon Generator — turn the result into a site icon
• Image Compressor — when a bitmap is the right answer after all