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):
Prerequisites
cd
Workflow Step 1: Generate Reference Image
Use generate_image tool, save to svg-output root first (or directly to output folder if managed manually):
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):
node .agent/skills/svg-icon-maker/script/convert-template.js
Example:
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
ls -la
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