✒️ Raster → Vector

PNG to SVG Vector Tracing

Turn a PNG logo, icon, signature or drawing into a true SVG made of editable paths. It's built for designers, crafters and developers who need artwork that scales cleanly, and it runs in your browser.

  • ✓ Real paths, not a PNG wrapped in SVG
  • ✓ Black & white, logo and full-colour modes
  • ✓ No upload, no account
✒️

Drop your PNG, JPG or WebP here

or click to choose a file – logos, icons, drawings, signatures and photos up to 50 MB

What is a PNG to SVG converter?

A PNG stores a fixed grid of pixels, so enlarging it makes edges soft and jagged. An SVG describes shapes as mathematical paths, so it stays sharp at any size, from a favicon to a billboard.

Many "converters" simply wrap the PNG inside an SVG file, which still scales badly. This tool actually traces the outlines: it groups similar colours, follows the edges of each colour region and writes them out as smooth curves you can open and edit in Illustrator, Inkscape, Figma or a cutting-machine app such as Cricut Design Space.

How to convert PNG to SVG in 4 steps

  1. Add your image

    Drop a PNG, JPG or WebP onto the box above. A clean logo or drawing gives the best result.

  2. Pick a mode

    Choose black & white for line art, logo for a few flat colours, or full colour for illustrations.

  3. Tune the trace

    Adjust colours, detail and curve smoothing. The preview re-traces automatically.

  4. Download or copy

    Save the .svg file or copy the SVG code straight into your HTML or design tool.

Supported formats

PNGinput

Best source; transparent areas become empty space.

JPGinput

Works; JPEG noise may add tiny specks.

WebP / GIF / BMPinput

Read by your browser and traced the same way.

SVGoutput

Plain SVG 1.1 paths, one fill colour per group.

Files up to 50 MB. Images above about 2 megapixels are traced at a reduced size for speed; the vector output still scales to any size. Images over 100 MP are refused.

How does it work?

Your image is drawn onto a canvas and its pixels are handed to a Web Worker, so the page stays responsive. The worker reduces the picture to a small palette, traces each colour layer with the open-source imagetracer.js engine and assembles the SVG. Nothing is sent to a server.

🎨

Colour quantisation

Black & white mode uses an Otsu threshold; logo and colour modes use k-means clustering with 2–64 colours.

〰️

Edge tracing

Region outlines are fitted with straight lines and quadratic curves. Smoothing controls how many nodes are kept.

🧹

Clean-up

Optional despeckle removes stray pixels, and background removal leaves white or transparent areas unfilled.

🔒

Private by design

Everything runs in a background worker on your device. Close the tab and nothing remains.

Raster vs vector: what is the actual difference?

Raster formats such as PNG, JPG and WebP record a colour for every pixel. They are ideal for photos. Their weakness is resolution: stretching a 500 px logo to poster size only makes each pixel bigger.

Vector formats such as SVG, EPS and PDF artwork store instructions instead: "draw a curve from here to there and fill it with #1A73E8." A renderer recalculates those shapes at whatever size is needed, so edges stay crisp on a phone, a 5K monitor or a printed banner.

When you should vectorise

  • Logos and icons that must appear at many sizes.
  • Line art, signatures and stamps for documents.
  • Designs for vinyl cutters, laser engravers and embroidery software, which need paths.
  • Simple illustrations you want to recolour or edit shape by shape.

Photos are usually better left as raster images; a traced portrait becomes thousands of blobs.

How to get a clean trace from a PNG

Tracing quality depends mostly on the source: sharp, flat-colour images trace into a few tidy paths, blurry ones into wobbly outlines.

Prepare the source image

  • Use the largest version you have. Upscaling a tiny logo first with the image upscaler can smooth the edges the tracer follows.
  • Remove a busy or off-white background first with the transparent background tool, then trace the PNG.
  • Crop away empty margins so the subject fills the frame.

Choose settings that match the artwork

For a two-tone logo or handwriting, black & white mode is usually perfect. For a brand mark with three or four colours, set the colour count to the number of inks you can see, plus one or two for anti-aliased edges. Raise detail if thin strokes disappear; raise smoothing if curves look lumpy or the file has too many nodes.

Using your SVG on the web, in print and in cutting machines

An SVG from this tool is ordinary XML, so it works almost everywhere. On a website you can reference it with an img tag, set it as a CSS background, or paste the copied code inline to style it with CSS. Because the file contains real paths, you can change a fill colour in any text editor.

Editing and production tips

  • Design apps: open the file in Inkscape, Illustrator or Figma to merge shapes, fix a stray node or add text.
  • Cricut and Silhouette: each colour group imports as a separate layer, which maps neatly to vinyl colours.
  • Print: printers often ask for vector logos; an SVG can be converted to PDF or EPS in most design software.
  • File size: fewer colours and more smoothing mean fewer paths and a lighter file for faster pages.

Frequently asked questions

It is a real conversion. The tool traces the outlines of each colour region and writes them as SVG path elements. No bitmap is embedded, so the result scales without pixelation and every shape can be edited or recoloured in a vector editor.
Logos, icons, clip art, signatures, stamps, text and cartoon-style drawings with clear edges and few colours convert best. Photos and soft gradients can be traced in full-colour mode, but the SVG becomes complex and usually much larger than the original file.
Specks usually come from JPEG noise or anti-aliased edges. Keep "Clean up stray pixels" switched on, lower the detail setting slightly and raise curve smoothing. Starting from a larger, sharper source image also produces smoother outlines, because the tracer has more pixels to follow along each edge.
Yes. Transparent pixels in your PNG are left empty in the SVG. With "Remove background" enabled, near-white areas are also left unfilled, so the vector sits cleanly on any page colour or material. Switch the option off if white is part of your design and must stay filled.
Logo and full-colour modes let you choose between 2 and 64 colours. Black & white mode uses black and white only, and white is left empty when background removal is on. Each colour becomes its own group of paths, which is handy for layered vinyl or screen-print separations.
No. The image is decoded and traced inside your browser using a Web Worker. It never leaves your device, which makes the tool safe for unreleased logos, client artwork and signatures. You can even disconnect from the internet after the page loads and keep converting.
Yes. Download the .svg file and upload it to Cricut Design Space or Silhouette Studio. Each colour group appears as a separate layer you can cut from a different material. Simplify the design first if the software warns about too many nodes.
Detailed or photographic images produce thousands of paths, and each one is stored as text. Reduce the number of colours, lower detail and increase smoothing to cut the path count. Simple logos usually produce SVGs of only a few kilobytes.
Raster images such as PNG and JPG store a grid of coloured pixels, so they blur when enlarged. Vector images such as SVG store shapes as maths, so they redraw sharply at any size. Photos suit raster; logos and line art suit vector.
Yes. JPG, WebP, GIF and BMP files are traced exactly like PNG. For best results with a JPG, use the highest-quality version available, because compression artefacts around edges can turn into tiny extra shapes. Keeping despeckle on and choosing a sensible colour count will hide most of them.