PNG to SVG Converter

Turn a PNG into a vector you can actually scale

A PNG is a grid of pixels. It looks crisp at the size it was saved, but blow it up for a banner, a t-shirt, or a 4K screen and the edges break into stair-steps and blur. An SVG stores the same 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 PNG 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 PNG and rebuilds them as editable SVG <path> elements. 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.

How to convert a PNG to SVG

1. Add your PNG. Drag it 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 PNG 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.

What “PNG 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 PNG, 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.

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

Tracing quality is almost entirely a function of the kind of image you feed it:

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 PNG. 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. a PNG 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 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 often larger than the PNG it contains. 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 PNG reports zero.

PNG vs SVG: which should you actually use?

They solve different problems. Convert to SVG when scalability and editability matter; stay on PNG when you need fixed pixels or photographic fidelity.

	PNG (raster)	SVG (vector)
Scales without quality loss	No	Yes
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)
Handles transparency	Yes	Yes

Getting the cleanest possible trace

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

• Colors — the number of distinct colors the SVG keeps. Drop it to 2–4 for a flat logo so you get a few crisp shapes; raise it for illustrations that genuinely need more tones. Too many colors on a simple logo just adds stray specks.
• Despeckle — removes tiny stray paths left by anti-aliasing or JPEG-style noise around edges. Nudge it up if your output has confetti; keep it low if you are losing real small details.
• 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 PNG 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.

What people convert PNGs 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 PNG's weight.
• Print & signage — artwork that scales to posters, banners, and business cards without pixelation.
• Cricut, Silhouette & laser cutting — cutting machines and laser engravers need clean vector paths to follow; a traced SVG gives them crisp outlines.
• Embroidery & vinyl — flat, well-separated color regions are exactly what these workflows want.
• Design hand-off — turning a flattened PNG mock-up back into editable shapes you can refine in a vector editor.

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 PNG, or simplify the artwork first.
• Stray specks everywhere. Raise Despeckle and/or lower Colors. Anti-aliased 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 PNG.
• Colors slightly off. Tracing quantizes to a fixed palette; raise Colors a little, 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 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.

How image tracing works under the hood

Tracing a PNG 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 regions. Tiny stray regions — usually the fuzzy halo left by anti-aliasing — 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.

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.

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.
• 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:

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 a PNG 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.

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.

Transparent backgrounds and cut-outs

Logos and icons almost always need a transparent background so they sit cleanly on any color. PNG-to-SVG preserves that: transparent pixels in your PNG become genuine empty space in the SVG, not a white rectangle behind your artwork. The flip side — if your source has an unwanted background, the tracer will faithfully turn it into a filled shape, so remove it before converting rather than after. A clean alpha channel in means a clean cut-out vector out. This matters most for production: printing on colored material, cutting vinyl, or embroidering all expect a path-based, background-free shape, which is exactly what a transparent-source trace gives you. After converting, glance at the output over the checkerboard preview to confirm the background really is transparent and not a near-white fill the trace picked up.

Why a traced logo file is so small

A PNG stores every pixel; a clean traced SVG stores a handful of path equations. A two-color logo that is tens of kilobytes as a PNG often lands at one or two kilobytes as an SVG — and because SVG is text, it compresses further over the wire with gzip or brotli. On the web that means faster pages and a logo that is crisp on every screen density without shipping multiple PNG sizes. The more complex the artwork, the larger the SVG grows, which is another reason tracing favors simple, flat designs: they are exactly the ones that come out tiny.

The round trip: PNG to SVG and back

Once your logo is an SVG, you can generate a pixel-perfect PNG at any size on demand — the opposite conversion, handled by SVG to PNG. That is the healthy workflow: trace once to get a scalable master, then export whatever fixed-size raster a given platform needs (a 512px app icon, a social avatar, an email-safe logo) from that master. You never lose quality going SVG → PNG, whereas going PNG → PNG by upscaling always does.

Converting several PNGs

This tool traces one image at a time, which fits the overwhelming majority of real needs — most people are converting a logo or a small set of icons. If you genuinely need to trace hundreds of files on a schedule, that is a job for a command-line pipeline (potrace, or a script around an in-browser tracer) rather than any web page. For everything short of that, dropping files in one at a time is faster than setting up tooling, and keeps every file on your own machine.

Works in any modern browser — including your phone

Because the tracing is just code running in the page, the converter works anywhere a current browser does — Chrome, Safari, Firefox, and Edge, on desktop or mobile. There is nothing to install, no extension to add, and no app to download: open the page and drop an image. On a phone you can convert a logo someone just sent you without leaving the browser or handing the file to an app. The only practical limit is that an extremely large image takes a moment longer to trace on a low-powered device, since the work happens on your processor rather than on a server.

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