> ## Documentation Index > Fetch the complete documentation index at: https://vector.storyship.studio/llms.txt > Use this file to discover all available pages before exploring further. # Understanding Presets > Deep dive into Logo, Illustration, Line Art, and High-Fidelity presets. Learn when to use each mode and how they optimize vectorization. ## What Are Presets? Presets are **one-click optimized configurations** that automatically adjust multiple settings for specific image types. Think of them as "smart modes" that do the heavy lifting for you. **Not sure which preset to use?** Start with **Illustration** β€” it's optimized for 90% of use cases and provides the best balance of quality, speed, and file size. ### What Presets Control Each preset automatically configures: **Curve precision** How accurately curves match the original **Noise filtering** How small shapes are preserved or removed **Color limit** Maximum number of colors in output **Rendering method** Fill shapes, stroke shapes, or edge outlines **Presets are starting points!** You can always manually adjust individual settings after selecting a preset. They're optimized defaults, not rigid rules. *** ## 🏷️ Logo Preset **Optimized for**: Clean, simple graphics with limited colors ### Best Use Cases **Company Logos** Brand marks, wordmarks, monograms **App Icons** iOS, Android, web favicons **Badges & Seals** Certificates, stamps, emblems **Simple Graphics** Pictograms, simple illustrations **Flags & Symbols** Country flags, road signs **Labels & Tags** Product labels, stickers ### Technical Settings | Parameter | Value | Purpose | | -------------- | ---------------------- | ------------------------------- | | **Quality** | Standard (0.1) | Balanced precision and speed | | **Detail** | 30 (min\_area: 3.65px) | Aggressive noise removal | | **Colors** | 16 | Limited palette for clean logos | | **Draw Style** | Fill Shapes | Solid color fills | | **Fill Gaps** | Enabled | Prevents rendering artifacts | ### βœ… Use Logo Preset When **Perfect for**: * Logos with geometric shapes * Icons with solid colors * Graphics with clear boundaries * Images with 1-5 main colors **Why**: Logo preset removes noise aggressively, perfect for clean graphics **Perfect for**: * Flat color logos (no gradients) * 2-color or 3-color designs * High-contrast images * Solid fills (no transparency) **Why**: 16-color limit simplifies palette while preserving main colors **Perfect for**: * Web logos (fast loading) * App icons (small bundle size) * Email signatures * Favicon conversions **Why**: Produces smallest file sizes (typically 5-50 KB) **Perfect for**: * Downloaded JPEG logos * Screenshots of logos * Client-provided low-quality files * Removing JPG artifacts **Why**: Detail setting of 30 removes compression artifacts automatically ### ❌ Don't Use Logo Preset For **Avoid Logo preset when**: * **Complex illustrations** with many colors or gradients * **Photographs** or photo-realistic images * **Hand-drawn sketches** with texture * **Detailed artwork** with fine features * **Images with gradients** or subtle shading β†’ Use **Illustration** or **High-Fidelity** instead ### πŸ’‘ Pro Tips **Logo preset automatically removes compression noise** Before converting: * JPEG logo from website (artifacts visible) * Compression noise around edges * Color banding After Logo preset: * βœ“ Clean, crisp edges * βœ“ Noise removed * βœ“ Smooth colors Perfect for salvaging low-quality client logos! **For very simple logos (2-3 colors)** After selecting Logo preset: 1. Manually reduce **Colors** to 8 or even 4 2. Results in even cleaner output 3. Smaller file size 4. Easier to recolor in Figma **Example**: Two-color logo β†’ set Colors to 4 **After vectorizing logos** 1. Select the converted SVG 2. Right-click β†’ **Flatten** (`Cmd/Ctrl + E`) 3. Merges overlapping shapes 4. Cleaner layer structure 5. Easier color management **Best practice before converting** 1. Remove background in Figma or remove.bg 2. Vectorize just the logo 3. Cleaner result (no background noise) 4. Smaller file size **Huge difference** in output quality! ### Expected Results | Metric | Range | Notes | | ------------------- | -------- | ------------------------------- | | **File Size** | 5-50 KB | Very small, web-optimized | | **Processing Time** | 5-10 sec | Fast conversion | | **Editability** | ⭐⭐⭐⭐⭐ | Simple paths, easy to modify | | **Accuracy** | ⭐⭐⭐⭐ | Clean edges, simplified details | *** ## 🎨 Illustration Preset **Optimized for**: Balanced detail, rich colors, general use ⭐ **Recommended starting point for 90% of users** ### Best Use Cases **Flat Illustrations** Vector art, digital paintings **UI Graphics** Onboarding, marketing visuals **Stock Images** Downloaded illustrations **Design Elements** Decorative patterns, backgrounds **Infographics** Data visualization graphics **Presentation Graphics** Slides, decks, reports ### Technical Settings | Parameter | Value | Purpose | | -------------- | ---------------------- | ------------------------------- | | **Quality** | Standard (0.1) | Good precision, fast processing | | **Detail** | 50 (min\_area: 2.75px) | Balanced noise filtering | | **Colors** | 32 | Rich color palette | | **Draw Style** | Fill Shapes | Standard filled shapes | | **Fill Gaps** | Enabled | Smooth rendering | ### Why This is the Default Choice * Not too aggressive (like Logo) * Not too slow (like High-Fidelity) * Just right for most images * Simple graphics: βœ“ Works great * Medium complexity: βœ“ Perfect * Complex art: βœ“ Good starting point * Smaller than High-Fidelity * More detailed than Logo * 50-200 KB typical range * 10-15 seconds average * Quick preview testing * Efficient workflow ### βœ… Use Illustration Preset When * **Not sure which preset** to choose (default choice!) * Converting **flat design** illustrations * Image has **moderate detail** (not too simple, not photo-realistic) * Color palette has **5-30 colors** * You want **quick, reliable** results without tweaking * **General purpose** vectorization ### πŸ’‘ Pro Tips Start with Illustration (Detail 50), then fine-tune: * **Simple flat art**: Reduce Detail to 30-40 * **Textured illustrations**: Increase Detail to 60-70 * **Standard illustrations**: Keep at 50 (default) Use HD Preview (2 credits) to test! Illustration preset excels at: * Stock illustration conversions * Infographic elements * Presentation graphics * Social media visuals Preserves enough detail while keeping files manageable. After vectorizing with Illustration preset: 1. Convert to Figma component (`Cmd/Ctrl + Alt + K`) 2. Adjust colors to match design system 3. Add to component library 4. Create variants for different states Perfect for building reusable UI elements! ### Expected Results | Metric | Range | Notes | | ------------------- | --------- | --------------------------- | | **File Size** | 50-200 KB | Medium, practical | | **Processing Time** | 10-15 sec | Quick turnaround | | **Editability** | ⭐⭐⭐⭐ | Manageable complexity | | **Accuracy** | ⭐⭐⭐⭐⭐ | Preserves important details | *** ## ✏️ Line Art Preset **Optimized for**: Hand-drawn sketches, outlines, technical drawings ### Key Difference: Stroke-Based Output
### Fill Shapes (Other Presets) * Closed shapes with color fills * Like "coloring inside the lines" * Best for solid graphics * Standard vectorization
### Stroke Shapes (Line Art) * Paths with stroke weight * Like "drawing with a pen" * Best for outlines * **Adjustable line thickness!**
### Best Use Cases **Hand Sketches** Pencil/ink drawings, doodles **Technical Drawings** Blueprints, wireframes, diagrams **Coloring Pages** Outlines for later coloring **Calligraphy** Hand lettering, brush strokes **Architectural** Floor plans, elevations **Comics** Line work, panel outlines ### Technical Settings | Parameter | Value | Purpose | | -------------- | ---------------------- | ----------------------------- | | **Quality** | High (0.05) | Precise line capture | | **Detail** | 70 (min\_area: 1.85px) | Preserve fine strokes | | **Colors** | 8 | Focus on lines, minimal fills | | **Draw Style** | **Stroke Shapes** | Lines, not fills! | | **Fill Gaps** | Disabled | Preserve gaps in outlines | ### βœ… Use Line Art Preset When * Original is a **hand-drawn sketch** or **line drawing** * Image is mostly **black lines on white** (or vice versa) * You plan to **add colors later** in Figma * You want **adjustable stroke weight** after conversion * Converting **coloring book pages** * Creating **outline versions** of illustrations ### ❌ Don't Use Line Art Preset For * Full-color illustrations β†’ Use **Illustration** * Logos with solid shapes β†’ Use **Logo** * Photos or realistic images β†’ Use **High-Fidelity** * Graphics that need filled shapes β†’ Use **Illustration** ### πŸ’‘ Pro Tips **Huge advantage of Line Art preset**: After vectorizing: 1. Select all paths (`Cmd/Ctrl + A`) 2. Change **Stroke** weight in properties 3. Make lines thicker or thinner 4. No need to re-convert! **Use Line Art to trace scanned sketches**: 1. Scan or photograph hand drawing 2. Import to Figma 3. Vectorize with Line Art preset 4. Clean up paths if needed 5. Fill with colors manually β†’ Custom illustrations from sketches! **If scan has paper texture**: Before converting: * Increase contrast in Figma * Or use Image Adjustments In plugin: * Reduce **Detail** to 40-50 * Removes paper texture noise * Keeps main line work **Turn strokes into fillable shapes**: After vectorizing: 1. Select stroke paths 2. Right-click β†’ **Outline Stroke** 3. Strokes become filled shapes 4. Now you can fill with colors! Best of both worlds! ### Expected Results | Metric | Range | Notes | | ------------------- | --------- | ------------------------------ | | **File Size** | 10-100 KB | Small to medium | | **Processing Time** | 15-20 sec | Slightly slower (high quality) | | **Editability** | ⭐⭐⭐⭐⭐ | Stroke-based, very flexible | | **Accuracy** | ⭐⭐⭐⭐⭐ | Captures fine lines precisely | *** ## 🌟 High-Fidelity Preset **Optimized for**: Maximum detail, complex artwork, photo-realistic images ### Technical Settings | Parameter | Value | Purpose | | -------------- | --------------------- | ----------------------- | | **Quality** | Ultra (0.01) | Maximum curve precision | | **Detail** | 80 (min\_area: 1.4px) | Minimal noise removal | | **Colors** | 256 | Full color spectrum | | **Draw Style** | Fill Shapes | Standard rendering | | **Fill Gaps** | Enabled | Clean rendering | ### ⚠️ Important Trade-Offs **Before using High-Fidelity, consider**: | Trade-Off | Impact | | ------------------------ | ------------------------------------------------ | | 🐒 **Slower Processing** | 30-60 seconds (vs 10-15 for Illustration) | | πŸ“¦ **Larger Files** | 500 KB - 2 MB (vs 50-200 KB) | | 🎨 **Complex Paths** | Harder to edit, more anchor points | | πŸ’° **Same Cost** | Still 10 credits (not cheaper or more expensive) | **Recommendation**: **Always try Illustration first**, upgrade if losing critical details. ### βœ… Use High-Fidelity When **Situation**: You tried Illustration, but fine features disappeared **Solution**: High-Fidelity preserves: * Intricate patterns * Fine textures * Subtle gradations * Complex overlapping shapes **Use cases**: * Large-format prints * Poster designs * Art projects * Portfolio pieces **Why**: When output quality is paramount **Perfect for**: * Detailed digital art * Comic book art * Editorial illustrations * Album covers **Why**: Preserves artistic intent and fine details ### ❌ Don't Use High-Fidelity For * **Simple logos** β†’ Total overkill, use **Logo** * **Everyday illustrations** β†’ **Illustration** works great * **Web graphics** β†’ Files too large, use **Illustration** * **First attempts** β†’ Start with **Illustration**, upgrade if needed * **Quick tests** β†’ Too slow for experimentation ### πŸ’‘ Pro Tips **Best practice workflow**: 1. Try **Illustration** preset first (10 credits) 2. Evaluate if details are lost 3. If satisfied β†’ Done! 4. If not β†’ Try **High-Fidelity** (another 10 credits) **Why**: 70% of time, Illustration is enough. Save time and avoid complexity. **High-Fidelity shines for print**: * **Large format** (posters, banners) * **High DPI** requirements * **Art prints** for sale * **Book covers** Web graphics rarely need this level of detail. **If file is too complex**: 1. Select SVG paths 2. Right-click β†’ **Simplify** 3. Reduces anchor points 4. Smaller file, easier editing Manual simplification after High-Fidelity conversion! ### Expected Results | Metric | Range | Notes | | ------------------- | ------------- | ------------------------ | | **File Size** | 500 KB - 2 MB | Large, not web-optimized | | **Processing Time** | 30-60 sec | Slow, be patient | | **Editability** | ⭐⭐⭐ | Complex, many paths | | **Accuracy** | ⭐⭐⭐⭐⭐ | Near-perfect fidelity | *** ## Preset Comparison Table
Feature Logo Illustration ⭐ Line Art High-Fidelity
Best For Simple graphics General use Sketches/outlines Complex art
Quality Standard Standard High Ultra
Detail Level Low (30) Medium (50) High (70) Very High (80)
Colors 16 32 8 256
Draw Style Fill Fill Stroke Fill
File Size 5-50 KB 50-200 KB 10-100 KB 500 KB-2 MB
Speed ⚑⚑⚑ Fast ⚑⚑ Medium ⚑⚑ Medium ⚑ Slow
Editability ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐
Recommended Use 10% of cases 70% of cases ⭐ 10% of cases 10% of cases
*** ## How to Choose: Decision Tree **Characteristics**: * Few colors (1-5) * Geometric shapes * Clean edges * No gradients β†’ **Logo** preset **Characteristics**: * Multiple colors (5-30) * Flat or semi-flat * Some detail * Standard illustration β†’ **Illustration** preset ⭐ **Characteristics**: * Outlines/sketches * Black lines on white * Hand-drawn look * Need to color later β†’ **Line Art** preset **Characteristics**: * Many colors (30+) * Fine details * Complex shapes * Photo-realistic β†’ Try **Illustration** first, then **High-Fidelity** * Click **HD Preview** (only 2 credits) * Evaluate the result * Satisfied? β†’ Convert! (10 credits) * Not satisfied? β†’ Try different preset or adjust settings **Remember**: * Previews are only 2 credits each * Try multiple presets * Find what works for YOUR image * No "wrong" choiceβ€”just optimize! **Presets are guidelines, not rules.** You can always manually adjust any preset's settings for custom optimization. [Learn about Core Settings β†’](/user-guide/core-settings) *** ## Next Steps Deep dive into Quality, Detail, Colors, and Style controls Scenario-based workflows for different image types Custom palettes, stroke width, and power-user tips