关于 svg-icon-maker
svg-icon-maker 是将栅格图像转换为彩色 SVG 的技能，适合需要制作矢量图标的工作流。它通过背景移除和细节保护来生成 SVG 与预览文件。
主要功能
- 01栅格图像转彩色 SVG
- 02四角泛洪填充去背景
- 03保留主体内部浅色细节
- 04自动适配背景阈值
- 05按时间戳创建输出目录
适用场景
- 01将图像转换为矢量图标
- 02移除图像背景并保留内部细节
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svg-icon-maker确认已加载。
附带文件script/convert-template.js
详细介绍
SVG 图标制作器
使用 @neplex/vectorizer 将栅格图像转换为彩色 SVG。
输出目录
所有文件都会保存到工作区中带时间戳的文件夹（格式：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
前提条件
cd <workspace>
npm init -y
npm install @neplex/vectorizer sharp
工作流
步骤 1：生成参考图像
使用 generate_image 工具，先保存到 svg-output 根目录（或手动管理时直接保存到输出文件夹）：
# Generate image, then move to proper folder later or keep in root for processing
提示词模板：
"[subject] avatar, high fidelity vector illustration, clear line style,
black closed outlines, flat uniform colors, no gradients,
white background, distinct separation between colors"
步骤 2：转换为彩色 SVG
直接运行技能资源中的转换脚本（无需复制）：
node .agent/skills/svg-icon-maker/script/convert-template.js <input-file> [output-dir]
示例：
# 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
主要功能：
- 四角泛洪填充：从所有角落开始移除背景，以处理分割背景。
- 内部细节保护：保留主体内部的白色／浅色细节（例如眼睛）。
- 自动阈值：根据角落处检测到的特定背景颜色进行调整。
- 带时间戳的输出：自动创建格式为
YYYY-MM-DDTHH-mm-ss-SSSZ的文件夹。
步骤 3：验证并比较
ls -la <workspace>/svg-output/
使用 view_file 比较 reference.png 和 icon_preview.png。
参数
默认设置针对高色彩保真度进行了优化——保留原始颜色，仅移除背景。
| 参数 | 默认值 | 说明 |
|---|---|---|
colorMode | Color | ColorMode.Color 或 Binary |
colorPrecision | 8 | 1-8，数值越高，颜色越多（8 = 最高保真度） |
layerDifference | 8 | 颜色图层阈值（数值越低，合并越少） |
filterSpeckle | 4 | 移除噪点像素（数值越低，细节越多） |
mode | Spline | PathSimplifyMode.Spline 或 Polygon |
cornerThreshold | 60 | 角点检测角度 |
spliceThreshold | 45 | 样条角度阈值 |
评论
支持 Markdown