# Svg Icon Maker

> Generate production-quality SVG icons with COLOR support using VTracer vectorization. Converts raster images to clean, colorful SVG paths.

- Skill: `heroygt/svg-icon-maker` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add heroygt/svg-icon-maker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/heroygt/svg-icon-maker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: heroygt (https://skillmd.com/u/heroygt)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/heroygt/svg-icon-maker

---


# SVG Icon Maker

Convert raster images to **colorful SVG** using `@neplex/vectorizer`.

## Output Directory

All files saved to workspace with timestamped folders (format: `YYYY-MM-DDTHH-mm-ss-SSSZ`):
```
<workspace>/svg-output/
└── <timestamp>/              # e.g., 2026-01-27T02-13-38-811Z
    ├── reference.png         # Generated reference image
    ├── icon.svg              # Color SVG output
    └── icon_preview.png      # Preview for comparison
```

## Prerequisites

```bash
cd <workspace>
npm init -y
npm install @neplex/vectorizer sharp
```

## Workflow

### Step 1: Generate Reference Image

Use `generate_image` tool, save to `svg-output` root first (or directly to output folder if managed manually):
```bash
# Generate image, then move to proper folder later or keep in root for processing
```

**Prompt template:**
```
"[subject] avatar, high fidelity vector illustration, clear line style, 
black closed outlines, flat uniform colors, no gradients, 
white background, distinct separation between colors"
```

### Step 2: Convert to Color SVG

Run the conversion script directly from skill resources (no copying needed):

```bash
node .agent/skills/svg-icon-maker/script/convert-template.js <input-file> [output-dir]
```

**Example:**
```bash
# Using default output directory (./svg-output)
node .agent/skills/svg-icon-maker/script/convert-template.js ./my-image.png

# Specifying custom output directory
node .agent/skills/svg-icon-maker/script/convert-template.js ./my-image.png ./custom-output
```

**Key Features:**
- **4-Corner Flood Fill**: Removes background starting from all corners to handle split backgrounds.
- **Inner Detail Protection**: Preserves white/light details inside the subject (e.g., eyes).
- **Auto-Threshold**: Adapts to the specific background color found at the corners.
- **Timestamped Output**: Automatically creates folders with format `YYYY-MM-DDTHH-mm-ss-SSSZ`.

### Step 3: Verify & Compare

```bash
ls -la <workspace>/svg-output/
```

Use `view_file` to compare `reference.png` with `icon_preview.png`.

## Parameters

**Default settings optimized for HIGH color fidelity** - preserves original colors, only removes background.

| Parameter | Default | Description |
|-----------|---------|-------------|
| `colorMode` | Color | `ColorMode.Color` or `Binary` |
| `colorPrecision` | 8 | 1-8, higher = more colors (8 = max fidelity) |
| `layerDifference` | 8 | Color layer threshold (lower = less merging) |
| `filterSpeckle` | 4 | Remove noise pixels (lower = more detail) |
| `mode` | Spline | `PathSimplifyMode.Spline` or `Polygon` |
| `cornerThreshold` | 60 | Corner detection angle |
| `spliceThreshold` | 45 | Spline angle threshold |