How to convert a PNG or JPG to SVG
Drop the picture on the page. It is traced at once into an SVG with smooth curves and the background removed. Drag the divider to compare, then download the SVG or copy its code.
Open the picture
Drop it on the box, choose it, or paste it. PNG, JPG, WebP, GIF, BMP, AVIF, TIFF, PSD and HEIC open. The page guesses what kind of picture it is and traces it straight away.
Check the edges
Drag the divider across, zoom in with the buttons, the + and − keys, or Ctrl and the mouse wheel, and look at the result on checks, white or dark. Every setting traces again as you change it.
Save it
Download the SVG, copy its code to paste into HTML, copy it as a data URI for CSS, or save a PNG up to 8192 pixels wide.
What traces well
Tracing finds the areas of solid colour in a picture and draws the outline of each as curves. So the result is as clean as the picture's colours are flat.
| Picture | What to expect |
|---|---|
| Logos and icons | Clean shapes in the logo's own colours, usually a few kilobytes. Even a small PNG or a JPG with blotchy edges comes out smooth |
| Line art and signatures | Ink only, in the ink's own colour, on nothing. Photos of paper work: shadows across the page are evened out first |
| Flat illustrations | Each colour area as a shape, up to 16 colours on Auto and 32 by hand |
| Photos | Flat areas of colour, like a poster or a paper cut-out, not a copy of the photo. Detailed photos make large files, often 1 to 3 MB |
| Pixel art and QR codes | Kept square, pixel for pixel. A QR code keeps its white squares, so it still scans on a dark page; Line art or Remove the background makes them see-through |
| Gradients and shadows | Become bands of colour, see-through ones for a soft shadow. More colours make the bands finer and the file bigger |
| Very small icons | Traced from 16 px up in their exact colours, on a see-through background too. A line thinner than a pixel comes out a little rounder |
| Small text in a JPG | Letters a few pixels tall in a colour close to another, like grey beside black, can take that colour. A PNG of the same logo keeps them apart |
The settings
| Setting | What it does |
|---|---|
| Kind of picture | Logo, Line art, Illustration or Photo: sets everything below to what suits it best |
| Colours | Auto finds the colours the picture is made of, leaving out the blended pixels along edges. Or pick a number from 2 to 32 |
| Line weight | Line art only: thinner or bolder than drawn, for faint pencil or heavy marker |
| Remove the background | Makes the colour around the picture see-through. Inside shapes too also removes it from inside letters like o and e |
| Remove specks | Leaves out dots and blotches up to this size, such as dust or JPEG noise |
| Corners | Lower keeps more sharp corners; higher rounds them off |
| Curves | Lower follows the picture more closely; higher gives smoother curves and a smaller file |
| Decimals | How finely coordinates are written. Auto picks by the picture's size |
Using the SVG on a website
The file is written for the web: a viewBox and no fixed width or height, so it fills whatever box you give it and stays sharp on any screen. Shapes of one colour are joined into one path, coordinates are rounded and nothing else is added, so it is usually far smaller than the PNG it came from.
- As an image: upload the file and use
<img src="logo.svg" alt="…" width="160"> - Inline: paste the copied code into your HTML, then style it with CSS
- In CSS:
background-image: url("…")with the copied data URI, no extra file to load
Where does the picture go?
Nowhere. The tracing runs in your browser with WebAssembly, so the picture stays on your device and nothing is uploaded.
Specs and browser support
| Input | PNG, JPG, WebP, GIF (first frame), BMP, AVIF, TIFF, PSD (flattened), HEIC and camera RAW (the preview inside), up to 50 megapixels. Transparency already in the picture is kept |
|---|---|
| Output | SVG 1.1 with a viewBox, filled paths, no fixed size unless asked; or PNG at any width up to 8192 pixels |
| Tracing | visioncortex, the engine behind VTracer (MIT), built to WebAssembly (57 KB). Each colour is traced on its own and runs on under the colours drawn on top of it, so where two colours touch, the lower one lies under the upper one's edge. Curves fitted again by webdave with least-squares Bézier fitting |
| Small pictures | Enlarged to about 1600 pixels before tracing, by their colours rather than their pixels, so edges are smooth |
| Large pictures | Traced at up to 6 megapixels (photos at 1), the SVG keeps the picture's full size |
| Browsers | Current Chrome, Edge, Firefox and Safari, on computers and phones |
| Price | Free, no watermark, no account |
Questions
No. The tracing runs in your browser, so the picture stays on your device.
Logos, icons, line drawings, signatures and flat illustrations: anything made of areas of solid colour. Photos work too, but they come out as flat shapes, like a poster, and the file is large.
No. Small pictures are enlarged smoothly before tracing, so the edges come out as smooth curves instead of steps. An SVG stays sharp at any size.
Upload the file and use it like any image, with an img tag or as a CSS background, or paste the copied code straight into your HTML. The file has a viewBox and no fixed size, so it fills whatever box you give it.
Yes. Remove the background takes away the colour around the picture. Inside shapes too also takes it from inside letters and holes. A picture that is already see-through stays that way.