⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

SVG图标生成器 - 将栅格图像转换为彩色SVG，支持AI提示词生成与自动背景移除

svg-icon-maker by heroygt/skills

62 周安装量

5 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/heroygt/skills --skill svg-icon-maker

自动化图像处理设计

🇨🇳中文介绍

SVG 图标生成器

使用 @neplex/vectorizer 将栅格图像转换为彩色 SVG。

输出目录

所有文件将保存到带有时间戳文件夹的工作区（格式：YYYY-MM-DDTHH-mm-ss-SSSZ）：

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

前提条件

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

工作流程

步骤 1：生成参考图像

使用 generate_image 工具，首先保存到 svg-output 根目录（或者如果手动管理，可直接保存到输出文件夹）：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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

🇺🇸English

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

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):

# 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 <input-file> [output-dir]

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 <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)

Weekly Installs

Repository

heroygt/skills

GitHub Stars

First Seen

Jan 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode57

codex55

gemini-cli54

github-copilot51

cursor51

kimi-cli47