JPG to SVG Converter

Convert a JPG to SVG and get a vector you can actually scale

A JPG is a grid of pixels that has been through a lossy compressor. It looks fine at the size it was saved, but enlarge it for a banner, a t-shirt, or a high-density screen and the edges break into stair-steps — and you start to see the faint blocks and color halos that JPEG compression baked in. 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. To convert JPG to SVG is to take a logo or graphic that only exists as a compressed raster and rebuild it as a resolution-independent vector.

Vectorizely does this by tracing: it decodes your JPEG, reads the color regions, and rebuilds them as editable SVG <path> elements — turning your jpg to vector in one step. (JPG and JPEG are the same format and the same file; JPEG to SVG works identically.) The whole process runs in your browser, so the file never touches a server. That is faster (no upload), private (safe for unreleased graphics and client work), and the reason the tool is free — there are no compute bills to pass on.

How to convert a JPG to SVG

1. Add your JPG. Drag it onto the tool above or click to browse. It is read locally — nothing is uploaded. Start from the highest-quality copy you have; a heavily compressed JPEG traces worse.
2. Set the colors. Use the Colors slider to control how many distinct colors the vector keeps. A flat logo traces cleanest at a low number; a detailed illustration needs more. Lowering it also helps collapse the near-duplicate tones JPEG compression introduces.
3. Raise Despeckle. Open the Advanced controls and nudge Despeckle up. JPEGs carry block artifacts and edge noise that become stray paths; despeckle discards them.
4. Check the preview and download. The SVG appears next to your JPG instantly. Zoom in to confirm the edges are clean, then save a real, scalable vector you can open in Illustrator, Inkscape, Figma, or drop straight into a website.

Why JPGs are a harder starting point than PNGs

Tracing turns colored regions into paths, and it does its best work when those regions have crisp, honest edges. JPEG, by design, does not give you that. It is a lossy format built for photographs: it throws away detail your eye is unlikely to miss in order to shrink the file. The machinery that makes it small is exactly what makes it awkward to trace.

• 8×8 block artifacts. JPEG compresses the image in 8-by-8 pixel blocks. Push the quality down and the blocks become visible as faint squares, especially across flat areas and gentle gradients. To a tracer those block boundaries look like real edges, so it dutifully draws paths around them.
• Ringing and halos. Around any hard edge — the outline of a logo, a line of text — JPEG produces a shimmer of mismatched pixels called ringing. That halo becomes a fringe of thin, near-duplicate-color paths in the trace.
• Chroma subsampling. JPEG usually stores color at half resolution, so sharp color boundaries get smeared. A crisp red-on-white edge becomes a soft pink transition that the tracer renders as an extra in-between region.
• Color noise. Compression introduces thousands of slightly different colors where the original had a handful of flat ones. Without intervention, those become a confetti of tiny paths.

None of this is fatal — it just means a JPG needs a little more care than a PNG. The fixes are the same two controls every time: raise Despeckle to drop the noise and ringing paths, and lower Colors so the near-duplicate tones collapse back into the few regions the artwork actually has. A PNG of the same logo would need less of both, because it is lossless and carries none of these artifacts. That is the honest difference, and it is the whole reason this page exists separately from the PNG one.

The thing that matters most: photo JPG vs. flat-graphic JPG

JPG is the default camera and screenshot format, so most JPGs are photographs — and photographs are the worst possible input for tracing. But plenty of JPGs are not photos at all: a logo someone saved as JPG, an exported flat illustration, a diagram, a clip-art graphic. The content of the JPG predicts the result far more than the fact that it is a JPG.

Your JPG is…	Trace result	Recommended?
A flat logo or wordmark saved as JPG	Crisp paths after a despeckle pass; tiny file	✅ Ideal
An icon, badge, or pictogram	Sharp and editable; clean up the JPEG halo	✅ Ideal
A flat illustration or clip-art	Good with enough colors; slightly stylized	✅ Good
A diagram, chart, or line drawing	Clean outlines; lower smoothing keeps corners	✅ Good
A screenshot of UI	Shapes trace fine; text edges get rough	⚠️ Mixed
A photograph (person, product, scene)	Posterized blobs plus JPEG block noise, huge file	❌ Keep as raster
A photo with sky, skin, or soft shading	Visible banding into flat color 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 even straight from a JPG. 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 the JPG you started with. A vector of a photo is almost always a step backward.

Getting a clean trace from a JPG: the practical method

Because JPGs come pre-loaded with noise, the workflow is slightly different from tracing a pristine PNG. Here is the order that works:

1. Start from the highest-quality JPG you have. This is the single biggest lever. Re-tracing a small, heavily compressed thumbnail just bakes the artifacts permanently into the vector. If the graphic exists anywhere at higher quality — a larger export, the original file, a version before it was re-saved a few times — use that. Every re-save of a JPG compounds the loss.
2. Lower the Colors count first. JPEG turns a flat 3-color logo into a swarm of near-identical shades. Pulling Colors down to roughly the number the artwork actually has forces those back into clean, solid regions and ignores most of the compression noise in one move.
3. Raise Despeckle to clear the wreckage. Whatever noise survives quantization — the ringing halo around edges, stray block speckle — gets swept up by a higher despeckle threshold. This is the control you will lean on most for JPGs; a PNG rarely needs it pushed as far.
4. Tune Smoothing for the edge style. Lower smoothing keeps hard corners (logos, UI, geometric marks); higher smoothing gives flowing lines (hand-drawn art). JPEG's softened edges sometimes benefit from slightly lower smoothing so the tracer commits to a crisp corner rather than rounding the blur.
5. Iterate against the live preview. The trace re-runs the instant you move a slider. Zoom the output pane all the way in and watch the edges: too much confetti means more Despeckle or fewer Colors; lost detail means back off.

A small bonus trick: if you control the source, a one-pixel Gaussian blur on the JPG before tracing can actually help by averaging out block noise into smoother regions — counterintuitive, but it gives the quantizer fewer spurious colors to chase. It is rarely necessary, but it is in the toolbox for a stubborn, low-quality file.

What “JPG to SVG” actually does

It is worth being precise, because the phrase hides two very different operations. There is no lossless way to “convert” pixels into vectors — the information is not stored in the same form — so a converter has to trace: decode the JPEG, 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 JPG, 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 made worse by JPEG's own artifacts, which is why the input matters so much.

How image tracing works under the hood

Turning a JPEG into paths happens in three stages, and each maps directly to a control in the tool:

1. Color quantization. The JPG's thousands of slightly different pixel colors — many of them artifacts of compression — are reduced to a small palette of N representative colors. That is the Colors slider, and it is the first line of defense against JPEG noise: a low number forces the near-duplicate tones to merge.
2. Region segmentation. Adjacent pixels of the same quantized color are grouped into regions. Tiny stray regions — the ringing halo and block speckle JPEG leaves behind — are discarded according to the Despeckle threshold. This is why JPGs want despeckle raised higher than PNGs do.
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 photographic JPG 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, with JPEG blocks adding their own grid of false edges on top. Flat artwork, by contrast, already is a small set of solid-color regions; once you have quantized away the compression noise, every stage has an easy job.

A real vector vs. a JPG 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 JPG in an <image> tag, 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 usually larger than the JPG it contains, since it is the same compressed photo wrapped in extra markup. Plenty of converters do exactly this because it is instant and always “works” — and it is especially tempting for JPGs, because real photographic tracing is hard and embedding sidesteps it.

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 and shows its JPEG blocks 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 JPG reports zero.

JPG vs PNG vs SVG: which should you actually use?

These three solve different problems, and people often confuse a format change for a quality upgrade. Convert to SVG when scalability and editability matter and the source is flat artwork; stay on a raster when you need fixed pixels or photographic fidelity. The JPG-versus-PNG question is separate: both are rasters, but PNG is lossless (better for flat graphics and tracing) while JPG is lossy (smaller, built for photos).

	JPG / JPEG (raster, lossy)	PNG (raster, lossless)	SVG (vector)
Scales without quality loss	No	No	Yes
Best for	Photographs, complex scenes	Flat graphics, screenshots, transparency	Logos, icons, line art, anything resized often
Compression artifacts	Yes (blocks, halos, noise)	None	N/A (math, not pixels)
Editable shapes & colors	No (pixels only)	No (pixels only)	Yes (paths, recolorable in CSS)
Supports transparency	No	Yes	Yes
Typical size for a logo	Tens of KB, with artifacts	Tens–hundreds of KB, clean	Often a few KB
Good source for tracing?	Only if it is flat art	Yes — the better raster source	Already a vector

The practical takeaway: if you are choosing a source to vectorize and you have both, trace the PNG. If all you have is a JPG, that is fine — just clean up the artifacts as described above. And if the JPG is a photograph, no format conversion will make it a good vector; the right answer is to keep it as a raster.

When to convert vs. when to keep the raster

Converting is not automatically an improvement. Reach for JPG → SVG when the upside is real:

• Convert when the graphic is flat (logo, icon, diagram, clip-art), needs to scale to many sizes, must be recolored or animated in code, or has to go to a cutting machine or printer that wants vector paths.
• Keep the JPG when it is a photograph, a complex image with continuous tone, or anything where the JPEG already looks right at the size you will use it. A photo does not become more useful as a posterized vector — it becomes larger and worse.
• Re-export instead when you actually have the original artwork in a design tool. Exporting a true SVG from the source beats tracing a JPG of it every time; tracing is the rescue path for when the editable original is gone.

What people convert JPGs to SVG for

• Web & product — crisp logos and icons that look sharp on every screen and retina display, recolorable with CSS, at a fraction of a JPG's weight and without its visible artifacts.
• Print & signage — artwork that scales to posters, banners, and business cards without pixelation or JPEG blocks showing up at large size.
• Cricut, Silhouette & laser cutting — cutting machines and laser engravers follow vector paths; a traced SVG gives them the clean outlines a JPG cannot provide directly.
• Embroidery & vinyl — flat, well-separated color regions are exactly what these workflows want, and a despeckled trace delivers them.
• Design hand-off & recovery — turning a flattened JPG someone emailed you back into editable shapes when the original vector is nowhere to be found.

Common JPG problems, and how to fix them

• Output looks blocky. Usually the source is a photo or a gradient, which do not trace cleanly — or it is a very low-quality JPG whose 8×8 blocks are being traced as real edges. Keep the raster, or start from a higher-quality version.
• A fuzzy halo of specks around every edge. That is JPEG ringing. Raise Despeckle and lower Colors; both attack the noise from different angles.
• Too many near-identical colors / stray confetti. Drop the Colors count hard. JPEG manufactures dozens of shades where the artwork had a few; quantizing low merges them back.
• Edges too rounded / corners lost. Lower Smoothing to keep hard geometry — JPEG's softened edges can fool the curve-fitter into rounding what should be a corner.
• Lost a thin line or small text. Lower Despeckle so small paths survive, and start from a higher-resolution JPG. There is a tension here with noise removal; find the threshold that keeps detail while dropping speckle.
• Colors slightly off. Tracing quantizes to a fixed palette, and JPEG already shifted your colors slightly. Raise Colors a touch, then recolor exact brand values in your vector editor afterward.

What's actually inside an SVG file

An SVG is not a mysterious binary like a JPG — 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. Unlike a JPG, there is no quality setting and no generational loss: the file is the artwork, exactly, every time you open it. That permanence 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 a JPG-sourced trace especially benefits from a cleanup pass, because the leftover artifacts can leave a few more paths than a PNG would. The standard tool is SVGO (and its web front-end SVGOMG): it strips editor metadata, collapses redundant groups, merges paths, 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 flat logos none of this is strictly necessary — the trace is already a few kilobytes — but for a noisier JPG source it is worth a pass before shipping.

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 — a real upgrade over re-tracing the JPG by hand.
• In cutting & engraving software — 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.

Vectorizely vs. Illustrator, Inkscape, and paid tracers

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

Tool	Cost	Best for	Trade-off
Vectorizely	Free	Flat JPGs — logos, icons, graphics; fast, private, no upload	Not built for photographic tracing
Illustrator Image Trace	Subscription	Designers already in Adobe, fine manual control over a JPG	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 JPGs — complex color, near-photographic	Watermarked or paywalled; uploads your file

For the everyday case — “I have a JPG logo and need a clean SVG” — an in-browser tracer is the fastest path and keeps your artwork on your machine. 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. But for flat graphics, the gap closes to nothing once you have despeckled the JPEG noise.

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 JPG 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.”