Image to SVG Converter

Convert any image to SVG, right in your browser

Most pictures on your computer are raster images: a fixed grid of colored pixels. A PNG, a JPG, a WebP, a GIF, a BMP — they differ in how they compress and store those pixels, but they are all, fundamentally, a rectangle of dots. That works fine at the size the image was saved, but enlarge it for a banner, a t-shirt, or a high-resolution screen and the edges break into stair-steps and blur. An SVG stores artwork as mathematical paths instead of pixels, so it stays perfectly sharp at any size — from a 16-pixel favicon to a billboard — and usually weighs far less. Converting an image to SVG is how you take a logo or icon that only exists as a raster and make it resolution-independent again.

Vectorizely does this by tracing: it reads the shapes and color regions in your image and rebuilds them as editable SVG <path> elements. This is a true raster to vector conversion — an image to vector pass, a picture to SVG, not a picture wrapped in an SVG. The whole process runs in your browser, so your file never touches a server. That is faster (no upload), private (safe for unreleased logos and client work), and the reason the tool is free: there are no compute bills to pass on.

To convert an image to SVG, drop a file into the tool above and it traces immediately — this is the general hub for every raster input. If you already know your input format, the dedicated pages go deeper on each one's quirks — PNG to SVG (transparency, screenshots, UI exports) and JPG to SVG (compression artifacts, why photos resist tracing). The tool itself is identical; only the advice differs.

Which image formats convert to SVG?

Any raster format the browser can decode can be traced — the tracer reads the decoded pixels, so it does not care how they were stored on disk. In practice that covers everything you are likely to have:

Input format	What it is	Traces well?	Notes
PNG	Lossless raster, supports transparency	✅ Yes	The cleanest source for logos and icons — no compression noise. See PNG to SVG.
JPG / JPEG	Lossy raster, photographic	⚠️ Depends	Flat graphics trace fine; compression artifacts add noise near edges. See JPG to SVG.
WebP	Modern lossy/lossless raster	✅ Yes	Treated like a PNG or JPG depending on how it was saved; transparency preserved.
GIF	Indexed-color raster (≤256 colors)	✅ Often	Already a limited palette, which suits tracing; only the first frame of an animation is read.
BMP	Uncompressed raster	✅ Yes	No compression artifacts at all; just large files going in.

What the source format cannot change is the nature of the image. A photograph saved as a lossless PNG still traces into posterized blobs, because the problem is the smooth tonal content, not the file type. So the format determines how much edge noise you start with; the subject determines whether tracing is the right tool at all.

How to convert an image to SVG

1. Add your image. Drag any raster file onto the tool above or click to browse. It is read locally — nothing is uploaded.
2. Set the colors. Use the Colors slider to control how many distinct colors the vector keeps. A two-color logo traces cleanest at a low number; a detailed illustration needs more.
3. Check the live preview. The SVG appears next to your image instantly. Zoom in to confirm the edges are clean and the shapes are right.
4. Download the SVG. Save a real, scalable vector you can open in Illustrator, Inkscape, Figma, or drop straight into a website.

Raster vs vector: the fundamental difference

Everything about converting an image to SVG follows from one distinction, so it is worth being precise. A raster image is a value-per-pixel map. A 1920×1080 photo is literally just over two million color samples laid out in a grid; the file stores (or compresses) that grid. To make it bigger, software has to invent pixels that were never measured — interpolation — which is why enlargement blurs and reveals stair-stepped edges. Raster is the right model for content that genuinely varies pixel by pixel: photographs, painted textures, anything with continuous tone.

A vector image stores instructions instead of samples: "fill this region bounded by these curves with this color." Because the shapes are described mathematically, the renderer can draw them crisply at any resolution — there is no native pixel size to outgrow. Vector is the right model for content that is fundamentally made of distinct shapes and flat colors: logos, icons, type, line art, diagrams. The table makes the trade-off concrete:

	Raster (PNG, JPG, WebP, GIF, BMP)	Vector (SVG)
Stores	A grid of pixel colors	Shapes, paths and fills as math
Scales without quality loss	No — blurs and pixelates	Yes — sharp at any size
Best for	Photos, complex imagery, fixed-size graphics	Logos, icons, line art, anything resized often
Editable shapes & colors	No (pixels only)	Yes (paths, recolorable in CSS)
Typical file size for a logo	Tens–hundreds of KB	Often a few KB
Animatable / styleable in code	Limited	Yes (CSS & JS)

Converting an image to vector form is therefore not a format toggle like PNG-to-JPG. It is a reconstruction: the tool has to look at the pixels and work out what shapes they were meant to represent. That reconstruction is the whole game, and it is why the kind of image you feed in matters far more than the format it arrived in.

What “image to SVG” actually does

It helps to be precise, because the phrase hides two very different operations. There is no lossless way to “convert” pixels into vectors — the information simply is not there in the same form — so a converter has to trace: detect edges, group similar colors into regions, and approximate each region's boundary with smooth curves. The result is a genuine vector, but it is an interpretation of your image, not a pixel-perfect copy. For clean, flat artwork that interpretation is essentially indistinguishable from the original and scales forever. For a photograph it is a rough approximation, which is why the input matters so much.

This is the opposite of going the other way. Rasterizing a vector to a PNG is deterministic and lossless-ish — you are just sampling a known shape onto a grid. Tracing a raster to a vector is a guess, an inference about intent. A good tracer makes that guess well for the images it is suited to and is honest about the ones it is not.

When image → SVG works brilliantly — and when it doesn't

Tracing quality is almost entirely a function of the kind of image you feed it, not its format:

Image type	Result	Recommended?
Logo / wordmark	Crisp, a handful of clean paths, tiny file	✅ Ideal
Icon / pictogram	Sharp, editable, scales to any size	✅ Ideal
Line art / sketch	Clean outlines; raise smoothing for flowing lines	✅ Great
Flat illustration	Good with enough colors; slightly stylized	✅ Good
Screenshot / UI	Text edges can get rough; usable for shapes	⚠️ Mixed
Photograph	Posterized blobs, large file	❌ Keep as raster
Gradient / soft shading	Banding into flat steps	❌ Keep as raster

The rule of thumb: if you could redraw the image with a limited set of solid colors and clean edges, it will vectorize well. If it depends on smooth tonal transitions — skin, sky, photographic texture — it will not, and the honest move is to keep the original raster. We would rather tell you that than hand you a five-megabyte SVG that looks worse than what you started with.

A real vector vs. an image hidden inside an SVG

This is the single most common trap with free converters, and it is worth understanding. An SVG file is allowed to embed a bitmap — you can wrap your PNG or JPG in an <image> tag, often as a base64 string, save it with an .svg extension, and technically you have “an SVG.” But it is a lie of a vector: it does not scale, it cannot be edited path-by-path, and the file is often larger than the image it contains (base64 adds about a third). Plenty of converters do exactly this because it is instant and always “works.”

Vectorizely traces real <path> geometry. You can tell the difference in seconds: zoom the output preview far in — a real vector stays razor-sharp, an embedded bitmap pixelates just like the original. The path count shown under the tool is another tell: a genuine trace reports tens or hundreds of paths; an embedded picture reports zero. And if you open the file in a text editor, a real vector is a readable list of path commands, while a fake one is one giant data:image/png;base64,… blob.

Choosing the right number of colors

The Colors slider is the single most important control, because it sets the size of the palette the tracer quantizes your image down to before it draws anything. Get it right and the rest usually takes care of itself:

• 2–4 colors — flat logos, wordmarks, monochrome icons. You want a few crisp shapes and nothing else; a low count forces the tracer to ignore anti-aliasing fuzz and stray tones.
• 5–12 colors — multi-color logos, simple flat illustrations, badges. Enough range to keep the distinct brand colors without inventing noise between them.
• 16–32 colors — detailed illustrations, stylized art, anything with several deliberate shades. The default of 16 is a sensible middle ground for an unknown image.
• 32–64 colors — only for genuinely rich artwork where you accept a bigger file. Pushing this high on a simple logo backfires: every anti-aliased edge becomes its own near-duplicate color and litters the output with specks.

A useful instinct: pick the smallest palette that still reads as the original. Tracing rewards restraint. If two shades are nearly identical and you do not need both, merging them into one color removes a whole layer of paths and shrinks the file with no real loss.

Tuning the trace: colors, despeckle, smoothing

Three controls do most of the work. Start with the defaults; reach for the advanced ones only if the preview needs it.

• Colors — the number of distinct colors the SVG keeps, as above. The first thing to adjust on any image.
• Despeckle — removes tiny stray paths left by anti-aliasing or JPEG-style compression noise around edges. Nudge it up if your output has confetti; keep it low if you are losing real small details like thin lines or fine text.
• Smoothing — how aggressively edges are fitted to curves. Higher smoothing gives flowing, organic outlines (good for hand-drawn art); lower smoothing keeps hard corners (good for geometric logos and UI shapes).

A practical tip: if your image is small or fuzzy, the cleanest result often comes from starting with the highest-resolution version you have. Tracing a 1000-pixel logo gives the curve-fitter far more to work with than tracing a 200-pixel thumbnail, regardless of which control you touch.

What people convert images to SVG for

People convert image to SVG for remarkably consistent reasons — and almost all of them come down to either scaling something up cleanly or making it editable again:

• Web & product UI — crisp logos and icons that look sharp on every screen and pixel density, recolorable with CSS for dark mode and hover states, at a fraction of a PNG's weight.
• Print & signage — artwork that scales to posters, banners, vehicle wraps, and business cards without pixelation. A printer can rasterize a vector at whatever DPI the press needs.
• Cutting & engraving — Cricut, Silhouette, and laser cutters need clean paths to follow; a traced SVG gives them crisp outlines instead of guessing at pixel edges.
• Recovering a lost source — turning a flattened export back into editable shapes when the original Illustrator or Figma file is gone. The trace is not the original, but it is a workable starting point.
• Embroidery & vinyl — flat, well-separated color regions map directly onto stitch and weeding paths.
• Icon systems & design hand-off — normalizing a pile of mismatched raster icons into a consistent, scalable vector set.

The file-size economics of switching to SVG

For the artwork SVG is built for, the size win is not marginal — it is often an order of magnitude, and it compounds. A raster logo has to ship one file per resolution to stay sharp (a 1×, 2×, and 3× PNG, say, or several favicon sizes), and each is tens of kilobytes. A single traced SVG replaces all of them and renders sharp at every one of those sizes from a few kilobytes of text. On a page that loads a dozen icons, that is the difference between a few hundred kilobytes of images and a few kilobytes inlined into the HTML — fewer requests, faster first paint, and no blurry icons on a high-density display.

The caveat is the same one that runs through this whole page: the economics only work in SVG's domain. Trace a photograph and the vector can easily come out larger than the JPG you started with, because representing photographic detail as thousands of tiny paths is wildly inefficient. So the size argument is really another way of stating the suitability rule — flat, shape-based artwork is both where tracing looks best and where it pays off in bytes.

How image tracing works under the hood

Tracing an image into paths happens in three stages, and each maps directly to a control in the tool:

1. Color quantization. The image's thousands of slightly different pixel colors are reduced to a small palette of N representative colors — that is the Colors slider. This is why a clean two-color logo wants a low number and a richer illustration needs more.
2. Region segmentation. Adjacent pixels of the same quantized color are grouped into connected regions. Tiny stray regions — usually the fuzzy halo left by anti-aliasing or compression — are discarded according to the Despeckle threshold.
3. Curve fitting. The jagged pixel boundary of each region is approximated with smooth Bézier curves. How tightly the curve hugs the original edge versus how much it smooths is the Smoothing control.

Understanding this makes the failure modes obvious. A photograph has effectively unlimited colors and no clean region boundaries, so quantization throws away most of the information and segmentation produces a chaos of little blobs — hence the posterized result. Flat artwork, by contrast, already is a small set of solid-color regions with crisp edges, so every stage has an easy job. Knowing the pipeline also tells you which knob to reach for: too many colors is a quantization problem, confetti is a segmentation problem, and over-rounded corners are a curve-fitting problem.

What's actually inside an SVG file

An SVG is not a mysterious binary like a PNG — it is plain text (XML) you can open in any code editor and read. A traced logo might look like a short list of <path> elements, each with a d attribute describing a series of move, line, and curve commands, plus a fill color. Wrapping them is an <svg> tag with a viewBox — the coordinate system that lets the whole thing scale to any pixel size without redrawing. Because it is text, an SVG diffs cleanly in version control, compresses extremely well with gzip/brotli, and can be recolored or animated with nothing but CSS. That transparency is a big part of why vectors are the right format for anything that needs to live a long time and adapt to many contexts.

Cleaning up and optimizing your SVG

A traced SVG is production-ready, but you can often make it smaller and tidier. The standard tool is SVGO (and its web front-end SVGOMG): it strips editor metadata, collapses redundant groups, and rounds coordinates to a sensible precision, frequently cutting file size by half with no visible change. If you opened the file by hand you could also merge several paths that share a fill color, or delete a stray speck the despeckle pass missed. For most logos none of this is necessary — the trace is already a few kilobytes — but for detailed artwork it is worth a pass before shipping. Serve the result with gzip or brotli compression and an SVG often ends up a fraction of the equivalent PNG over the wire.

How to use your new SVG

Once you have the file, here is where it actually goes:

• On a website — drop it in with <img src="logo.svg">, or paste the SVG markup inline so you can recolor it in CSS (set fill: currentColor and the icon inherits your text color). Inline SVGs are also animatable and styleable per-state (hover, dark mode).
• As a component — most frameworks import SVGs directly; tools like SVGR turn one into a React/Preact component so you can pass props like size and color.
• In design tools — open or place it in Figma, Illustrator, Inkscape, Affinity Designer, or Sketch as fully editable shapes.
• On Cricut, Silhouette & laser cutters — upload the SVG to Cricut Design Space, Silhouette Studio, or a laser cutter's job software; the machine follows the vector paths as cut or engrave lines. Clean, well-separated color regions are exactly what these workflows want.
• For embroidery & vinyl — flat, distinct shapes map directly onto stitch and weeding paths.

Vectorizely vs. Illustrator, Inkscape, and paid tracers

There is no single “best” tracer — it depends on the job. Here is the honest landscape:

Tool	Cost	Best for	Trade-off
Vectorizely	Free	Logos, icons, flat art — fast, private, no upload	Not built for photographic tracing
Illustrator Image Trace	Subscription	Designers already in Adobe, fine manual control	Costs money; another app to open
Inkscape (Trace Bitmap)	Free	Power users who want every knob, offline	Desktop install; steeper learning curve
vectorizer.ai / Vector Magic	Paid	The hardest images — complex color, near-photographic	Watermarked or paywalled; uploads your file

For the everyday case — “I have an image and need a clean SVG” — an in-browser tracer is the fastest path and keeps your artwork on your machine. Illustrator's Image Trace and Inkscape's Trace Bitmap use the same underlying ideas (quantize, segment, fit curves) with more manual control and a longer setup. If you are tracing something genuinely photographic and need the absolute best edge quality, a dedicated paid engine will beat any free tracer; that is a real limit, not a marketing line, and we would rather point you there than pretend otherwise.

Common problems, and how to fix them

• Output looks blocky. The source is probably a photo or a gradient — those do not trace cleanly. Keep the raster, or simplify the artwork first.
• Stray specks everywhere. Raise Despeckle and/or lower Colors. Anti-aliased and compressed edges create lots of near-duplicate colors that become noise.
• Edges too rounded / corners lost. Lower Smoothing to keep hard geometry.
• Lost a thin line or small text. Lower Despeckle so small paths survive, and start from a higher-resolution image.
• Colors slightly off. Tracing quantizes to a fixed palette; raise Colors a little, then recolor exact brand values in your vector editor afterward.
• A JPG traces noisily. JPEG compression scatters faint color around edges; raise Despeckle, or re-export the source as PNG if you can. The JPG to SVG page covers this in detail.

Make your SVG accessible

A vector that conveys meaning should be readable by assistive technology. For an inline SVG, add a <title> (and optionally a <desc>) as the first child and reference it, or put role="img" with an aria-label on the <svg>. Purely decorative marks should be hidden from screen readers with aria-hidden="true". And because some users override colors or are colorblind, never rely on color alone to carry meaning — shape and label should stand on their own.

Why this runs in your browser

Most online converters upload your file, process it on their servers, and send it back — which means your unreleased logo or a client's brand asset briefly lives on someone else's machine, and you are trusting their retention policy. Vectorizely traces locally using in-browser code, so the image never leaves your device. It works offline, there is no upload wait, and confidential artwork stays confidential. It is also why the tool can stay free: there is no per-conversion server cost to recover, so there is no paywall, no watermark, and no “sign up to download.”