Vectorize Picture — Free Online Image to SVG Converter

What does it mean to vectorize a picture?

Every photograph, screenshot and exported logo you download is usually a raster image: a rectangular grid of coloured pixels. Zoom in far enough and you will see the grid. Scale the image up and those pixels stretch, which is why a small JPEG logo turns soft and blocky when it is printed on a banner or cut into vinyl.

Vectorizing — also called tracing or raster-to-vector conversion — replaces that pixel grid with a set of geometric shapes described mathematically: points, straight lines and Bézier curves. The output is normally an SVG file (Scalable Vector Graphics). Because an SVG records "a shape starts here, curves like this, and fills with this colour" rather than "pixel 412 is #4338CA", it can be rendered at any size and stay perfectly sharp.

This tool performs that conversion entirely inside your browser. It reads the pixels through the HTML Canvas API, groups them into a limited palette, traces the boundary of every colour region into polygons, simplifies those polygons, optionally fits smooth curves through them, and writes the result out as standard <path> elements. The downloaded file contains no embedded bitmap and no base64 copy of the original photo — open it in a text editor and you will see only coordinates.

How to vectorize an image with this tool

1. Load a picture. Drag a PNG, JPG, JPEG or WebP file onto the upload area, click Browse files, or paste an image straight from your clipboard with Ctrl/⌘+V. You can also press Use a sample image to load a built-in illustration.
2. Start from a preset. Eight presets ship with the tool: Logo, Illustration, Line art, Photo, Sketch, Signature, Cartoon and Pixel art. Apply one with a click, or tune each slider yourself. If you find settings you love, press Save preset to create your own.
3. Auto-detect the colour count. Not sure whether your logo needs 6 or 16 colours? Click ✨ Auto — the tool samples thousands of pixels, builds a coarse histogram, and suggests a palette size that matches the image's natural colour groupings.
4. Remove the background. Choose Auto remove to flood-fill from the image border, Remove a specific colour to pick a hex value, or Pick from image — the cursor becomes a crosshair and clicking anywhere on the preview samples that pixel as the background to remove.
5. Exclude stray colours. Once a trace is done, the palette swatches below the preview become buttons. Click any swatch to exclude that colour — its pixels become transparent in the SVG. This is faster than re-tracing when you just want to drop a watermark tint or a stray brand colour.
6. Compare, inspect and export. Switch between Split, Original, Vector, Overlay and Difference views. Hover anywhere on the preview to see the exact pixel colour under the cursor. Drag the split handle to compare left and right. Then copy the SVG, download it, or export a PNG raster of the same shapes.

💡 Every change to the settings triggers an automatic re-trace in the background — you never have to click Vectorize manually. That button only becomes necessary when you want to force an immediate re-run after a change you made while the tool was busy, or when you want to cancel an in-progress trace.

Raster vs vector: the difference that actually matters

The practical upshot: if a graphic is made of flat shapes — a logo, an icon, a signature, a sticker design, a simple illustration — vector is almost always the better master format. If the graphic is a photograph with continuous tone, keep it as a raster image and export at the size you need.

How this vectorizer works under the hood

There is no server and no machine-learning model behind this page. The pipeline is deterministic, and understanding it helps you get better results:

1. Downscale for tracing. The image is drawn onto a canvas at the chosen processing size (480–1400 px on the long edge). This keeps tracing fast while the exported SVG still uses the original dimensions in its viewBox.
2. Optional pre-sharpen. An unsharp mask can be applied before tracing to enhance edges on soft or blurry source images.
3. Optional background removal. Matching pixels are set to transparent before anything else happens, so they never become vector shapes.
4. Colour quantisation. The remaining pixels are reduced to a palette using median-cut quantisation: the colour space is repeatedly split along its widest channel at the median until the requested number of colour boxes exists, and each box contributes its average colour. Pixels are then mapped through a 32×32×32 lookup table for speed.
5. Noise filtering. A mode filter replaces isolated pixels with the colour of their neighbours, and small contours are discarded entirely by area threshold.
6. Contour tracing. For each colour, the boundary between that colour and every other colour is walked as a closed loop of edges using a rightmost-turn preference. Interior holes are traced as additional loops, which is why a letter like "O" keeps its counter and two diagonally touching blobs stay separate.
7. Path simplification. Each loop is reduced with the Ramer–Douglas–Peucker algorithm, which removes points that sit close to a straight line between their neighbours.
8. Curve fitting. When smoothing is enabled, the simplified polygon is converted into cubic Bézier segments using a Catmull-Rom style control-point calculation, so corners soften without the shape drifting away.
9. SVG assembly. Every colour becomes a single <path> with fill-rule="evenodd", which lets outer contours and holes live in the same path and render correctly.
10. Quality scoring. The finished SVG is rasterised back to a canvas and compared pixel-by-pixel with the original processing image. Mean squared error is converted to a 0–100 quality score so you can tell at a glance how close the trace is.

Everything above is ordinary geometry. That is why the output is editable in any vector editor and why it scales cleanly — and also why photographs, which have no flat regions to trace, produce posterized bands rather than a realistic picture.

What each setting actually does

Which images vectorize well

When you should not vectorize

Vectorization is not a general-purpose "make any image better" button. It struggles badly with three categories:

• Photographs. A portrait or landscape contains millions of near-identical colours. Reducing them to 32 flat tones produces visible bands and destroys the realism. No tracer can recover detail that was never made of flat regions.
• Gradients and soft shadows. A smooth colour transition has no boundary to trace, so it is chopped into a series of stepped bands. If you need gradients, keep the raster or recreate the graphic natively in a vector editor.
• Highly detailed, noisy artwork. Textured paintings, watercolour scans and grainy images generate thousands of tiny contours. The SVG ends up larger than the original image and is painful to edit.

⚠ If your goal is simply to enlarge a photo without losing quality, vectorizing will not do it. Use an upscaler instead and keep the file as a raster format.

What people do with the SVG

• Cutting machines. Cricut, Silhouette and Brother ScanNCut read SVG cut paths. A clean two-colour trace with high noise removal produces cut-ready outlines.
• Laser engraving and CNC. Laser software wants thin vector paths; engraving wants filled areas. Black & white mode gives you both options.
• Print and signage. A vector logo can be printed on a business card or a billboard from the same file with no resolution compromise.
• Embroidery digitising. Vector outlines are the standard starting point for stitch-file conversion.
• Web icons and illustrations. SVGs are typically smaller than PNG equivalents for flat artwork, and they stay crisp on high-DPI screens.
• T-shirts, stickers and vinyl. Print-on-demand workflows need clean, separated colour shapes.
• Design iteration. Importing a traced logo into a vector editor lets you straighten edges, adjust spacing and rebuild the mark properly.
• Logos for Word documents and slides. Replacing a blurry PNG logo with its SVG trace makes every deck and every letterhead look sharper.

Fifteen tips for cleaner vector output

1. Start from the largest, cleanest original you have. A blurry 200 px JPEG cannot produce a crisp trace, no matter what settings you use.
2. Try Auto colour count first — it is usually within one or two of the ideal value for a logo.
3. Remove the background first if the graphic sits on a plain colour — it removes an entire layer of unnecessary shapes.
4. Use the eyedropper when the background colour is not obvious; it samples the exact pixel instead of forcing you to guess.
5. Lower the detail level before reaching for smoothing. A noisy outline is usually too many points, not too few curves.
6. Use smoothing last. Simplify first, then round the remaining corners.
7. Turn noise removal up for scanned artwork and screenshots with anti-aliasing fringes.
8. Keep smoothing low for pixel art. Hard edges are the point of the style; the Pixel-art preset already does this.
9. Exclude stray palette colours by clicking their swatches instead of re-tracing — much faster when you just want to drop one tint.
10. Check the quality score. Above 90 usually means the trace is visually faithful; below 70 usually means you need more colours or more detail.
11. Switch to Difference view when you cannot spot what went wrong in Split view — the mismatched pixels glow.
12. Inspect corners at 200–400% zoom. The pixel inspector tooltip will show you the exact original colour under the cursor.
13. Check the path count. Cutting software often caps the number of paths; if you are close to a limit, reduce colours and detail.
14. Save your favourite settings as a preset. Custom presets are stored locally in your browser and appear as chips next to the built-in ones.
15. Redraw logos properly when it matters. A trace is an approximation. For a primary brand asset, use the trace as a reference and rebuild the geometry cleanly.

Privacy: nothing is uploaded

All decoding, colour reduction, contour tracing, quality scoring and SVG generation happen in your browser using the Canvas API and plain JavaScript. There is no upload endpoint, no analytics call containing image data, and no storage of your file. Once the page has loaded, the tool works even with the network disconnected. Custom presets you save live only in localStorage on this device, and you can delete them at any time by clicking their × button.

Limitations

• Images are downscaled before tracing, so detail finer than the processing resolution is lost by design.
• Animated GIFs and multi-page files are not supported; only the first frame of a static image would make sense in a vector anyway.
• Very complex traces can produce large SVGs. The tool warns you when the path or node count gets high, but it does not automatically simplify further.
• Text inside an image is traced as shapes, not as editable text. No OCR is performed.
• The tracer is deterministic geometry, not an AI model. It will not "understand" that a circle should be a perfect circle or that a line should be perfectly straight.
• Extremely large uploads (over roughly 25 MB) may fail to decode depending on the browser's memory limits.
• The "Copy as image" button uses the Clipboard API; some browsers and operating systems do not support writing images to the clipboard, in which case the PNG download button is the fallback.
• The Difference view uses a CSS blend mode rather than a pixel-perfect diff — it is a fast visual aid, not a forensic tool.

Frequently asked questions

Related image and design tools