Free PNG, JPG and WebP to SVG Converter
Turn a PNG, JPG or WebP image into a true SVG made of shapes and curves, not pixels. Tune colors, detail and contrast, compare with the original, then download the file. Everything runs in your browser.
Drag and drop an image here
or click to pick a PNG, JPG or WebP file
Up to 20 MB and 50 million pixels.
100% local processing: your image is never uploaded to a server.
Vectorizing an image to SVG: the guide
Why convert a PNG or JPG to SVG?
A PNG, JPG or WebP file is a grid of pixels: scale it past its original size and it turns blurry or jagged. An SVG describes shapes instead (outlines, curves, fill colors) that the browser or design app redraws at every size. A vectorized logo stays crisp as a 16-pixel favicon and on a 10-foot banner alike.
SVG (Scalable Vector Graphics) is an open W3C standard, displayed by every current browser and opened by Inkscape, Adobe Illustrator, Figma and Affinity Designer. Each shape in the output can be edited on its own: recolor it, delete it or crop it without any loss of quality.
An .svg file can also just wrap the original bitmap in an <image> tag. It then carries the .svg extension but is still a pixel grid, exactly as blurry when enlarged. This converter does the opposite: every color region becomes a real <path> built from straight segments and Bézier curves, and the tool checks the output and reports how many vector paths it contains.
Who uses it, and for what?
- Designers and freelancers
- Client only has their logo as a low-res PNG or a compressed JPG? Vectorize it with 2 to 6 colors, then refine the paths in Inkscape or Illustrator instead of redrawing the logo from scratch.
- Cutting and engraving (Cricut, laser)
- Cutting and engraving machines follow paths, not pixels. In black-and-white mode with a transparent background, line art becomes a single black path you can import into Cricut Design Space or LightBurn, both of which accept SVG.
- Web developers
- Turn a PNG icon into an SVG you can inline in your HTML. It stays sharp on high-DPI screens and can be recolored with CSS, since any CSS rule overrides the file's fill attributes.
- Signatures and scanned sketches
- Snap or scan a signature, a stamp or a line sketch, push the contrast and threshold to drop the paper grain, and get a clean black outline on a transparent background to place on any document.
How does the vectorization work?
Your browser reads the image and, if its longest side exceeds 1,000 pixels, scales it down to that size before tracing: computing time and memory grow with the pixel count times the number of colors. The SVG still keeps the original dimensions through its viewBox attribute, and a vector scales up losslessly anyway.
The palette is first built with median cut (the algorithm Paul Heckbert published in 1982), then refined in three k-means-style passes by the open-source ImageTracerJS library. Each color becomes a layer whose outlines are followed with a variant of the marching squares algorithm, then fitted with straight segments and quadratic Bézier curves. The detail level sets the tolerance of that fit and the minimum size of the shapes kept.
Contrast is applied before the palette is computed. In black-and-white mode, each pixel's luminance, calculated with the ITU-R BT.709 coefficients also used by sRGB, is compared with the threshold. The work runs in a Web Worker so the page stays responsive, and changing a setting mid-run cancels that run. The preview shows the exact file you will download.
Frequently asked questions
- Will the SVG look exactly like my image?
- No, it's an interpretation. The image is split into flat areas of solid color: a gradient becomes a series of bands and a photo loses its fine texture. Vectorization works best on logos, icons, flat illustrations, line art and lettering. For a photograph, stick with JPG or WebP.
- How many colors should I pick?
- 2 colors, or black-and-white mode, for a one-color logo, a signature or text; 3 to 8 for a flat-color logo; 16 to 32 for an illustration with shading. Each color adds a layer, so the file grows and the run takes longer. Start low and go up until the details you need show up.
- Why is my SVG larger than the original image?
- A photo or a noisy image produces thousands of tiny shapes, each stored as coordinates. Use fewer colors, lower the detail level to drop small specks, or raise the contrast to simplify areas. You can then run the file through the SVG optimizer. A flat-color logo, on the other hand, only yields a few dozen shapes.
- How can I check that the SVG holds real vectors?
- Open the file in a text editor: it only contains <path> tags whose d attribute lists moves (M), lines (L) and curves (Q), with no <image> tag and no base64-encoded data. The tool runs this check on every result and shows the path count under the preview.
- Why is the image scaled down to 1,000 pixels?
- To keep computing time and memory in check, since both grow with the pixel count times the number of colors, and a phone has to keep up. Only the analyzed grid is reduced. The SVG keeps the original width and height, and its curves stay sharp at any size.
- Is my image uploaded to a server?
- No. Reading the image, vectorizing it and building the SVG file all happen in your browser. No image is sent anywhere, no account is required, and nothing is kept once you close the tab.