svg-icon-maker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SVG Icon Maker

SVG 图标制作器

Convert raster images to colorful SVG using

@neplex/vectorizer

使用

@neplex/vectorizer

将栅格图像转换为彩色SVG。

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

所有文件将保存至工作区的带时间戳文件夹中（格式：

YYYY-MM-DDTHH-mm-ss-SSSZ

）：

<workspace>/svg-output/
└── <timestamp>/              # 示例：2026-01-27T02-13-38-811Z
    ├── reference.png         # 生成的参考图像
    ├── icon.svg              # 彩色SVG输出文件
    └── icon_preview.png      # 用于对比的预览图

Prerequisites

前置条件

bash

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

bash

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

Workflow

操作流程

Step 1: Generate Reference Image

步骤1：生成参考图像

Use

generate_image

tool, save to

svg-output

root first (or directly to output folder if managed manually):

bash

undefined

使用

generate_image

工具，先将图像保存至

svg-output

根目录（若手动管理也可直接保存至输出文件夹）：

bash

undefined

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"

undefined


**提示模板：**

"[主题] 头像，高保真矢量插画，清晰线条风格，黑色闭合轮廓，纯色填充，无渐变，白色背景，色彩间界限分明"

undefined

Step 2: Convert to Color SVG

步骤2：转换为彩色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

undefined

直接从技能资源中运行转换脚本（无需复制）：

bash

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

示例：

bash

undefined

Using default output directory (./svg-output)

使用默认输出目录（./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`.

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


**核心特性：**
- **四角填充去背景**：从四个角落开始移除背景，处理分割式背景。
- **内部细节保护**：保留主体内部的白色/浅色细节（如眼睛）。
- **自动阈值**：适配在角落检测到的特定背景颜色。
- **时间戳输出**：自动创建格式为`YYYY-MM-DDTHH-mm-ss-SSSZ`的文件夹。

Step 3: Verify & Compare

步骤3：验证与对比

bash

ls -la <workspace>/svg-output/

Use

view_file

to compare

reference.png

with

icon_preview.png

bash

ls -la <workspace>/svg-output/

使用

view_file

工具对比

reference.png

和

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

默认设置针对高色彩保真度优化 - 保留原始颜色，仅移除背景。

参数	默认值	说明
`colorMode`	Color	`ColorMode.Color` 或 `Binary`
`colorPrecision`	8	1-8，数值越高颜色越丰富（8=最高保真度）
`layerDifference`	8	颜色层阈值（数值越低，合并越少）
`filterSpeckle`	4	移除噪点像素（数值越低，保留细节越多）
`mode`	Spline	`PathSimplifyMode.Spline` 或 `Polygon`
`cornerThreshold`	60	角点检测角度
`spliceThreshold`	45	样条曲线角度阈值