mcpField
L
lovstudio-png2svg

lovstudio-png2svg

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

关于 lovstudio-png2svg

lovstudio-png2svg 是一项将 PNG 图片转换为 SVG 的技能，并可选择去除白色背景。其流程使用 ImageMagick 预处理、vtracer 矢量化和 svgo 优化。

主要功能

  1. 01PNG 转 SVG 工作流
  2. 02可选去除白色背景
  3. 03使用 vtracer 进行样条矢量化
  4. 04使用 svgo 优化 SVG 路径

适用场景

  1. 01将 PNG 图像转换为 SVG
  2. 02矢量化前去除白色背景
  3. 03优化生成的 SVG 路径

安装

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

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

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

附带文件CHANGELOG.mdREADME.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