What You'll Learn
Our Image-to-SVG converter offers three powerful algorithms, each designed for different types of images. This guide explains them in simple terms so you can choose the right one.
- • Potrace - Best for black & white images, logos, and line art
- • ImageTrace - Great for colorful illustrations and simple graphics
- • VTracer - Perfect for photos and complex images with many colors
- • How each algorithm works and when to use it
- • All settings explained in simple language
- • Practical examples for every image type
The Three Algorithms Explained
Each algorithm uses a different approach to convert your image into SVG. Here's a simple comparison to help you choose:
Potrace
Black & white only. Converts images to pure silhouettes.
Best for:
- • Logos and icons
- • Line drawings
- • Text and documents
- • Silhouettes
ImageTrace
Supports colors. Good balance of quality and simplicity.
Best for:
- • Simple illustrations
- • Colorful logos
- • Cartoon graphics
- • Flat designs
VTracer
Advanced color handling. Best quality for complex images.
Best for:
- • Photographs
- • Complex artwork
- • Gradients
- • Detailed images
Quick Decision Guide
Need black & white?
→ Use Potrace
Simple colorful graphic?
→ Use ImageTrace
Photo or complex image?
→ Use VTracer
Potrace Algorithm
The classic black & white vectorizer
How Potrace Works
Potrace is the simplest algorithm. It converts your image to pure black and white, then traces the edges between black and white areas to create smooth vector paths.
Step 1: Convert image to black & white using a threshold
Step 2: Find edges between black and white pixels
Step 3: Trace edges and convert to smooth curves
Step 4: Output clean SVG with black shapes
Potrace Settings
Threshold (0-255)
Controls what becomes black vs white. Lower = more black, Higher = more white.
Turd Size (0-100)
Removes small specks and noise. Higher values remove more tiny details.
- • 0-5: Keep all details, even tiny specks
- • 6-15: Remove small noise (recommended)
- • 16+: Aggressive cleanup, may lose small features
Curve Optimization (0.0-1.3)
Controls how smooth the curves are. Higher = smoother but less accurate.
- • 0.0-0.4: Very accurate, follows edges closely
- • 0.5-0.8: Balanced smoothness (default: 0.2)
- • 0.9-1.3: Very smooth, simplified curves
When to Use Potrace
✓ Perfect for:
- • Company logos (single color)
- • Line drawings and sketches
- • Text and typography
- • Silhouettes and stencils
✗ Not good for:
- • Colorful images
- • Photographs
- • Gradients or shading
- • Complex illustrations
ImageTrace Algorithm
Simple color vectorization
How ImageTrace Works
ImageTrace groups similar colors together, then traces each color group separately. It's like running Potrace multiple times, once for each color.
Step 1: Reduce image to a limited color palette
Step 2: Separate image into layers by color
Step 3: Trace edges for each color layer
Step 4: Combine all layers into one SVG
ImageTrace Settings
Number of Colors (2-64)
How many colors to keep in the final SVG. More colors = more detail but larger file.
Blur (0-10)
Smooths the image before tracing. Helps remove noise and create cleaner paths.
- • 0-2: Minimal smoothing, keeps sharp edges
- • 3-5: Moderate smoothing (recommended)
- • 6-10: Heavy smoothing, very soft edges
Path Precision (0-10)
How closely paths follow edges. Lower = smoother, Higher = more accurate.
- • 0-3: Very smooth, simplified paths
- • 4-6: Balanced (default: 5)
- • 7-10: Very detailed, follows edges closely
When to Use ImageTrace
✓ Perfect for:
- • Colorful logos and icons
- • Simple illustrations
- • Cartoon graphics
- • Flat design artwork
✗ Not good for:
- • Photographs with many colors
- • Complex gradients
- • Highly detailed artwork
- • Images with subtle color variations
VTracer Algorithm
Advanced color vectorization for complex images
How VTracer Works
VTracer is the most sophisticated algorithm. It uses machine learning techniques to intelligently group colors and create smooth, high-quality vector paths. Perfect for photos and complex artwork.
Step 1: Analyze image and identify color clusters using K-means
Step 2: Create separate layers for each color group
Step 3: Trace edges with advanced curve fitting
Step 4: Optimize and clean up paths for best quality
VTracer Settings - Simple Explanation
VTracer has more settings because it's more powerful. Don't worry - here's what each one does in plain English:
1. Color Mode
What it does: Chooses between black & white only (Binary) or full color (Color).
Binary
Black & white only. Like Potrace.
Color
Keeps colors. Use this for most images.
2. Layer Structure
What it does: Controls how shapes are stacked.
Stacked
Layers on top of each other. Use for photos.
How It Works
After color clustering, VTracer needs to decide how to arrange the resulting shapes. The layer structure algorithm determines the z-order (stacking) and whether inner shapes should create transparent holes or simply overlap.
Stacked Mode
Uses a simple z-index layering system. Each color cluster becomes a separate layer that sits on top of previous layers. No transparency or cutouts are created.
Layer 1 (bottom)
Layer 2 (middle) - covers Layer 1
Layer 3 (top) - covers Layer 2
Use when:
- • Converting photographs
- • You want to edit individual layers later
- • Image has natural depth/overlapping
- • Default choice for most images
Cutout Mode
Uses SVG path subtraction. Inner shapes are subtracted from outer shapes using the "evenodd" fill rule, creating transparent holes where shapes overlap.
Outer shape (filled)
- Inner shape (creates hole)
= Cutout effect
Use when:
- • Logo has negative space design
- • Creating stencil effects
- • Icons with holes (like @ symbol)
- • Minimalist, flat designs
Quick Decision Guide
If your image looks like it has depth or overlapping elements → Stacked. If it's a flat design with holes or negative space → Cutout. When in doubt, use Stacked (it's the default for good reason).
Color Precision Algorithm (1-8)
This parameter controls the K value in the K-means clustering algorithm. It determines how many distinct color clusters VTracer will create from your image.
How It Works
The value you set determines the maximum number of color clusters: 2^(precision) colors. So precision 3 = 8 colors, precision 6 = 64 colors, precision 8 = 256 colors.
Precision 1 → 2 colors
Precision 3 → 8 colors
Precision 5 → 32 colors
Precision 8 → 256 colors
2-4 colors
8-16 colors
32-64 colors
128-256 colors
Lower Values (1-3)
Creates 2-8 color clusters
- • Dramatically smaller file sizes
- • Faster processing (fewer iterations)
- • Simplified, poster-like appearance
- • Perfect for logos and icons
- • May lose subtle color variations
Higher Values (6-8)
Creates 64-256 color clusters
- • Much larger file sizes
- • Slower processing (more iterations)
- • Preserves color gradients and nuances
- • Essential for photographs
- • More realistic color reproduction
How to Use This Setting
Start at 4 (16 colors) for most images. If the result looks too simplified, increase by 1. If file size is too large, decrease by 1. Each increment doubles the number of colors.
Pro tip: Logos rarely need more than 4. Photographs usually need 6-7.
Noise Reduction Algorithm (0-20)
This filter uses a morphological opening operation to remove small isolated pixels and smooth edges. It's applied before the main vectorization process.
How It Works
The algorithm applies an erosion operation followed by dilation. This removes small "islands" of pixels (noise) while preserving larger shapes. The value represents the radius of the morphological kernel in pixels.
1. Erode: Remove pixels at edges
2. Dilate: Expand remaining shapes back
3. Result: Noise removed, shapes preserved
0-5: Minimal
Removes only tiny artifacts (1-5 pixel radius)
- • Preserves fine details
- • Some noise may remain
- • Use for detailed illustrations
- • Good for clean source images
6-12: Balanced
Moderate cleanup (6-12 pixel radius)
- • Good balance for most images
- • Removes common artifacts
- • Recommended starting point
- • Works well with photos
13-20: Aggressive
Heavy filtering (13-20 pixel radius)
- • Very clean, smooth result
- • May remove fine details
- • Use for noisy images
- • Good for simplification
How to Use This Setting
Start at 8 and adjust based on results. If you see tiny specks or artifacts in the SVG, increase by 2-3. If important details disappear, decrease by 2-3. The effect is cumulative with each increment.
Warning: Values above 15 can significantly alter the appearance of your image by smoothing sharp corners and removing small features.
Advanced Parameters
These advanced settings give you fine-grained control over the conversion process. Adjust these after you're comfortable with the basic parameters.
Path Mode Algorithm
This algorithm determines how edge contours are converted into SVG path commands. It's the core of the vectorization process.
How It Works
After identifying edges, VTracer needs to convert them into mathematical curves. The path mode determines whether to use smooth Bézier curves, straight line segments, or raw pixel coordinates.
Spline Mode
Uses cubic Bézier curve fitting algorithm
M x,y (move to)
C x1,y1 x2,y2 x,y (curve)
Smooth, continuous paths
- • Smooth, organic curves
- • Smallest file size (fewer points)
- • Best for photos and illustrations
- • Default and recommended
Polygon Mode
Uses straight line approximation
M x,y (move to)
L x,y (line to)
Sharp, angular paths
- • Sharp corners and edges
- • Larger file size (more points)
- • Good for geometric designs
- • Pixel-perfect edge following
None Mode
No curve fitting, raw coordinates
Every pixel = one point
No optimization
Maximum data
- • Largest file size (all pixels)
- • Most accurate to source
- • Rarely useful in practice
- • Use only for debugging
How to Choose
Use Spline for 95% of images - it creates the smoothest, most efficient SVGs. Only switch to Polygon if you need sharp, geometric edges (like pixel art or architectural drawings). Never use None unless you're debugging.
Example: Photo of a person → Spline. Minecraft-style pixel art → Polygon.
Layer Difference Algorithm (1-255)
This threshold determines when two colors are considered different enough to be placed on separate layers. It uses Euclidean distance in RGB color space.
How It Works
The algorithm calculates the color distance between adjacent regions. If the distance exceeds your threshold, they're placed on different layers. Lower threshold = more sensitive = more layers.
distance = √((R1-R2)² + (G1-G2)² + (B1-B2)²)
if distance > threshold → new layer
else → same layer
Lower Values (1-50)
Very sensitive to color differences
- • Creates many layers (20-100+)
- • Excellent color separation
- • Much larger file sizes
- • Maximum editing flexibility
- • Use for complex illustrations
Higher Values (100-255)
Less sensitive, merges similar colors
- • Creates few layers (3-10)
- • Similar colors merged
- • Smaller file sizes
- • Simpler layer structure
- • Use for simple graphics
How to Use This Setting
Start at 16 (default). If you want more distinct layers for editing, decrease to 8-12. If file size is too large or you have too many layers, increase to 30-50. This works together with Color Precision.
Tip: Low Layer Difference + High Color Precision = many detailed layers. High Layer Difference + Low Color Precision = few simple layers.
Corner Threshold Algorithm (0-180°)
This algorithm detects corners by measuring the angle between consecutive path segments. It determines whether a point should be treated as a sharp corner or smoothed into a curve.
How It Works
As VTracer traces edges, it calculates the angle at each point. If the angle is sharper (smaller) than your threshold, it's marked as a corner. Otherwise, it's smoothed into a curve.
angle = arccos(dot(v1, v2))
if angle < threshold → corner point
else → smooth curve
Lower Values (0-60°)
Only very sharp angles are treated as corners
0° = straight line
30° = sharp corner
60° = moderate angle
- • Preserves sharp corners
- • More angular appearance
- • More path control points
- • Larger file sizes
- • Use for geometric designs
Higher Values (90-180°)
Most angles are smoothed into curves
90° = right angle
120° = obtuse angle
180° = smooth everything
- • Very smooth, flowing curves
- • Organic appearance
- • Fewer path control points
- • Smaller file sizes
- • Use for photos and illustrations
How to Use This Setting
Default is 60° which works well for most images. Decrease to 30-45° for architectural drawings or pixel art where you want to preserve sharp corners. Increase to 90-120° for portraits or organic subjects where you want smooth curves.
Visual test: If corners look too rounded, decrease the value. If curves look too jagged, increase it.
Length Threshold Algorithm (0-20)
This filter removes paths shorter than the specified length. It's a post-processing step that cleans up tiny artifacts and simplifies the SVG structure.
How It Works
After all paths are generated, VTracer calculates the perimeter length of each closed path. Paths shorter than your threshold are discarded. The value is in pixels relative to the original image size.
for each path:
length = sum of all segment lengths
if length < threshold → delete path
Impact by Value Range
Keeps almost all paths, including tiny details and potential noise
Removes small artifacts while preserving important details
Only keeps large, prominent shapes. May remove fine details
When to Use Lower Values (0-4)
- • Detailed illustrations with fine lines
- • Text or small typography
- • Intricate patterns or textures
- • When every detail matters
- • Clean source images
When to Use Higher Values (8-15)
- • Simple logos or icons
- • Noisy or low-quality images
- • When file size is a concern
- • Minimalist designs
- • To remove compression artifacts
How to Use This Setting
Start at 4 (default). If you see tiny specks or dots in your SVG, increase by 2-3. If important small details disappear, decrease by 2. This works well with Noise Reduction - use both together for best cleanup.
Pro tip: For images with lots of texture (like photos), combine Length Threshold 6-8 with Noise Reduction 8-10 for clean results.
Path Precision Algorithm (1-16)
This parameter controls the number of decimal places used for path coordinates in the SVG output. It's a numerical precision setting that affects file size and accuracy.
How It Works
All path coordinates are rounded to the specified number of decimal places. This is purely a formatting decision that doesn't affect the vectorization algorithm itself, only the final output precision.
Precision 1: M 12.3,45.6
Precision 4: M 12.3456,45.6789
Precision 8: M 12.34567890,45.67890123
Lower Precision (1-4)
Rounds to 1-4 decimal places
Example (precision 2):
123.456789 → 123.46
Saves ~40% file size
- • Much smaller file sizes
- • Faster rendering in browsers
- • Imperceptible quality loss
- • Perfect for web use
- • Recommended for most cases
Higher Precision (8-16)
Rounds to 8-16 decimal places
Example (precision 10):
123.456789 → 123.4567890000
Larger file size
- • Larger file sizes
- • Maximum mathematical accuracy
- • Better for scaling/transformations
- • Useful for print at large sizes
- • Overkill for most use cases
How to Use This Setting
Use 4-6 for web graphics (default is 8 which is already more than enough). Only increase to 10-12 for large-format print work where the SVG will be scaled significantly. Values above 12 are rarely necessary and just waste file space.
Reality check: The difference between precision 4 and 8 is invisible to the human eye at normal viewing sizes, but precision 4 creates files 20-30% smaller.
Max Iterations Algorithm (1-50)
This parameter controls how many times the K-means clustering algorithm iterates to find optimal color clusters. More iterations = better color grouping but longer processing time.
How It Works
K-means clustering is an iterative algorithm. Each iteration refines the color clusters by reassigning pixels to their nearest cluster center and recalculating centers. More iterations allow the algorithm to converge to a better solution.
Iteration 1: Initial cluster assignment
Iteration 2-N: Refine clusters
Result: Optimized color grouping
Quick results, may not fully converge. Good for previews.
Usually converges. Recommended for most images.
Ensures convergence. Slow but highest quality.
Lower Values (1-10)
- • Very fast processing
- • May produce suboptimal clusters
- • Colors might not be well-separated
- • Good for quick previews
- • Use when speed matters most
Higher Values (20-50)
- • Slower processing
- • Better color cluster optimization
- • More accurate color separation
- • Ensures algorithm convergence
- • Use for final production output
How to Use This Setting
Start at 10 for testing, then increase to 20-30 for final output. The algorithm often converges before reaching max iterations, so values above 30 rarely improve results. If processing is too slow, reduce to 10-15 with minimal quality loss.
Performance tip: This setting has the biggest impact on processing time. Each iteration processes every pixel in your image.
Best Practices by Image Type
Line Drawings & Sketches
- • Clustering Mode: Binary
- • Color Precision: 1-2
- • Noise Reduction: 8-15
- • Path Mode: Spline
- • Corner Threshold: 30-60°
Simple Logos
- • Clustering Mode: Color
- • Color Precision: 3-5
- • Noise Reduction: 10-20
- • Layer Structure: Cutout
- • Layer Difference: 50-100
Icons & Symbols
- • Clustering Mode: Color
- • Color Precision: 2-4
- • Noise Reduction: 15-20
- • Path Mode: Polygon
- • Length Threshold: 5-10
Photographs
- • Clustering Mode: Color
- • Color Precision: 6-8
- • Noise Reduction: 2-6
- • Layer Structure: Stacked
- • Max Iterations: 20-30
Complex Illustrations
- • Clustering Mode: Color
- • Color Precision: 5-7
- • Noise Reduction: 4-8
- • Layer Difference: 20-50
- • Path Precision: 8-12
Text & Documents
- • Clustering Mode: Binary
- • Color Precision: 1
- • Noise Reduction: 10-15
- • Corner Threshold: 20-40°
- • Length Threshold: 2-5
Troubleshooting Common Issues
SVG Looks Too Simplified
Possible Causes:
- • Color precision too low
- • Noise reduction too high
- • Layer difference too high
Solutions:
- • Increase color precision to 6-8
- • Reduce noise reduction to 2-4
- • Lower layer difference to 10-30
File Size Too Large
Possible Causes:
- • Too many colors preserved
- • Too many layers created
- • High path precision
Solutions:
- • Reduce color precision to 3-5
- • Increase layer difference to 50-100
- • Lower path precision to 4-6
Conversion Taking Too Long
Possible Causes:
- • Too many iterations
- • High precision settings
- • Complex image with many details
Solutions:
- • Reduce max iterations to 5-10
- • Lower path precision to 4-6
- • Increase noise reduction to simplify
Optimization Tips
For Web Use
- • Keep color precision at 4-6
- • Use moderate noise reduction (6-10)
- • Path precision of 6-8 is sufficient
- • Optimize for smaller file sizes
- • Test at different screen sizes
For Print Use
- • Use higher color precision (6-8)
- • Lower noise reduction (2-6)
- • Higher path precision (10-16)
- • More iterations for quality (20-30)
- • Test at actual print size
Pro Workflow Tips
- • Start with default settings
- • Adjust one parameter at a time
- • Use "Apply Settings" to see changes
- • Save successful configurations
- • Test different clustering modes first
- • Fine-tune color precision next
- • Adjust noise reduction last
- • Use reset button to start over
Master Image-to-SVG Conversion
With these techniques and parameter explanations, you're ready to convert any image to high-quality SVG. Start experimenting and find the perfect settings for your projects!