Community画像github.com

alvici/png-to-svg

PNG を SVG に変換 — ロゴ、アイコン、フラットなイラスト、線画、グラデーション形状の PNG 画像を、きれいなベクター SVG に変換します。1 ファイルまたはフォルダ単位に対応し、カラーバリエーション(オリジナル / 白 / 黒)の選択、ファビコンやアプリアイコンの生成も可能。PNG から SVG への変換、トレース、ベクトル化を依頼されたときに使用します。

png-to-svg とは?

このスキルは、PNG 画像を本物のベクター SVG(パスデータ)に変換するためのツールです。ロゴ、アイコン、フラットなイラスト、線画、グラデーション形状などに最適で、単一ファイルまたはフォルダ全体の変換をサポートします。ユーザーは変換前にカラーバリアント(オリジナル / 白 / 黒)を選択でき、ファビコンやアプリアイコンの生成も可能です。変換後は類似率(similarity_pct)と監査結果(audit.verdict)を含む JSON レポートが出力され、必要に応じて色数やスペックル除去の調整を最大 3 回まで試行できます。Windows、macOS、Linux に対応しており、スクリプトは `scripts/` フォルダに格納されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alvici/png-to-svg/tree/HEAD

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

PNG を SVG に変換

PNG を実際のベクター SVG(パス)に変換します。SVG でラップされた PNG ではありません。 すべてのスクリプトはこのファイルと同じディレクトリの scripts/ フォルダにあります。フルパスで実行してください。

Windows: python または py -3 を使用してください(python3 は避けてください。Microsoft Store が開くことが多いため)。 準備、レンダラー、Windows の一般的な問題については references/windows.md を参照してください。

作業手順

  1. 素材を確認する。 PNG ファイルが開けることを確認してください。他のブランドのロゴやキャラクターを変換しないでください(ユーザーが明らかに権利を持っている場合を除く)。

  2. 変換前にバリアントを尋ねる。 ユーザーがバリアントを選択するまで SVG 生成プロセスを開始しないでください。 次のコマンドを実行します: python scripts/png2svg.py input.png --list-options

    • source_type: color → オリジナルカラー、白、黒、またはそれらの組み合わせのどれが欲しいか尋ねます。
    • source_type: mono → 黒、白、または両方のどれが欲しいか尋ねます。

    ユーザーがバリアントを指定せずに変換を依頼した場合は、オプションを確認した後、質問をして停止します。選択肢がないからといって default を選択しないでください。ユーザーが回答した後に続行します。ユーザーが明示的に質問なしで直接処理を依頼した場合は、default を使用します。 各バリアントの詳細は references/variants.md を参照してください。

  3. ユーザーが選択したら変換する。 ユーザーが選んだバリアントのみを --variants に指定します。例: python scripts/png2svg.py input.png out_dir --variants original,white --compare ユーザーがファビコンやアプリアイコンを要求した場合は --icons を追加します。 フォルダ全体の場合は、input.png をフォルダ名に置き換えます。

  4. JSON レポートを読む。 各バリアントに similarity_pct と audit があります。

    • similarity_pct ≥ 97 かつ audit.verdict = ok → 完了。
    • それ以外は、references/tuning.md に従って --colors または --speckle を調整し、最大 3 回試行します。
    • similarity_pct: null はレンダラーがないことを意味します。結果は生成されますが、視覚チェックがスキップされたことを伝えてください。
    • 画像を確認できる場合は、*_compare.png(左 = ターゲット、右 = 結果)を開いてください。
  5. 納品する。 各バリアントの SVG ファイル(および要求された場合は icons/ フォルダ)を、メソッド、類似度、サイズ、notes や audit.issues からの注意事項の簡単な要約とともに提供します。

ルール

  • 元のファイルを決して変更しないでください。常に出力フォルダに書き込みます。
  • 白/黒バリアントは単色のシルエットです。形状内の色の違いはすべて統合されます。ロゴにそのような詳細がある場合はユーザーに伝えてください。
  • 追加スクリプト:scripts/svg_audit.py(任意の SVG を監査)、scripts/render.py --which(利用可能なレンダラーを確認)、scripts/variants.py(既存の SVG からバリアントを生成)。
  • AION ダッシュボードのチェックボックス統合:references/aion-integration.md。

関連スキル