Raster to Vector: The Complete Conversion Guide for All Image Types (2026)

Raster to vector conversion — also called vectorization or auto-tracing — is the process of taking a pixel-based image (PNG, JPG, WebP, BMP, or GIF) and converting it into a scalable SVG file built from mathematical paths and shapes. The resulting file can be scaled to any size — from a postage stamp to a highway billboard — with no blurring or pixelation. This guide covers exactly how vectorization works, which image types convert well, how to use each available setting, and when you should skip vectorization entirely and reach for a different tool.

Raster vs Vector: The Fundamental Difference

To understand vectorization, you first need to understand what separates these two approaches to storing an image.

Raster images store visual data as a grid of pixels — tiny colored squares arranged in rows and columns. Every JPEG photo, every PNG screenshot, every WebP export is fundamentally a pixel grid. The image has a fixed resolution: a 1200×800 PNG has exactly 960,000 pixels. If you scale it to 12,000×8,000 pixels, the software has to invent color values for the new pixels — which always introduces blurring or visible artifacts known as pixelation.

Vector images store visual data differently: as mathematical descriptions of shapes. A circle in SVG isn't thousands of pixels arranged in a ring — it's a single instruction: "draw a circle at coordinates (cx,cy) with radius r and fill it with color #5b6af5." Because the instructions are mathematical, they can be recalculated at any output size with no loss of precision.

Why You'd Convert Raster to Vector

Vectorization isn't something you do to every image — it's a targeted tool for specific situations. Here are the most compelling reasons to convert:

• Print at any size without quality loss. Printers work at 300 DPI or higher. A 72 DPI PNG logo that looks fine on screen will appear blurry and jagged when printed on a banner or business card. An SVG logo renders at whatever DPI the printer uses, always sharp.
• Logo redesign or recreation. If you only have a low-resolution raster version of a logo (common with older brands), vectorizing it gives you paths you can refine in Inkscape or Illustrator — dramatically faster than rebuilding from scratch.
• Embroidery and vinyl cutting machines. Embroidery software (like Wilcom or Hatch) and cutting plotters (Cricut, Silhouette) require vector input to trace cut lines or stitch paths. They cannot interpret pixel grids.
• Web performance for simple graphics. An SVG icon might be 800 bytes; the equivalent PNG could be 8 KB. For sites with dozens of icons, SVG can meaningfully reduce page weight.
• Animation readiness. SVG paths can be animated with CSS or GSAP. Raster images cannot be animated at the path level. Vectorizing a logo gives you a file where every letter and shape is an individually addressable, animatable element.
• Accessibility and styling. SVG text and shapes can be targeted by CSS, allowing brand colors to respond to dark mode or user preferences. A PNG logo cannot do this.

Which Raster Formats Can Be Vectorized?

Any raster format can be fed into a vectorizer — the question is how well the output will reflect the original. The format itself matters less than the content of the image. That said, different formats carry different characteristics that affect tracing quality:

The Auto-Tracing Process Explained

When you upload a raster image to a vectorizer, it goes through several stages before producing SVG output. Understanding this pipeline helps you predict the results and tune the settings intelligently.

Stage 1: Color Quantization

Most photos contain millions of unique color values. A vectorizer can't create a separate path for each unique pixel color — the resulting SVG would be impossibly complex. The first step is color quantization: reducing the image to a small number of representative colors (controlled by the "color count" setting). A logo might be reduced to 4 colors; an illustration to 32. The algorithm groups similar colors together, creating distinct flat-colored regions that can each become a path.

This is why simple logos vectorize so well — they already have flat colors. And why photos vectorize poorly — quantizing a sunset photo from 16 million colors down to 16 creates regions that look like crude posterization, not a faithful reproduction.

Stage 2: Region Segmentation

Once colors are quantized, the algorithm identifies connected regions of each color — grouping adjacent pixels of the same color into regions. A red circle in a white background becomes two regions: "red" and "white."

Stage 3: Edge Tracing

The two dominant algorithms for tracing region boundaries into paths are Potrace (used by Inkscape, widely considered the industry standard) and ImageTracer.js (JavaScript-native, used in browser-based tools). Both convert pixel-boundary edges into sequences of straight line segments and Bezier curves. The ltres parameter controls how closely straight segments must approximate the original curve before a curve is substituted; qtres does the same for quadratic curves. Lower values mean more accurate paths with more nodes; higher values mean simpler paths that deviate more from the original.

Stage 4: Path Simplification

Raw traced paths can have thousands of unnecessary nodes. Path simplification removes redundant nodes while preserving the overall shape — this dramatically reduces SVG file size with minimal visual impact. The pathomit parameter sets a minimum area threshold: paths smaller than this value are discarded entirely. This removes tiny pixel noise that would otherwise create hundreds of invisible micro-paths.

How to Convert Raster to Vector Online (Step by Step)

Convertlo's vectorizer handles PNG, JPG, WebP, BMP, and GIF input and produces SVG output entirely in your browser — no upload, no server, no account needed.

1. 1
   Open the vectorizer

   Go to convertlo.pro/vectorize.html. The tool runs entirely in your browser using WebAssembly — your files never leave your device.

2. 2
   Choose your source format

   PNG with a transparent background gives the cleanest results for logos. JPG works well if the image is a simple flat graphic, but apply light blur (1–2) to suppress JPEG compression artifacts before tracing.

3. 3
   Upload or drag your image

   Drag the image file onto the drop zone or click to browse. The preview loads immediately.

4. 4
   Select a quality preset

   Sharp preserves fine edges and detail — best for logos with crisp geometry. Balanced smooths curves slightly — good for illustrations. Smooth applies more curve smoothing — best for organic shapes, hand-drawn art.

5. 5
   Adjust color count

   Set colors to match your image complexity: 2 for silhouettes, 4–8 for logos, 16–32 for illustrations. Higher counts increase SVG file size significantly. See the advanced settings section below for details.

6. 6
   Download your SVG

   Click Convert and then Download SVG. Open in any browser to verify quality. Edit in Inkscape if paths need manual cleanup.

Quality Expectations by Image Type

Not all images are created equal when it comes to vectorization. This table tells you honestly what to expect before you spend time on settings:

Advanced Settings: Color Count, Smoothing, and Tolerance

Once you understand what the controls do, you can dial in results precisely rather than guessing. Here's what each parameter actually controls:

Color Count (numberofcolors)

This is the single most impactful setting. It controls how many distinct color regions the quantization step creates before tracing begins.

• 2 colors — silhouette mode. Produces a solid foreground shape with no interior color detail. Perfect for stamps, watermarks, simple icons, and high-contrast line art.
• 4–8 colors — the sweet spot for most logos. Captures the main color blocks without exploding SVG file size. Use this for brand logos, badges, and flat-design icons.
• 16–32 colors — illustration mode. Captures enough color variation for cartoons and flat-shaded illustrations. SVG file size increases significantly.
• 64 colors — maximum detail attempt. Approaches photo-realistic color reproduction but produces SVGs that are often 10–50× larger than the source PNG. Only useful if you're trying to capture complex illustration shading and plan to manually simplify afterward.

The general rule: fewer colors = smaller SVG, cleaner paths, better scalability. More colors = larger SVG, more accurate colors, harder to edit.

Blur Radius (blurradius)

This applies a Gaussian blur to the image before tracing — not to the SVG output. Blurring reduces high-frequency pixel noise (including JPEG compression artifacts) so that the tracing algorithm sees clean color gradients rather than speckled edges. For JPEG logos, a blur of 1–2 dramatically improves path smoothness. For clean PNG logos, keep blur at 0 to preserve sharp edges.

Path Tolerance (ltres / qtres)

ltres controls how accurately straight-line segments follow the original pixel edge. A value of 1 means segments can deviate by 1 pixel maximum before inserting a new node. Lower values = more nodes, more accurate, larger file. Higher values = fewer nodes, smoother (slightly simplified) paths, smaller file.

qtres does the same for quadratic Bezier curves. Most vectorizers expose both through a single "tolerance" or "simplification" slider.

Path Minimum Size (pathomit)

Sets the minimum area (in pixels) that a path region must have to be included in the SVG. Paths smaller than this threshold are silently discarded. The default is usually around 8–16 pixels². This removes stray pixel noise that would otherwise generate dozens of tiny invisible paths, significantly reducing SVG complexity and file size with no visible impact on the output.

Desktop Alternatives: Inkscape and Potrace

Browser vectorizers are convenient, but desktop tools offer more control — particularly when you need to manually edit the result or process many files.

Inkscape (Free, Cross-Platform)

Inkscape's Trace Bitmap dialog (Path → Trace Bitmap or Shift+Alt+B) wraps the Potrace library with a GUI. It offers two primary modes:

• Single scan — creates one path layer from the image. Options include brightness cutoff (creates a B&W silhouette), edge detection, and color quantization.
• Multiple scans — runs the trace multiple times, one per color layer, and stacks them. This is how you get a multi-color SVG from Inkscape. Set "Scans" to match your desired color count.

After tracing in Inkscape, ungroup the result (Ctrl+Shift+G), delete the original raster image underneath, and manually clean up stray paths. Inkscape's node editor lets you drag and smooth individual path nodes — essential for professional logo work.

Potrace (Command Line)

Potrace is the underlying library that Inkscape uses. The standalone CLI version gives you batch processing and scripting capability:

Note that Potrace only accepts BMP input natively — convert your PNG or JPG to BMP first using ImageMagick: magick input.png input.bmp

When to Use Desktop vs Browser

Limitations: What Won't Convert Well

Vectorization has hard limits. Being aware of these will save you significant time and frustration:

Photographs

A photograph contains color gradients, complex tonal transitions, specular highlights, and texture detail that simply cannot be represented as flat-fill vector paths. When you trace a photo, the vectorizer creates hundreds of irregular blob-shaped paths attempting to approximate the tonal range — and the result looks like low-quality pixel art, not a photograph. The SVG file size is often 10–100× larger than the original JPEG. Never vectorize photographs. Use JPEG, WebP, or AVIF for photography.

Gradients

SVG does support gradient fills, but auto-tracers don't generate them — they generate flat-fill paths. A gradient background or a logo with a gradient treatment will trace as banded rings of progressively lighter/darker color, like a topographic map. If you need vector gradients, you'll need to manually add SVG gradient fills in Inkscape or Illustrator after tracing the base shapes.

Complex Illustrations with Soft Shading

Digital paintings and airbrush-style illustrations use soft, overlapping color transitions that are the same underlying problem as photographs. Even at 64 colors, the auto-traced result requires substantial manual node editing to look professional. For this type of work, consider tracing only the flat base layer and adding shading manually in Illustrator.

Small or Noisy Source Images

If your source PNG is small (say, 100×100 pixels) or has significant JPEG compression noise, the tracer will include all the artifacts in the paths. Always start from the highest-resolution, cleanest version of the source image. Apply blur 1–2 for JPEGs; pre-process noisy images to increase contrast and remove artifacts before tracing.

Text in Raster Images

Traced text looks terrible as SVG paths — letters become uneven outlines with tiny artifacts. If your image contains text, the right approach is to trace the non-text elements, then add the text back as proper SVG <text> elements or font-based paths in Inkscape.