svg-icon-maker

SVG アイコンメーカー

@neplex/vectorizer を使用して、ラスター画像をカラフルな SVGに変換します。

出力ディレクトリ

すべてのファイルは、タイムスタンプ付きフォルダー（形式：YYYY-MM-DDTHH-mm-ss-SSSZ）を作成してワークスペースに保存されます。

<workspace>/svg-output/
└── <timestamp>/              # e.g., 2026-01-27T02-13-38-811Z
    ├── reference.png         # Generated reference image
    ├── icon.svg              # Color SVG output
    └── icon_preview.png      # Preview for comparison

前提条件

cd <workspace>
npm init -y
npm install @neplex/vectorizer sharp

ワークフロー

ステップ 1：参照画像を生成する

generate_image ツールを使用し、最初に svg-output のルートに保存します（または、手動で管理する場合は出力フォルダーに直接保存します）。

# Generate image, then move to proper folder later or keep in root for processing

プロンプトのテンプレート：

"[subject] avatar, high fidelity vector illustration, clear line style, 
black closed outlines, flat uniform colors, no gradients, 
white background, distinct separation between colors"

ステップ 2：カラー SVG に変換する

スキルのリソースから変換スクリプトを直接実行します（コピーは不要です）。

node .agent/skills/svg-icon-maker/script/convert-template.js <input-file> [output-dir]

例：

# Using default output directory (./svg-output)
node .agent/skills/svg-icon-maker/script/convert-template.js ./my-image.png

# Specifying custom output directory
node .agent/skills/svg-icon-maker/script/convert-template.js ./my-image.png ./custom-output

主な機能：

• 4 隅からの塗りつぶし：すべての隅から背景の除去を開始し、背景が分割されている場合にも対応します。
• 内部の細部を保護：被写体内部の白や明るい色の細部（目など）を保持します。
• しきい値の自動調整：隅で検出された背景色に応じて調整します。
• タイムスタンプ付きの出力：YYYY-MM-DDTHH-mm-ss-SSSZ 形式のフォルダーを自動的に作成します。

ステップ 3：確認して比較する

ls -la <workspace>/svg-output/

view_file を使用して、reference.png と icon_preview.png を比較します。

パラメーター

色の忠実度を高めるよう最適化されたデフォルト設定—元の色を保持し、背景のみを除去します。

パラメーター	デフォルト	説明
colorMode	Color	ColorMode.Color または Binary
colorPrecision	8	1～8。値が大きいほど色数が増えます（8 は最大の忠実度）。
layerDifference	8	カラーレイヤーのしきい値（値が小さいほど統合されにくくなります）。
filterSpeckle	4	ノイズピクセルを除去します（値が小さいほど細部が保持されます）。
mode	Spline	PathSimplifyMode.Spline または Polygon
cornerThreshold	60	コーナーの検出角度
spliceThreshold	45	スプラインの角度のしきい値