How to convert an image to SVG

What converting to SVG really does

A PNG or JPG stores a grid of coloured dots, so it turns soft and blocky when enlarged. An SVG stores shapes, such as outlines and fills, so it stays sharp at any size and a designer can edit one shape or change one colour. There is no exact conversion between the two. The software has to find the edge of every area of colour and draw a path around it, which is called tracing or vectorising.

That means the SVG is an approximation. The Inkscape tutorial on tracing says the tracer's purpose is not to reproduce an exact duplicate of the original image, nor to produce a final product, but to give you a set of curves to work from. Expect to check the result and sometimes tidy it up.

When it works well, and when it does not

Tracing suits flat artwork with clear edges: logos, icons, line drawings, signatures, text and clip art. A few solid colours become a few shapes, and the file is often smaller than the picture it came from.

• A logo: a generated 600 by 600 PNG with three flat colours (4.0 KB) traced into 6 shapes in 3 colours, a 2.17 KB SVG.
• A photo or a smooth scene: a generated 1200 by 800 picture with soft gradients and noise (a 66 KB JPG) traced in the most detailed style into 1,765 shapes in 32 colours, a 318 KB SVG, nearly five times bigger than the JPG. The result is poster-like, because every shade has to become a flat shape.

So a photo is better left as a JPG. If your picture is small or blurry, start from the biggest, cleanest copy you have: soft or compressed edges trace as wobbly outlines. If you only have a small copy, the image upscaler can enlarge it first.

In the browser, without uploading

The image to SVG tool takes JPG, PNG, WebP, HEIC, AVIF and JPEG XL images, one or several at once. If you only have a PNG, the PNG to SVG page opens the same tracer with the logo style chosen and its transparent background kept, and JPG to SVG is set up for drawings and signatures. The steps are:

• 1. Drop the image. The first one is traced straight away and shown next to the original, so you can see the result before you download anything.
• 2. Pick a style: Black and white (two colours, for cutting, stencils and line art), Logo, few colours (up to 8 colours), or Detailed, many colours (up to 32).
• 3. Leave out white if you want a transparent background. Every white area is dropped, including the inside of letters such as o and a, which is usually right for a sticker or shirt print.
• 4. Press Convert to SVG and download. Several files download as a zip. Each keeps its name with .svg.

Each area of colour becomes a real path of lines and curves, not a picture wrapped inside an SVG file, so the result opens in Inkscape, Illustrator or Figma with editable shapes. The note under each download gives the size, the number of shapes and the number of colours, so you can tell at a glance whether the trace stayed simple. A very large image is traced at a reduced size (up to 1,000 pixels on the long side, 800 for Detailed) and the shapes are scaled back to the original width and height. A small image is enlarged first so the curves come out smooth.

Everything happens inside your browser tab, in a background worker, so the image never leaves your device. That matters for logos that have not been released and for client artwork.

In Inkscape or Illustrator

In Inkscape, which is free and open source, the tutorial on its website says to load or import the image, select it, and choose Path, Trace Bitmap (Shift+Alt+B). It offers several ways to decide what counts as black and white, and suggests Path, Simplify afterwards to cut the number of nodes so the result is easier to edit.

Adobe's Illustrator help lists an Image Trace panel (Window, Image Trace) with presets such as Black and White, Low Color and High Color. Adobe's menus and presets change between versions, so check its current Image Trace page for the steps in the version you have. If you do not own Illustrator, the browser tool does the same kind of job for free.

Check the result

Zoom in on the preview. Look for the holes in letters, thin lines that vanished, and stray specks around the edges. If the shapes are rough, try a different style or a bigger source image. If the result has far too many shapes, go down a style: Black and white and Logo give the cleanest edges. To go the other way, from SVG to an ordinary image, use the SVG to PNG converter.

Questions