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. 03vtracerによるスプラインベクター化
  4. 04svgoによるSVGパスの最適化

活用シーン

  1. 01PNG画像をSVGに変換
  2. 02ベクター化前に白い背景を除去
  3. 03生成したSVGパスを最適化

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/lovstudio-png2svgを入力して読み込まれたか確認します。

同梱ファイルCHANGELOG.mdREADME.md

詳細

PNG から SVG への変換スキル

PNG 画像を高品質なベクター SVG に変換します。白い背景の除去にも対応しています。

ツールチェーン

PNG → magick (去白底+alpha阈值) → vtracer (样条曲线) → svgo (压缩) → SVG
  • ImageMagick (magick)：白い背景の除去＋アルファしきい値処理
  • 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 対応