How to Vectorize an Image in 3 Steps
- Upload the image (PNG, JPG, WebP, BMP or TIFF) in the converter above.
- Convert. vtracer traces it in full color; images wider than 1,200 px are scaled to 1,200 px first.
- Download the SVG and tidy it in Inkscape, Illustrator or Figma: delete stray specks, merge shapes, recolor.
This works on a phone too: open the page in your mobile browser and upload the image.
What Is Vectorization?
Vectorization (also called tracing) is the process of converting a raster image — a grid of colored pixels — into a vector image — a set of mathematical curves and shapes. The two representations are fundamentally different:
- Raster (PNG, JPG, BMP): Each pixel stores a color value. The image has a fixed resolution. Enlarging it beyond that resolution produces blurry, interpolated results.
- Vector (SVG, AI, EPS): Shapes are defined by mathematical equations — Bézier curves, lines, arcs. The rendering engine recalculates the math at any target size, producing perfect sharpness from a 16-pixel favicon to a 10-meter billboard.
Vectorization is not a simple format conversion like PNG to JPEG. It is a reconstruction: the software analyzes pixel boundaries, detects edges, and builds an entirely new mathematical representation that approximates the original image. The quality of this approximation depends heavily on the source image characteristics.
Our Conversion Pipeline
When you upload a PNG (or JPG, BMP, WebP, TIFF) to CleverUtils and convert to SVG, the file passes through a multi-stage pipeline. Understanding each stage explains why certain images vectorize beautifully and others produce unexpected results.
Stage 1: Decoding and Resizing (ImageMagick)
ImageMagick decodes the upload (JPG, PNG, WebP, TIFF, PSD and other formats) and fixes EXIF rotation. Images wider than 1,200 px are scaled down to 1,200 px wide to keep tracing fast. Vector or layered inputs such as PDF, EPS or PSD are flattened onto white first.
Stage 2: Color Clustering
The tracer, vtracer, groups neighboring pixels of similar color into regions. Our settings keep 6 bits of precision per color channel, so very close shades merge into one flat color. This is why gradients turn into bands of solid color.
Patches smaller than 4 pixels are dropped as speckles.
Stage 3: Edge Tracing
vtracer follows the outline of every color region. Regions are stacked: larger shapes sit underneath and smaller ones on top, so there are no gaps between neighboring colors.
Stage 4: Polygon Fitting
Our converter runs vtracer in polygon mode: each outline becomes a chain of straight line segments, not Bézier curves. Turns sharper than 60° are kept as corners. Polygons keep logos and lettering crisp; round shapes look slightly faceted when you zoom in a lot.
Stage 5: SVG Output
Each region is written as an SVG <path> with a solid fill color. The file opens in any browser and in Inkscape, Illustrator, Figma and Cricut Design Space.
Command: vtracer --input in.png --output out.svg --colormode color --hierarchical stacked --mode polygon --filter_speckle 4 --color_precision 6 --corner_threshold 60 --segment_length 3.5
If vtracer cannot process a file, the converter falls back to potrace, which produces a black-and-white SVG.
What Vectorizes Well
Tracing works best when an image is made of a few flat colors with clear edges. Each flat color becomes one clean shape.
| Source Type | Quality | Why It Works |
|---|---|---|
| Logos on white background | Excellent | High contrast, clean edges, solid fill colors |
| Line art and sketches | Excellent | Strong ink/pencil lines on white paper |
| Icons (flat design) | Excellent | Geometric shapes, uniform colors, clean boundaries |
| Text and typography | Excellent | Sharp edges, uniform black on white |
| Silhouettes | Excellent | Pure black/white, clean outlines, no internal detail |
| Stamps and seals | Very good | High contrast, but may need threshold tuning for faded areas |
| Technical diagrams | Very good | Clean lines, but very thin lines may need lower threshold |
| Hand-drawn designs | Good | Strong ink lines work; light pencil strokes may drop out |
The common thread: high contrast, clear edges, limited tonal range. If the image looks recognizable when reduced to pure black and white, it will vectorize well.
What Vectorizes Poorly
Color clustering fails for images with continuous tonal variation. Smooth gradients split into many bands of flat color, which looks posterized and makes the SVG large.
- Photographs: Portraits, landscapes, and product photos contain smooth gradients across skin, sky, foliage, and fabric. Tracing turns everything into hundreds of flat-color patches, producing a posterized appearance. The SVG file may also be enormous — thousands of tiny paths attempting to approximate smooth tonal variation.
- Soft gradients: Sunset skies, color fades, vignette effects, and shadows get chopped into discrete bands of flat color with jagged boundaries.
- Complex textures: Fabric weave, wood grain, fur, paper texture — these generate vast numbers of tiny vector paths that look noisy and serve no practical purpose.
- Low-resolution sources: A 100×100 pixel thumbnail provides so few data points that the Bézier curve fitting produces rough, blocky paths. The output looks angular and crude regardless of the source content.
- Heavily compressed JPEGs: JPEG compression creates blocky 8×8 pixel artifacts around edges. The tracer follows these compression artifacts instead of the actual image edges, producing noisy, jagged vector paths.
Rule of thumb: If the image still reads well when you reduce it to a handful of flat colors, it will vectorize well. If it depends on tonal subtlety or photographic detail, vectorization is the wrong approach.
Quality Optimization Tips
The biggest improvements come from preparing the source image before uploading, not from tuning potrace parameters. These steps work in any image editor.
Use the Highest Resolution Available
More pixels give the tracer more edge data and smoother outlines, up to a point: the converter on this page scales images wider than 1,200 px down to 1,200 px before tracing. A sharp source around that width gives the best result; a 100 px thumbnail gives rough, blocky paths.
Clean Up the Source
For scanned images, remove background noise and artifacts before uploading. Use a Levels or Curves adjustment to push the background toward pure white and the foreground toward pure black. Remove dust specks, paper texture, and scanning artifacts with a light blur or despeckle filter. Crop tightly to eliminate edge shadows.
Increase Contrast
Push the contrast slider up. Stronger contrast means a wider gap between foreground and background brightness values, which gives the threshold a cleaner separation to work with. For B&W images, the ideal input has only two tones: pure black and pure white, with nothing in between.
Use PNG, Not JPEG
JPEG compression creates visible blocky artifacts around sharp edges — exactly the areas potrace analyzes for edge tracing. These artifacts produce jagged, noisy vector paths that trace compression boundaries rather than actual image edges. If you have the choice, always use PNG. If only JPEG is available, use the highest quality (least compressed) version.
Adjust the Threshold
The converter on this page traces in color and has no threshold. If you trace in black and white with potrace or Inkscape, start at 0.5; raise it to 0.6–0.7 for faded or light sources, or lower it to 0.3–0.4 when the background picks up noise.
Potrace Settings Explained
When you trace in black and white with potrace (directly or through Inkscape), these parameters shape the output. The converter on this page runs vtracer with fixed settings instead.
| Parameter | Flag | Range | Default | Effect |
|---|---|---|---|---|
| Threshold | -k |
0.0–1.0 | 0.5 | Brightness cutoff for binary conversion. Lower = lighter output, higher = heavier |
| Corner smoothing | -a |
0–1.334 | 1 | 0 = all sharp corners. 1.334 = maximum smoothing. Controls curve vs angle at corners. |
| Optimization | -O |
0 and up | 0.2 | Curve optimization tolerance. Higher = fewer segments, smaller file, less accuracy |
| Noise removal | -t |
0–100+ | 2 | Max pixel area of isolated regions to discard. Higher = removes larger specks |
Recommended Settings by Source Type
| Source Image | Threshold | Corners | Turdsize | Notes |
|---|---|---|---|---|
| Clean B&W logo | 0.5 | 1 (smooth) | 2 | Defaults work perfectly for high-contrast logos |
| Pencil sketch | 0.35–0.45 | 1.334 (max) | 0 | Lower threshold avoids paper texture; max smooth for fluid lines |
| Ink stamp / seal | 0.55–0.65 | 1 (smooth) | 10–20 | Higher threshold captures full stamp; high turdsize removes spatter |
| Scanned document | 0.5–0.6 | 0 (sharp) | 5–15 | Sharp corners for text; moderate noise removal for paper dust |
| Faded / light source | 0.65–0.8 | 1 (smooth) | 2–5 | Higher threshold captures content lost at 0.5 |
| Pixel art / QR code | 0.5 | 0 (sharp) | 0 | Sharp corners preserve geometry; no noise removal |
Multi-Color Vectorization
Potrace produces black-and-white output only: one binary layer, traced at its boundary. The converter on this page avoids that limit by using vtracer, which clusters colors and traces every color region in one pass.
For multi-color vectorization, alternative approaches exist:
- Multi-pass tracing: Run potrace multiple times at different threshold levels, each capturing a different brightness band. Stack the resulting SVG layers with different fill colors. Inkscape's "Trace Bitmap" offers this as "Multiple Scans: Brightness Steps."
- Color quantization + layer separation: Reduce the image to a limited color palette (4–16 colors), separate each color into a binary mask, and trace each mask independently. Tools like Inkscape's "Multiple Scans: Colors" automate this.
- Adobe Illustrator Image Trace: AI-assisted tracing that handles multiple colors, gradients, and complex shapes. Produces cleaner multi-color output than layer stacking but requires a paid subscription.
- AI-powered services: Tools like Vectorizer.AI use machine learning to identify shapes, separate colors, and generate clean multi-color SVG. Better results than algorithmic methods for complex images, but typically paid per-image.
For the most common vectorization use cases — logo conversion, line art tracing, cut file preparation — potrace's B&W output is exactly what is needed, and it runs instantly for free.
Practical Use Cases
Logo Upscaling
The most common reason to vectorize: your logo exists only as a small PNG or JPEG, and you need it at much larger sizes for printing, signage, or merchandise. Vectorizing converts the fixed-resolution raster into an infinitely scalable SVG. The SVG version can be printed on a billboard, embroidered on a hat, or displayed as a favicon — all from the same file.
SVG Icons for Web
If you have an icon set as PNG files, vectorizing them to SVG provides resolution independence (crisp on all screens), CSS styling (change colors on hover or dark mode), smaller file sizes, and the ability to inline them in HTML for zero extra HTTP requests.
Cutting Machines (Cricut, Silhouette, Laser)
Cricut, Silhouette, and laser cutters require vector input files to generate toolpaths. The machine follows the vector paths exactly — the cutter or laser traces the mathematical curves. If your design exists only as PNG, vectorization is the bridge between the raster design and the physical cutting operation. Clean, high-contrast source images produce the best cutting paths.
Embroidery
Embroidery machines need vector outlines to generate stitch paths. The vector shapes determine stitch direction, density, and fill patterns. Vectorizing a logo PNG to SVG is typically the first step in creating an embroidery file (.PES, .DST, .EXP). Simple shapes with clear boundaries produce the cleanest stitch output.
Web Performance Optimization
Replacing PNG icons and logos with SVG on a website reduces page weight (a single SVG replaces multiple resolution-specific PNGs), improves Retina display sharpness, and enables CSS-based theming. A typical website with 20 icons can save 200–400 KB by switching from PNG to SVG, directly improving Core Web Vitals scores.
Large-Format Printing
Trade show banners, vehicle wraps, building signage, and exhibition displays all require artwork that renders crisply at physical sizes measured in meters. Raster images that looked fine on screen become visibly blurry at large print sizes. Vectorizing the design ensures mathematical sharpness at any output size the print shop needs.
How to Vectorize an Image in Inkscape and Illustrator
Inkscape (free)
- Import the image (File → Import) and select it.
- Open Path → Trace Bitmap (Shift+Alt+B).
- Pick Brightness cutoff for one color or Multiple scans → Colors for several, and click Apply.
- Move the trace aside, delete the bitmap and save as Plain SVG.
Adobe Illustrator
- Select the placed image and open Window → Image Trace.
- Choose a preset (Black and White Logo, 6 Colors, High Fidelity Photo) and adjust Threshold or Colors.
- Click Expand to get editable paths, then export with File → Export → Export As → SVG.
Automatic tracing is free. Hiring a designer to redraw a logo by hand costs more, but gives the cleanest result for complex or low-quality sources.