Convert PNG, JPG, WebP, AVIF, HEIC, BMP and GIF to real scalable SVG vector graphics — not just a raster wrapper. True color tracing runs entirely in your browser. No upload, no account, no cost.
✓ Real vector paths✓ No upload✓ Batch support✓ Free forever
Free image to vector converter. Convert PNG to SVG, JPG to SVG, WebP, BMP, or GIF — true color tracing turns each color region into a real editable <path>, not a raster image wrapped in SVG. Built for designers, developers, and print shops working with logos and icons. 100% browser-based, nothing uploads.
How to vectorize an image free: select your source format below, drop the image, adjust colors and detail, then click Vectorize. The ImageTracer.js engine traces your image into real SVG <path> elements — scalable to any size with no quality loss.
→
🖌️
Drop images to vectorize
or click to browse
PNGJPGWebPAVIFHEICBMPGIF
Mode
All-purpose color tracing. Works for photos, logos, illustrations, and mixed content.
Quality
Threshold128
Output
Colors
Smoothing
LowMediumHigh
Simplify
More detailSmaller file
Corners
RoundedBalancedSharp
0SVGs ready
When to convert an image to vector
🏷️
Logos & Brand Assets
Got a logo saved as PNG? Vectorize it for use in print, presentations, and embroidery — scales to any size without blurring.
🎨
Icons & Illustrations
Convert flat-color icons and cartoon illustrations into editable SVG paths. Open in Figma, Illustrator, or Inkscape and refine.
📷
Photo to Art Effect
Use 4–8 colors to posterize a photograph into bold graphic art. Great for posters, prints, and social media graphics.
🌐
Web & UI Graphics
SVG files are resolution-independent and tiny for simple graphics. Perfect for web icons, backgrounds, and decorative elements.
Why this vectorizer?
🔀
True color tracing
Uses the ImageTracer.js algorithm to convert color regions into real SVG <path> elements — not an embedded raster image.
🎨
Editable color palette
Change, remove or merge any traced color after the fact — or paste your brand hexes and have the whole image use only those.
🎛️
Full control
Five tracing modes, four quality presets, and an advanced panel with palette size, smoothing, path simplification and corner sharpness.
🔒
100% private
Everything runs in your browser tab. Your files never leave your device — no server, no storage, no account required.
📦
Batch + ZIP
Drop as many images as you need. Process all at once and download every SVG in a single ZIP archive.
📐
Editable output
The SVG opens in Adobe Illustrator, Affinity Designer, Figma, and Inkscape as fully editable vector paths.
🖼️
SVG, PDF, EPS, DXF
Four vector exports plus a PNG re-render at the source image’s own dimensions — DXF and EPS go straight into Cricut Design Space, LightBurn and CAD.
How to vectorize an image
1
Drop your image
Drag and drop any PNG, JPG, WebP, BMP or GIF onto the tool — or click to browse. Works best on logos, icons and illustrations.
2
Pick a mode
Logo, Illustration and General trace in colour; Line Art and B&W trace to two tones with a threshold slider. Then choose a quality preset, or open Advanced for the individual controls.
3
Vectorize
Click the Vectorize button. The color tracing engine runs in seconds and generates an SVG with real scalable paths.
4
Download
SVG for editors and the web, PDF for print, EPS for older print workflows, DXF for cutting and CAD — or re-render a lossless PNG at the source dimensions.
Choosing a tracing mode
The mode decides how the image is reduced before any path is drawn, and it matters more than any other setting. Three modes trace in color; two reduce the image to two tones, which is what cutting and engraving software expects.
🎨 General
All-purpose color tracing, 8–64 colors. Start here when the image is mixed, or when you are not sure — every other mode is a narrower version of this one.
🏷️ Logo
4–32 colors, the sharpest corner setting and the most aggressive path merging. Flat brand marks, icons and app glyphs. It produces the smallest and most editable SVG of any mode, because fewer paths is the whole point of a logo file.Also traces at up to 2400 px rather than 1600, so a large source keeps its edge precision.
🖼️ Illustration
16–48 colors with smoother regions and gentler corners. Cartoons, stickers, AI-generated art, and anything with soft shading that would break into speckles under the Logo settings.
✏️ Line Art
Two-tone tracing at a fixed threshold of 180, so mid-greys fall to the background and only the strokes survive. Pencil sketches, coloring pages, tattoo flash and scanned ink.
⬛ Black & White
Two-tone as well, but you drive the threshold yourself and choose whether the dark or the light areas become the marks. This is the mode for Cricut, vinyl cutting, laser engraving and screen printing — drag the threshold until the preview shows the shape you actually want to cut.Use the Difference view in the comparison toolbar to see exactly which pixels the threshold is dropping.
SVG, PDF, EPS or DXF — which download do you need?
One trace produces all of them, and every result card offers all of them. They are not interchangeable, and the difference that catches people out is at the bottom of this table.
SVG
The default, and the most faithful. Real <path> elements with the traced curves intact. Use it for the web, Figma, Illustrator, Inkscape, Affinity Designer and Sketch.
PDF
The same paths, curves and all, wrapped for print and for anyone who does not have a vector editor. Page size is set from the traced dimensions at 72 dpi.
EPS
PostScript, for the older print and sign-making workflows that still ask for it. Shapes with holes are written as a single filled path with nonzero winding, so a letter O stays a letter O rather than a solid blob.
DXF
Geometry only — closed polylines with no fill and no color, which is what a cutter or CAD package follows. Opens in LightBurn, Silhouette Studio, Fusion 360, AutoCAD and most CNC software.
PNG
Not a vector at all: a clean re-render of the traced result at your source image's pixel dimensions. Useful when you wanted the posterized look rather than an editable file.
The catch
EPS and DXF flatten the traced curves into short straight segments. SVG and PDF keep the curves as curves. At normal sizes the difference is invisible, but if you are going to zoom in hard or re-edit the paths afterwards, work from the SVG and convert at the end.This is a property of how those two formats are written here, not of the formats themselves — it is the honest trade for exporting them without a server.
Editing the colors after the trace
Every result carries a Colors panel listing the colors that ended up in the SVG, each with the share of the artwork it covers — measured from real path area, so one big background and forty specks are not reported as equals.
Recolor
Click a swatch and pick a new color. The preview updates as you drag, and the change is written into the SVG itself — so the PDF, EPS, DXF and ZIP downloads all carry it too.
Remove
Deleting a color drops its shapes entirely, leaving that area transparent. This is the fastest way to knock a white background off a traced logo, and it is reversible — the swatch stays in the list so you can put it back.
Merge similar
Joins colors that read as the same shade. Useful after tracing a JPEG, where compression turns one flat area into three near-identical tones and each one becomes its own set of paths.
Limit to 2 / 4 / 8 / 16
Collapses the palette to a fixed count, merging the closest pairs first. The merged color is an area-weighted average, so a 1% speck cannot drag a 60% background off its shade.
Brand palette
Paste your brand hexes — #0A66C2 #FFFFFF #000000 — and choose how to apply them. Recolor maps the shapes already traced onto the nearest brand color, instantly. Re-trace runs the tracer again using only your colors, so the region boundaries are computed against the brand palette: cleaner shapes and fewer paths. Either way the output contains those values and nothing else, which is what a brand guideline actually requires.Import reads them out of any text file you already have: a CSS or SCSS file, a Tailwind config, a JSON token file, a GIMP .gpl swatch export, or an SVG.
The honest limit
This recolors the shapes that were traced — it does not re-trace. Removing a color changes the path count; changing one does not. So collapsing 32 colors to 4 here gives you four colors over 32 colors' worth of geometry. For the cleanest possible paths at a small palette, set Colors in the Advanced panel and vectorize again — then use this to fine-tune.
Making the SVG smaller — and what it costs
Detail and file size pull against each other. A 32-color trace of a photograph can run to hundreds of shapes and megabytes of path data, which is slow to render and unpleasant to edit. The Optimize panel on each result shows exactly what it would save before you commit to it, and Revert puts the full file back.
Drop dead attributes
Lossless. Every path is written with a stroke at width 0 — a stroke that cannot paint anything — plus opacity="1", which is the default anyway. That is roughly 40 wasted bytes on every path, and a detailed trace has thousands. A viewBox is added at the same time so the file scales properly in CSS.
Merge shapes by color
Joins neighbouring shapes that share a color into one. This is the one with a trade-off — see below.Only a run of shapes that are already adjacent in draw order is merged. Two regions of the same color separated by a third color stay separate, because joining them would move one in front of the other and change the picture.
Remove redundant points
Lossless. Tracing a straight edge produces a run of single-pixel steps, and a point that sits on the line between its two neighbours contributes nothing to the shape. Curves are untouched — a curve stays a curve rather than being flattened into line segments.
Shorten numbers
Rounds coordinates to two decimals and writes .5 instead of 0.5. Points can move by up to a hundredth of a pixel, which is the only geometric change anything here makes.
Remove invisible shapes
Lossless. Fully transparent shapes, shapes with fewer than three points, and shapes with no width or height. None of them can paint a pixel.
The trade-off, plainly: merging turns each color into a single shape. You can still recolor it, but you can no longer click one region of that color on its own in Illustrator, Figma or Inkscape — the whole color selects together. If you are going to hand-edit individual shapes, leave that switch off; you keep most of the saving from the other four. Everything else is lossless, and Revert restores the full file at any point.
Output format & workflow specification
Every file produced by this tool follows the same well-defined spec. No ambiguity about what you're downloading or whether it will open in your editor.
Output formats
SVG (W3C standard — browsers, editors, the web) · PDF (print) · EPS (older print and sign-making workflows) · DXF (cutting machines and CAD) · PNG re-render.Every result card offers all five; SVG is the default.
SVG structure
<svg viewBox> root containing one <path d="M…"> per traced color region. No embedded <image> tag, no raster fallback — pure math curves.
Path editability
Fully editable — opens in Adobe Illustrator, Figma, Inkscape, Affinity Designer, and Sketch with individually selectable paths per color region.Fewer colors → fewer paths → easier to edit. Use 4–8 colors for cleanest editable logos.
Color layers
2 to 64 colors (your choice). Each color becomes an independent path layer. Logos: 4–16 colors. Illustrations: 16–32. Photos as art: 4–8. Line Art and B&W modes always trace to exactly 2.
SVG optimizer
Opt-in. A detailed trace produces a large file that is slow to render and awkward to edit. The Optimize panel shows what it would save before you apply it — measured on your file, not estimated — and Revert restores the full version at any time.Five switches: drop dead attributes (a zero-width stroke and opacity="1" are ~40 wasted bytes on every path), merge shapes by color, remove points that sit on a straight line, shorten numbers, and drop shapes that cannot paint a pixel. On a 32-color gradient trace that is 208 shapes and 48 KB down to 32 shapes and 26 KB, with the painted area unchanged to within 0.002%.
Color palette editor
Every result lists the colors it actually contains, with the share of the artwork each one covers. Recolor any of them, remove one entirely, merge near-duplicates, collapse to 2/4/8/16, or snap the whole thing onto your brand colors.Distances are measured in CIE Lab, not RGB. A single RGB tolerance means a different thing in every part of the color cube — nine pairs an identical 55 apart in RGB span a 2× range perceptually — so merging in RGB over-merges darks and under-merges lights.
Batch processing
Unlimited files per session. Drop any number of images — they trace one after another, each result appearing as it finishes.Tracing runs in a Web Worker, so the page stays responsive throughout: you can scroll, read, compare finished results, or cancel mid-batch. The button becomes Cancel while a run is in progress.
Batch ZIP download
One-click ZIP downloads all SVG results as convertlo-vectors.zip. Each file is named to match the original input.
PNG re-render
Any SVG result can be re-rendered back to a lossless PNG at the source image’s own pixel dimensions — the vector carries no resolution of its own, so it re-renders at full size even when it was traced smaller.
Input formats
PNGJPGWebPAVIFHEICBMPGIF
Trace resolution
The image is downscaled before tracing, so this is the real ceiling on edge precision. Logo, Line Art and B&W: 2400 px on the long edge. General and Illustration: 1600 px, dropping to 1200 px at 48+ colors.The limit is higher for the low-color modes because they produce far fewer paths, so the extra pixels are cheap — and a logo is exactly where the precision matters. A result card says traced at W×H whenever a downscale happened.
Input file size
Up to ~50 MB per file. No server-side cap — limit is your device's available RAM.Very large photos (20 MP+) at high color counts may take 5–15 s to trace.
SVG output size
Logos / icons: typically 5–80 KB. Complex photos at 32+ colors: 500 KB–5 MB. Reduce color count or raise Smoothness to shrink output.Run output through SVGO or Figma's optimizer to compress further post-export.
Upload required
None. All processing is client-side (ImageTracer.js). Your files never leave your device — no server ever sees them.The tracing engine itself is fetched from a CDN the first time you vectorize, so the first run needs a connection. Your image is not part of that request.
Account / watermark
No account required. No watermark. No usage cap. Free forever.
True vectorization vs. raster wrapper
Not all SVG converters are equal. Some tools simply embed your PNG inside an <svg> tag — the image stays raster and still blurs when scaled. This tool runs actual color tracing, producing a file made entirely of <path> elements.
❌ Raster wrapper
Contains an <image xlink:href="data:image/png…"> tag
Blurry when scaled up — it's still a pixel grid
Cannot select or edit individual shapes
File size ≈ original PNG (base64-encoded inside SVG)
Single opaque layer, no color separation
✓ True color tracing
Real <path d="M…"> elements — pure math curves
Crisp at any zoom: billboard, favicon, retina display
Fully editable in Illustrator, Figma, Inkscape
Small for simple graphics — a logo may be under 20 KB
Separate path per color region — select and recolor individually
How to tell which type you have: open any SVG in a text editor. If you see <image xlink:href="data:image/png near the top, it's a raster wrapper. If you see <path d="M repeated throughout the file, it's a real vector. This tool always produces the latter.
What images vectorize well
Vectorization quality depends almost entirely on the source image. Use this guide to set expectations — and to choose the right color count for your specific image type.
🏷️
Logo / flat design
Excellent
2–32 solid colors, clean edges, no gradients. Produces a compact, clean SVG that edits perfectly in Illustrator or Figma.
Logo mode · Balanced (8 colors)
⬛
Icon / UI element
Excellent
Flat geometric shapes with sharp edges trace into near-perfect vectors. Results are indistinguishable from hand-drawn SVG.
Logo mode · Fast (4 colors)
🖼️
Cartoon / illustration
Good
Flat-color cartoons vectorize well. Shading and gradients add many paths — raise color count to preserve detail, or reduce for a cleaner stylized look.
Illustration mode · High Quality (32 colors)
✏️
Clip art / line drawing
Good
Black-and-white line art traces into clean two-color SVGs. Crisp scanned art at 300 dpi+ gives the best path accuracy.
Line Art mode · threshold around 180
🎨
Photo (artistic effect)
Fair
Reducing a photo to 4–8 colors produces a bold poster-style vector with visible color regions. Great for art prints — not for realistic reproduction.
General mode · Fast (8 colors)
📷
Photo (faithful copy)
Not ideal
Faithful photo vectorization needs 64+ colors and produces enormous SVG files with thousands of paths. SVG is the wrong format for photos — use JPEG or WebP instead.
Use JPEG/WebP; vectorize only for artistic effect
Frequently asked questions
This is a real color-tracing vectorizer. It uses the ImageTracer.js algorithm to trace your image's color regions into actual SVG <path> elements — each color area becomes a filled vector shape. The output is a true scalable SVG, not a raster image wrapped in an SVG container. You can open it in Illustrator or Inkscape and edit the individual paths.
Logo for flat brand marks and icons: a small palette and sharp corners, so you get few paths that are easy to edit. Illustration for cartoons, stickers and AI art, where a richer palette matters more than path count. General when the image is mixed or you are not sure. Line Art traces dark strokes against white, for sketches, coloring pages and tattoo flash. B&W gives you a threshold slider and pure two-tone output, which is what cutting and engraving software expects.
Yes — use B&W mode. Cutting and engraving software wants clean two-tone shapes, not a 32-color trace with anti-aliased edges, so drag the threshold until the preview matches the shape you want to cut. Then download SVG for Cricut Design Space, or DXF for LightBurn, Silhouette Studio and most CAD packages. The DXF is exported as closed polylines with no fill, which is exactly the geometry a cutter follows.
SVG is the source of truth: real paths, editable everywhere, and what you want for the web, Figma, Illustrator and Inkscape. PDF wraps the same paths for print and for anyone without a vector editor. EPS is for older print and sign-making workflows that still ask for it. DXF is geometry only — closed polylines, no fill or color — which is what cutting machines and CAD read. One difference worth knowing: EPS and DXF flatten the traced curves into short line segments, so they are geometrically close but not identical, while SVG and PDF keep the curves intact.
Vectorization works best on images with clean edges and limited colors: logos, icons, illustrations, flat-design graphics, clip art, and simple cartoons. Photographs and images with gradients or complex textures produce large SVG files with thousands of paths — they can be vectorized but the result is better suited for artistic effects than practical use. For photos, use fewer colors (4–8) to get a bold poster-style vector output.
Standard PNG-to-SVG conversion wraps the raster image inside an SVG container — the image stays pixelated when scaled up. This tool performs actual color tracing: it analyses your image pixel by pixel, groups pixels into color regions, and converts those regions into scalable vector paths. The result scales to any size without losing quality.
Yes. The SVG output contains standard <path> elements that open in any vector editor — Adobe Illustrator, Inkscape, Figma, Affinity Designer, and Sketch. Each color region is a separate path layer. Fewer colors and a lower Simplify setting produce fewer paths that are easier to edit.
Vectorization is a lossy process — the algorithm approximates your image with a limited set of color regions and vector paths. Photographs and complex images will look simplified or posterized. For the most faithful reproduction, raise the color count to 32 or 64. For a clean graphic style, keep it low (4–8). Large images are also downscaled before tracing — to 2400 px on the long edge in Logo, Line Art and B&W, and 1600 px in the color modes — so very fine detail in a huge source will not survive.
No. The entire vectorization runs in your browser using the ImageTracer.js library. Your images never leave your device — nothing is sent to any server. The tracing engine itself is fetched from a CDN the first time you vectorize, so that first run needs a connection; your image is not part of that request.
SVG stores data as mathematical path descriptions rather than pixel grids. Complex images with many color regions can produce SVG files larger than the original PNG. For web use, SVGs are most efficient for simple logos and icons. If your SVG is too large, reduce the color count and raise Simplify to generate fewer, simpler paths.
Yes — every result has a Colors panel. It lists the colors the SVG actually contains with the share of the artwork each one covers, and you can recolor any of them, remove one (which drops its shapes and leaves that area transparent — the quickest way to knock a white background off a logo), merge near-duplicates, or collapse the palette to 2, 4, 8 or 16. For brand work, paste your hex values and every traced color snaps to its nearest brand color, so the output contains those values and nothing else. Colors are matched in CIE Lab rather than RGB, because one RGB tolerance means a different thing in every part of the color cube. One caveat worth knowing: this recolors the shapes that were already traced rather than re-tracing, so removing a color changes the path count but changing one does not.
Yes, and there are two ways. In the Colors panel, paste your brand hex values and press Recolor to map the shapes that were already traced onto the nearest brand color — instant, and it keeps all the detail of the original trace. Or press Re-trace, which runs the tracer again using only your colors, so the shapes themselves are found against the brand palette. Re-trace takes a moment but gives far fewer paths and a file that is much easier to edit afterwards, because you get the result you would have had if you had traced in those colors from the start. Either way the output contains exactly the hex values you supplied and nothing else.
Yes, and it is opt-in — press Optimize on any result. The panel shows what it would save before you apply it, measured on your actual file rather than estimated, and Revert puts the full version back at any time. It drops attributes that cannot render (every path carries a stroke at width 0 and a redundant opacity, roughly 40 wasted bytes each), removes points that sit on a straight line between their neighbours, shortens numbers, discards shapes that cannot paint a pixel, and merges neighbouring shapes of the same color. On a 32-color gradient trace that took 208 shapes and 48 KB down to 32 shapes and 26 KB with the painted area unchanged to within 0.002 percent. The one trade-off is merging: it turns each color into a single shape, so you can still recolor it but you can no longer select one region of that color on its own in a vector editor. Leave that switch off if you plan to hand-edit individual shapes.
All SVG tools
Every SVG conversion available on Convertlo — raster to vector and vector to raster, all 100% browser-based, no upload required.