Convert an image to SVG
One image in, one SVG out, by one of two converters. Stencil runs on your own device and costs nothing; Airbrush runs on a vector model and needs an account. Neither one stores your file.
Free, no account, and the file never leaves your device.
How to convert an image to SVG
- 01
Choose a converter
Stencil or Airbrush, at the top of the tool. They differ in what they can express rather than in quality, and the two cards below say how.
- 02
Choose an image
Click the card and pick a PNG, JPEG or WebP. Nothing leaves your device until you press the button, and Stencil never sends it anywhere.
- 03
Convert it
Press the button. Stencil rebuilds the picture in your browser; Airbrush hands it to the vector model and answers with paths.
- 04
Take the file
The SVG appears beside your image, with a download. No session is created and nothing is kept.
Stencil and Airbrush
Stencil
Sixteen flat colours traced from your own pixels, on your device. Line art and icons come back clean; a photograph comes back in bands.
Airbrush
Gradients, so soft shading survives — but it redraws the picture from its own reading of it, and that reading is not always the file you sent.
Why convert an image to SVG?
A raster image — a PNG, a JPEG, a WebP — is a fixed grid of pixels. An SVG is a text file of shapes, which is why it is called a scalable vector graphic: there is no grid to run out of. Converting one to the other rebuilds the picture as those shapes, and everything below comes from that.
It stays sharp at any size
A path has no resolution to run out of. The same file is right at 16px in a favicon and at the size of a poster, with no second export.
It is a file you can still edit
The shapes are separate paths, so a vector editor — or a text editor — can select one, move it and recolour it. A PNG offers a brush and nothing to select.
Flat artwork usually gets much smaller
Measured on this page: the PNG above is 768,029 bytes and its Stencil trace is 24,398. What compresses is flat colour — trace a photograph and the file can come out larger than the one you started with.
It is the format icons, print and code read
Favicons and app icons, print, and a build pipeline all want paths. A raster file has to be remade for every size it is used at.
What a conversion is not. It is not a redrawing. A trace gives you separate, editable shapes that follow your pixels, and a photograph comes back as a pile of them — nobody understood the picture. That is why the section above offers two methods rather than one.
PNG, JPEG, WebP and SVG: what each format is for
Three of these are raster images — grids of pixels with a fixed size — and the fourth is a text file of shapes. This tool takes the first three and returns the fourth. The specimen at the top of this page is one 1254×1254 picture in all four, which is what makes the sizes below measurements rather than theory.
PNG
Lossless raster: every pixel is stored exactly as it was, and transparent areas stay transparent.
A group of developers designed it from January 1995 because the format everybody used at the time, GIF, was covered by a patent that had to be licensed. PNG was the format nobody had to pay for — the W3C published it as a Recommendation in October 1996 — and that is the whole of its origin story.
The exactness is why screenshots, line art and flat graphics are usually PNG, and why the specimen above is 768,029 bytes as a PNG and 70,147 as a JPEG. A PNG also carries no resolution in the print sense: the file says how many pixels it has, and how large it is used is a decision made later. That is what goes wrong when a small PNG is put somewhere large.
JPEG
Lossy raster, made for photographs: it drops detail your eye is unlikely to miss, and that is what makes the file small. It has no transparency.
It is named after the committee that wrote it rather than after a company — the Joint Photographic Experts Group, which started work in 1986 and published the standard in 1992 as ISO/IEC 10918. That committee origin is why the format is everywhere and nobody owns it, and it is the format most photographs still arrive in.
Text, line art and flat colour pay for the compression: they come back soft or blocky, and every re-save loses a little more. A photograph from a camera or a phone also usually carries EXIF with it — the device, sometimes the place — and the SVG this page returns carries none of that.
WebP
A raster that can be lossy or lossless, with transparency and animation in the same container. Lossy WebP borrows its method from the VP8 video codec: it predicts a block of pixels from its neighbours and stores only the difference.
Google released it in September 2010 as a developer preview, with its own reference implementation, aiming at the bytes an image-heavy web spends. It is one company’s format rather than a standards body’s, and that is the fact behind its support curve.
On the specimen it does what it was designed to do: 36,752 bytes against the JPEG’s 70,147 and the PNG’s 768,029, with 465,786 for lossless WebP. Browsers have read it for years; older desktop programs and some pipelines are where it runs out.
SVG
Not a raster at all: XML describing shapes, so there is no pixel grid and no resolution to run out of. A browser reads it, a text editor opens it, and code can restyle it or animate it.
It came out of a standards argument: in 1998 the W3C had six rival proposals for vector graphics on the web, including one from Adobe, IBM, Netscape and Sun and another from Microsoft, HP and Macromedia. SVG was what came out of them, published as a W3C Recommendation in September 2001.
For flat artwork it is the smallest of the four — 24,398 bytes for the specimen above against 768,029 as a PNG — and it is the only one of the four that diffs in a code review. What it cannot hold efficiently is a photograph. And an SVG that wraps a base64 bitmap is not a vector file: it is a PNG in an SVG wrapper, which is the difference the questions below keep coming back to.