Skip to main content

​
Understanding Core Settings

Core settings give you professional-level control over how your images are vectorized. While presets are great starting points, mastering these settings lets you optimize for any image.
New to settings? Don’t be intimidated! Start with a preset, use HD Preview (2 credits) to test changes, and adjust one setting at a time.

​
Quality

Controls: Curve precision and smoothness

​
What Quality Does

Quality determines how accurately vector curves match your original image. Think of it as the “smoothness vs precision” slider.

Higher Quality

More precise curves
  • Tighter curve fitting
  • Smoother edges when zoomed
  • Larger file sizes
  • Slower processing

Lower Quality

Faster processing
  • Looser curve fitting
  • May show stair-stepping
  • Smaller file sizes
  • Quick results

​
Quality Levels

Technical: line_fit_tolerance = 0.5Best for:
  • Quick testing and previews
  • Roughing out ideas
  • Temporary placeholders
  • Speed over quality
Characteristics:
  • ⚡ Fastest processing (3-5 seconds)
  • 📦 Smallest file sizes
  • 🔍 Noticeable imperfections when zoomed
  • 🎯 Not recommended for final output

​
Quality Comparison Table

QualityToleranceSpeedFile SizeUse Case
Draft0.5⚡⚡⚡⚡⚡📦 TinyTesting only
Standard ⭐0.1⚡⚡⚡⚡📦📦 SmallDaily work
High0.05⚡⚡⚡📦📦📦 MediumPrint/pro
Ultra0.01⚡📦📦📦📦 LargeArchival

​
When to Adjust Quality

Symptoms:
  • Edges look blocky/jagged
  • “Stair-stepping” visible on curves
  • Zooming in reveals roughness
  • Curves don’t feel smooth
Solution:
  1. Move Quality slider to High or Ultra
  2. Use HD Preview to compare (2 credits)
  3. Convert when satisfied
Visual check: Zoom to 400% in Figma and inspect curves
Symptoms:
  • File size too large (>1 MB)
  • Processing taking too long (>60 seconds)
  • Need faster iterations
  • Standard quality looks good enough
Solution:
  1. Move Quality slider to Standard or Draft
  2. Check if quality is still acceptable
  3. Faster processing = more experimentation
Remember: Standard quality is excellent for 90% of use cases!

​
Quality Tips

Best practice workflow:
  1. Always begin with Standard quality
  2. Preview the result (2 credits)
  3. Only increase if edges look rough
  4. Save Ultra for special cases
Why: Standard is fast and good enough 90% of the time. Don’t over-optimize!

​
Detail

Controls: How small of details are preserved (noise filtering)

​
What Detail Does

Detail controls the minimum size of shapes that are kept in the output. Lower detail = more aggressive noise removal. Higher detail = preserve smaller features.

Higher Detail (70-100)

Preserve small features
  • Keeps fine details
  • More complex output
  • Larger file sizes
  • May include noise/artifacts

Lower Detail (0-30)

Aggressive cleanup
  • Removes noise and artifacts
  • Simpler, cleaner output
  • Smaller file sizes
  • May lose important details

​
How Detail Mapping Works

Technical: Detail slider (0-100) maps to min_area_px (5.0-0.5) 
Detail 0   → min_area_px 5.0  (remove shapes < 5px²)
Detail 50  → min_area_px 2.75 (remove shapes < 2.75px²)
Detail 100 → min_area_px 0.5  (keep almost everything)
In plain English: The slider tells the AI “ignore anything smaller than X pixels”

​
Detail Level Guide

Best for:
  • Simple logos
  • Icons with few colors
  • Cleaning up noisy JPEGs
  • Removing compression artifacts
What it does:
  • Removes dots, specks, noise
  • Simplifies complex areas
  • Produces clean, minimal vectors
  • Great for logos!
Examples:
  • Company logo from website (JPG artifacts) → Detail 20
  • App icon with solid colors → Detail 25
  • Badge with clean shapes → Detail 30

​
When to Adjust Detail

Symptoms:
  • Important features are missing
  • Fine lines disappeared
  • Texture is oversimplified
  • Output looks too “clean”
Solution:
  1. Move Detail slider right (toward “More”)
  2. Try Detail value of 60-75
  3. Preview to verify (2 credits)
  4. Increase more if needed
Example: Scanned sketch losing pencil strokes → increase to 70-80
Symptoms:
  • Too many tiny dots/specs
  • JPG compression artifacts visible as shapes
  • File size too large
  • Output looks “noisy”
Solution:
  1. Move Detail slider left (toward “Less”)
  2. Try Detail value of 30-40
  3. Preview to verify
  4. Decrease more if needed
Example: Logo from website has JPG noise → decrease to 25-30

​
Detail Tips

Recommended workflow:
  1. Start with Detail at 50 (Illustration default)
  2. Preview result
  3. If too noisy → decrease to 30-40
  4. If missing details → increase to 60-70
  5. Iterate with cheap previews!
Most images land between 30-70.

​
Colors

Controls: Maximum number of colors in output (color quantization)

​
What Colors Does

The Colors setting limits how many distinct colors appear in your vectorized output. The algorithm analyzes your image and reduces the palette to the specified number.
This is color quantization, similar to saving a GIF with limited colors. The AI intelligently picks the most representative colors.

​
Color Options

Best for:
  • Two-tone logos
  • Simple icons
  • Minimal graphics
  • Duotone effects
Characteristics:
  • 📦 Smallest file sizes
  • ✏️ Easiest to recolor
  • 🎨 Major simplification
  • ⚠️ Most colors merged
Examples:
  • Black and white logo → 2 colors
  • Twitter/Facebook style icon → 2-3 colors
  • Flat two-tone badge → 4 colors

​
Color Selection Guide

Image TypeRecommended ColorsWhy
Simple logo4-16Logos use brand colors, limited palette
App icon8-16Clean, recognizable at small sizes
Flat illustration32Rich enough for variety, manageable
Complex illustration64-256Preserves subtle color variations
Photo/realistic256Maximum fidelity for gradients
Gradient-heavy256Smooth color transitions

​
When to Adjust Colors

Symptoms:
  • Colors look posterized/banded
  • Gradients have visible steps
  • Subtle color variations lost
  • Output looks too simplified
Solution:
  1. Increase Colors setting (try 64 or 256)
  2. Preview to compare
  3. Stop when colors look accurate
Example: Illustration with subtle shading → increase from 32 to 64
Symptoms:
  • Too many color swatches to manage
  • Want simpler palette
  • File size too large
  • Need to recolor easily in Figma
Solution:
  1. Decrease Colors setting (try 16 or 8)
  2. Preview to verify main colors preserved
  3. Accept some color merging
Example: Logo with brand colors → use 16 to simplify palette

​
Color Tips

Post-conversion benefits:
ColorsEditing Complexity
2-8⭐⭐⭐⭐⭐ Very easy
16-32⭐⭐⭐⭐ Easy
64⭐⭐⭐ Moderate
256⭐⭐ Difficult
Unlimited⭐ Nearly impossible
If you plan to recolor: Use fewer colors!

​
Draw Style

Controls: How shapes are rendered (fills vs strokes)

​
What Draw Style Does

Draw Style fundamentally changes how your vector is constructed. This is a visual style choice, not a quality setting.
Default for 90% of casesHow it works:
  • Closed shapes filled with solid colors
  • Like “coloring inside the lines”
  • Standard vector illustration style
Best for:
  • ✅ Logos
  • ✅ Icons
  • ✅ Flat illustrations
  • ✅ General graphics
  • ✅ Most use cases
Advantages:
  • Colors are accurate
  • Easy to recolor (just change fill)
  • Familiar editing style
  • Works like Figma shapes
Output example:
<path fill="#FF5733" d="..."/>
<path fill="#3498DB" d="..."/>

​
Fill vs Stroke Comparison

AspectFill ShapesStroke Shapes
Use Case90% of graphicsLine art, sketches
AppearanceSolid colored shapesOutlined paths
EditingChange fill colorsChange stroke weight/color
File SizeMediumSmall-Medium
RecoloringVery easyEasy (stroke color)
ExamplesLogos, icons, illustrationsSketches, line drawings

​
When to Use Each Style

  • Converting logos, icons, or illustrations
  • Original has solid colors
  • You want standard vector graphics
  • Need to recolor easily
  • Default choice for 90% of images
  • Converting hand-drawn sketches
  • Original is mostly lines/outlines
  • Creating coloring pages
  • You’ll add colors manually later
  • Want adjustable line thickness
  • Creating outline/wireframe version
  • Special artistic effect needed
  • Experimental graphics
  • Very rare use case

​
Draw Style Tips

Can’t decide? Use Fill Shapes (default). You can always convert strokes to outlines in Figma later if needed (Right-click → Outline Stroke).

​
Fill Gaps

Controls: Fixes white-line rendering bugs

​
What Fill Gaps Does

Fill Gaps solves a technical rendering problem where thin white lines appear between shapes at certain zoom levels. This is a browser/renderer limitation, not a design flaw.

Problem

Without Fill Gaps:
  • Tiny gaps between shapes
  • Visible at certain zoom levels
  • Especially on web/mobile
  • Looks unprofessional

Solution

With Fill Gaps:
  • Micro-overlaps at edges
  • Gaps eliminated
  • Smooth rendering
  • Professional quality

​
How Fill Gaps Works

Technical: Adds tiny overlaps (0.5-5px) between adjacent shapes Visual impact: None when viewed normally, but eliminates rendering gaps When you’ll notice the problem:
  • Web browsers at non-100% zoom
  • Mobile devices (different pixel densities)
  • Exported SVGs on websites
  • PDFs at certain zoom levels

​
Fill Gaps Settings

​
Stroke Width (Advanced)

Only available when Fill Gaps is enabled Controls how much overlap is added at shape boundaries.
Stroke WidthUse Case
0.5-1.0pxSubtle overlap, minimal effect
2.0px ⭐Default, works for 95% of images
3.0-5.0pxAggressive overlap, for problem images
Default (2.0px) works great for almost everyone. Only adjust if you still see white lines after converting.

​
Before/After Comparison

What you see:
  • Thin white lines at shape boundaries
  • More visible when zoomed
  • Especially on web browsers
  • Looks unfinished
When this happens:
  • Non-retina displays
  • Browser zoom not at 100%
  • Mobile devices
  • PDF viewers

​
Fill Gaps Tips

Recommended default: Enable Fill Gaps for almost everythingExceptions:
  • Line Art (already disabled in preset)
  • Technical drawings requiring precision
  • Print-only graphics
If unsure: Enable it! There’s virtually no downside.
If white lines persist after enabling:
  1. Increase Stroke Width to 3.0 or 4.0
  2. Preview again
  3. Check at different zoom levels
  4. Most stubborn gaps fixed by 4-5px
Rarely needed: Default 2.0px works 95% of time

​
Settings Quick Reference

SettingWhat It DoesRecommended StartAdjust When…
QualityCurve precisionStandardEdges look jagged → High
DetailNoise filtering50 (Illustration)Too noisy → 30 | Lost features → 70
ColorsColor palette size32 (Illustration)Colors wrong → 64 or 256
Draw StyleFill vs StrokeFill ShapesLine art → Stroke Shapes
Fill GapsFix white linesEnabledPrint only → Disable

​
Next Steps

Advanced Features

Custom palettes, stroke width, and power tips

Best Practices

Real-world workflows for different scenarios

Troubleshooting

Fix quality issues and optimize results