mcpField
L
lovstudio:png2svg

lovstudio:png2svg

github.com/lovstudioDesign & UI7357 installsUpdated today
Repository

About lovstudio:png2svg

An image-processing skill for converting PNG files into SVG, intended for design tasks that need vectorized raster images. It can remove a white background and generates SVG through tracing and path optimization.

Key features

  1. 01Vectorize PNG files into SVG
  2. 02Optionally remove white backgrounds
  3. 03Trace using spline curves
  4. 04Compress and optimize SVG paths
  5. 05Adjust vectorization parameters

Use cases

  1. 01Convert a logo image to SVG
  2. 02Convert an image after removing white
  3. 03Optimize a generated SVG file

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lovstudio/skills --skill lovstudio:png2svg

After installing, type/lovstudio:png2svgin Claude Code to confirm it loaded.

Bundled filesCHANGELOG.md

Details

From the project README

PNG to SVG Skill

将 PNG 图片转换为高质量矢量 SVG，支持去除白色背景。

工具链

PNG → magick (去白底+alpha阈值) → vtracer (样条曲线) → svgo (压缩) → SVG
  • ImageMagick (magick): 去除白色背景 + alpha 阈值处理
  • vtracer: 样条曲线矢量化（比 potrace 更平滑）
  • svgo: SVG 路径压缩优化

调用方式

当需要将 PNG 转换为 SVG 时，按以下步骤执行：

输入
  • INPUT_PNG: 输入 PNG 文件路径（必需）
  • OUTPUT_SVG: 输出 SVG 路径（默认：同名 .svg）
  • KEEP_BG: 是否保留背景（默认：false，去除白色背景）
执行步骤
Step 1: 预处理（去白底）

如果需要去除背景（KEEP_BG=false）：

magick INPUT_PNG \
  -fuzz 15% -transparent white \
  -channel A -threshold 50% +channel \
  INPUT_PNG.temp.png
Step 2: 矢量化
vtracer --input INPUT_PNG.temp.png --output OUTPUT_SVG \
  --mode spline \
  --filter_speckle 8 \
  --color_precision 8 \
  --corner_threshold 120 \
  --segment_length 6 \
  --path_precision 5
Step 3: 压缩优化
npx svgo OUTPUT_SVG -o OUTPUT_SVG --multipass
Step 4: 清理
rm -f INPUT_PNG.temp.png
输出

返回生成的 SVG 文件路径，并报告文件大小。

✓ PNG → SVG 转换完成

输入: {INPUT_PNG}
输出: {OUTPUT_SVG}
大小: {file_size}

依赖

首次使用前确保已安装：

brew install imagemagick
cargo install vtracer
npm install -g svgo  # 或使用 npx

参数调优

参数作用调大效果
filter_speckle过滤小斑点更干净
corner_threshold角点阈值更平滑
segment_length线段长度更平滑
color_precision颜色精度更准确

Comments

Markdown supported