svg-tracer について
potrace によるトレースでビットマップ画像を SVG ベクターグラフィックに変換する MCP サーバーです。PNG や JPG から SVG を作成する必要があるユーザー、特にアイコン制作に向いています。変換ごとにトレースパラメーターとサイズを調整できます。
主な機能
- 01PNG、JPG、BMP、GIF、TIFF、WebP の入力に対応
- 02透過 PNG のアルファチャンネル前処理
- 03しきい値、斑点抑制、曲線最適化の調整
- 04アイコン生成のための目標サイズへの拡縮
- 05塗りつぶし色と背景色の指定
活用シーン
- 01ロゴを拡大縮小可能な SVG ファイルに変換
- 0250x50 の Dewey アイコンの生成
- 03トレースしたアイコンへのブランドカラーの適用
MCP 対応
本プロジェクトは MCP サーバーであり、ビットマップを SVG に変換してローカルディスクに書き出す trace_bitmap_to_svg ツールを MCP クライアントに提供します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
1掲載時のツール一覧 · 2 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| color | string | いいえ | トレースした SVG パスの塗りつぶし色を 16 進数カラー文字列で指定します。例:オレンジは "#FF5733"、黒は "#000000"。デフォルト:"#000000"。 |
| threshold | number | いいえ | トレース用の白黒しきい値(0-255)。値が低いほど細部が多く残り、値が高いほど単純化されます。デフォルト:128。 |
| turd_size | number | いいえ | このピクセル数以下の斑点を除去します。値を大きくするとノイズが減り、小さくすると細部が保持されます。デフォルト:2。 |
| background | string | いいえ | SVG の背景色です。背景なしにするには "transparent" を指定するか、16 進数のカラー文字列を指定します。デフォルト:"transparent"。 |
| input_path | string | はい | 入力ビットマップ画像ファイルの絶対パスです。対応形式:PNG、JPG/JPEG、BMP、GIF、TIFF、WebP。例:"/tmp/logo.png" |
| output_path | string | いいえ | 出力 SVG ファイルを書き込む絶対パスです。指定しない場合、入力ファイルと同じディレクトリおよびファイル名を使用し、拡張子を .svg にします。例:"/tmp/logo.svg" |
| target_width | number | いいえ | 出力 SVG viewBox の目標幅(ピクセル単位)です。トレースしたパスは収まるように拡大縮小されます。アスペクト比は維持されます。例:幅 50px のアイコンなら 50。 |
| opt_tolerance | number | いいえ | 曲線の最適化許容値(0-1)です。値が大きいほど曲線が単純になり、小さいほど細部が保持されます。デフォルト:0.2。 |
| target_height | number | いいえ | 出力 SVG viewBox の目標高さ(ピクセル単位)です。トレースしたパスは収まるように拡大縮小されます。アスペクト比は維持されます。例:高さ 50px のアイコンなら 50。 |
詳細
SVG Tracer MCP サーバー
potrace トレースを使用してビットマップ画像(PNG、JPG、BMP、GIF、TIFF、WebP)を SVG ベクター画像に変換する MCP サーバーです。
機能
- 一般的なビットマップ形式を、クリーンな SVG ベクターパスに変換します
- 透明な PNG を自動で前処理します(アルファチャンネルを白地に黒のマスクに変換)
- トレースパラメーターをカスタマイズできます(しきい値、斑点の抑制、曲線の最適化)
- アイコン(例:50x50 の Dewey アイコン)を生成するためのターゲットサイズを指定できます
- 塗りつぶし色と背景をカスタマイズできます
- デフォルトではローカルファイルシステムで動作します(入力を読み込み、出力をディスクに書き込みます)
クイックスタート
npx を使用する場合
{
"mcpServers": {
"svg-tracer": {
"command": "npx",
"args": ["-y", "@pulsemcp/svg-tracer-mcp-server"]
}
}
}
手動セットアップ
git clone https://github.com/pulsemcp/mcp-servers.git
cd mcp-servers/productionized/svg-tracer
npm install
npm run build
npm start
ツール
trace_bitmap_to_svg
potrace トレースを使用して、ビットマップ画像を SVG ベクター画像に変換します。
パラメーター:
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
input_path | string | はい | 入力ビットマップ画像ファイルの絶対パス |
output_path | string | いいえ | 出力 SVG のパス(デフォルトは入力パスの拡張子を .svg にしたもの) |
threshold | number | いいえ | 白黒のしきい値 0-255(デフォルト:128) |
turd_size | number | いいえ | 指定したピクセル数までの斑点を抑制します(デフォルト:2) |
opt_tolerance | number | いいえ | 曲線最適化の許容値 0-1(デフォルト:0.2) |
color | string | いいえ | トレースしたパスの塗りつぶし色(デフォルト:"#000000") |
background | string | いいえ | 背景色(デフォルト:"transparent") |
target_width | number | いいえ | SVG のターゲット幅(ピクセル単位) |
target_height | number | いいえ | SVG のターゲット高さ(ピクセル単位) |
使用例:
Convert /tmp/logo.png to SVG:
trace_bitmap_to_svg(input_path="/tmp/logo.png")
Create a 50x50 icon with brand color:
trace_bitmap_to_svg(
input_path="/tmp/logo.png",
output_path="/tmp/logo-icon.svg",
target_width=50,
target_height=50,
color="#FF5733"
)
仕組み
- 入力を読み込む - ビットマップ画像(PNG、JPG、BMP、GIF、TIFF、WebP)を読み込みます
- 前処理する - アルファチャンネルを白地に黒のグレースケールマスクに変換して、透明度を処理します
- トレースする - potrace を使用して、ビットマップを SVG ベクターパスに変換します
- 拡大縮小する - 必要に応じてパスを変換グループで囲み、ターゲットサイズに合わせます
- 出力する - SVG をディスクに書き込み、メタデータとともに SVG 文字列を返します
対応形式
- PNG(アルファチャンネル付きの透明な PNG を含む)
- JPEG / JPG
- WebP
- BMP
- GIF
- TIFF
開発
npm install
npm run build
npm run dev # Development mode with auto-reload
npm test # Run functional tests
npm run test:run # Run tests once
npm run test:integration # Run integration tests
npm run test:all # Run all tests
ライセンス
MIT
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。