PNG to SVG
Trace a logo or drawing to SVG, with its size, path count and error measured.
Drop an image here
Or drop it here, or paste. A PNG, JPEG, WebP, GIF or AVIF of a logo, icon, drawing or pixel art. Nothing is uploaded.
Loading the tracing engine…
Options
What is it?
Flat colours with clean edges. Curves smoothed, colours merged.
More optionscolours measured · specks under 4 px dropped · curves within 1.5 px
Colours
Raise it to drop dust and JPEG noise. Each speck kept is a path.
Refits curves with fewer nodes, staying within this distance. Corners are kept.
Tracing first: the download appears with the result.
In short
Drop a PNG or JPG, say whether it is a logo, icon, drawing or pixel art, and download the SVG. Each result shows its size, its path and node count, and how closely it matches your image, measured by drawing the SVG back in your browser. The image is traced on your device by VTracer and never uploaded.
What raster-to-vector tracing is
Turning a grid of pixels into shapes drawn with curves. The tracer groups neighbouring pixels of one colour into regions, follows the edge of each region and fits Bézier curves to it. Nothing is stored per pixel, so the result stays sharp at any size, but it can only hold flat areas of colour: tracing suits logos, icons and drawings, and turns a photograph into thousands of posterised patches.
What this tool does that others do not
Every result is measured, on the file you download
Under each trace: the SVG’s size in bytes and gzipped, how many paths and nodes it holds, and how far it is from your image. The error is taken by drawing the SVG in your browser at the same size and comparing every pixel in OKLab, so a hole filled in, a missing shape or a colour that drifted shows up as a number and as red on the Difference view.
The Kestrel sample logo: 2,157 bytes, 7 paths, 103 nodes, and 98.0% of pixels within ΔE 2 of the original, after one SVGO pass that the page runs for you.
Exact brand colours, not near misses
Anti-aliased edges are blends, and a tracer keeps each blend as a colour of its own, so a four-colour logo comes back with fourteen fills, white among them as #fefefe. The palette lock maps every pixel to the nearest of the colours you give (or the ones measured in the flat parts of the image) before tracing, and the output then uses those hex values and no others.
Logo sample unlocked: 15 paths, 14 fills, 95.4% of pixels within ΔE 2. Locked: 7 paths, 4 fills, 98.0%. The same logo enlarged to 2,560 px: 493 paths when the engine only snaps finished shapes, 12 when the pixels are mapped first.
It says when tracing is the wrong tool
Before tracing, the page measures how much of the image is flat colour. Logos and drawings measured 66% or more, even re-saved as JPEGs at quality 70; photographs measured 40% or less. A photo is still traced if you want the look, but with the cost stated first.
A 39,044-byte WebP render of a planet traced to 228,206 bytes — 5.8 times larger — with 636 paths and only 42.3% of pixels within ΔE 2.
Pixel art comes back as squares
An enlarged sprite is detected by the common block size of its runs of identical pixels, traced at its true size, and scaled back up with a viewBox, so every pixel is an exact square rather than a rounded blob.
The 16 × 16 sample, shared at 12×: read as 12×, traced to 883 bytes and 11 paths, matching the original at every pixel.
How to use it
Say what kind of image it is
Logo, icon, line art, pixel art, illustration or photo. Each preset was tuned on its own sample and changes how colours are grouped and how hard curves are smoothed.
Check the colours
For logos and icons the measured colours are locked automatically when the image is flat colour; the More options line says so. Open it and type your brand hex values instead to force them; include the background colour if you want to keep it.
Read the Difference view, not just the preview
A trace can look right at small size and still be missing a counter or a thin line. Red marks every pixel that changed; zoom to 4× to see the curves against the original.
Download, or raise the speck filter first
The file is already through SVGO. If it is larger than you want, raise the speck filter or the smoothing under More options and watch the byte count and the error move together in the Result figures. Download SVG and Copy SVG are also on the bar at the foot of the screen.
Worked examples
Real input, real figures.
A wordmark exported as PNG, needed as SVG for a website
You give it
The Kestrel sample: 640 × 280 PNG, 18,748 bytes, four colours with anti-aliased edges.
You get
Locked to #ffffff, #1d4ed8, #f97316 and #0f172a automatically. 2,157 bytes, 7 paths, mean ΔE 0.51. With "Make the background transparent" the white goes everywhere it appears, including inside the ring.
A photograph somebody asked to have "as a vector"
You give it
A 480 × 480 WebP render, 39,044 bytes, with soft shading throughout.
You get
Flagged as a photograph before download: about a third of it is flat colour, against a cut-off of 55%. The SVG is 228,206 bytes, 5.8 times the original, and looks posterised. The honest answer is to keep the WebP.
Against the usual free PNG to SVG converter
| Aspect | This tool | Typical free converter |
|---|---|---|
| Where the image goes | Nowhere: traced in your browser by a 668 KB engine served from this site | Uploaded to a server, or traced in a page carrying ad scripts |
| What you are told about the result | Bytes, gzipped bytes, paths, nodes, colours and a per-pixel error | A preview and a download button |
| Colours | Locked to exact hex values, yours or measured | A colour count; edge blends become extra fills |
| Photographs | Detected, with the size cost stated | Traced without comment |
| Downloading | Free, no account, no watermark | Preview free, download paid on vectorizer.ai ($9.99 a month) and Vector Magic ($5.49 a month) |
Guide
What it will not do
- No centre-line tracing. VTracer traces outlines, so a 2 px line becomes a thin filled shape, not a stroke whose width you can change. Inkscape’s Trace Bitmap has a centre-line mode for handwriting and technical drawings.
- Gradients become bands. A vector fill is one colour, so a soft sky is traced as a few stripes; the illustration sample keeps only 64.4% of its pixels within ΔE 2 for that reason.
- No AI redraw. Paid services such as vectorizer.ai use trained models and charge to download; this uses VTracer’s clustering and curve fitting (MIT licence), which gives the same output every time and never invents a shape.
- Images over 2,048 px on the long side are scaled down first: tracing more pixels of the same picture adds nodes rather than detail.
Why a traced logo has more colours than the original
The edge of every shape in a PNG is a row of blended pixels, half one colour and half the next, so that it looks smooth on screen. A tracer sees each blend as a colour in its own right and draws it as its own thin shape. That is how a logo with four colours comes back with fourteen fills, one of them a white that is not quite white.
The page reads the colours from the flat parts of the image instead, where there are no blends, and maps every pixel to the nearest of them before tracing. You can type your own hex values to force exact brand colours. The output then contains those values and nothing else, which you can check in the code.
When not to vectorise
A vector shape is filled with one colour. A photograph has almost no flat colour, so tracing it produces thousands of patches, a file several times larger than the original, and a picture that looks posterised. Before tracing, the page measures how much of the image is flat: logos and drawings measured 66% or more, photographs 40% or less, and anything under 55% is flagged.
Large files are traced at 2,048 px on the long side. A vector has no resolution, and tracing more pixels of the same picture adds nodes rather than detail.
Checking that nothing was uploaded
Open your browser's developer tools, choose the Network panel and drop an image. You will see the tracing engine (VTracer 1.0.0-alpha.4, a WebAssembly file of about 650 KB) arrive from dsyn.studio on first use, and nothing leave. The one request the page makes on its own is the site's cookieless page-view counter, which carries the page address and not your image (see the privacy page). Once the engine has loaded, the tool works with the network switched off.