mcpField
L
lovstudio:png2svg

lovstudio:png2svg

github.com/lovstudio设计与 UI7357 次安装今天更新
代码仓库

关于 lovstudio:png2svg

用于将 PNG 转换为 SVG 的图像处理技能，面向需要矢量化位图的设计工作。它可选择去除白色背景，并通过矢量化和路径压缩生成 SVG。

主要功能

  1. 01将 PNG 矢量化为 SVG
  2. 02可去除白色背景
  3. 03使用样条曲线矢量化
  4. 04压缩优化 SVG 路径
  5. 05支持调节矢量化参数

适用场景

  1. 01将标志图转换为 SVG
  2. 02去除白底后转换图像
  3. 03优化生成的 SVG 文件

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/lovstudio:png2svg确认已加载。

附带文件CHANGELOG.md

详细介绍

来自项目 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颜色精度更准确

评论

支持 Markdown