mcpField
S
svg-tracer

svg-tracer

ローカル
github.com/pulsemcpメディア・デザイン818 週間前に更新

svg-tracer について

potrace によるトレースでビットマップ画像を SVG ベクターグラフィックに変換する MCP サーバーです。PNG や JPG から SVG を作成する必要があるユーザー、特にアイコン制作に向いています。変換ごとにトレースパラメーターとサイズを調整できます。

主な機能

  1. 01PNG、JPG、BMP、GIF、TIFF、WebP の入力に対応
  2. 02透過 PNG のアルファチャンネル前処理
  3. 03しきい値、斑点抑制、曲線最適化の調整
  4. 04アイコン生成のための目標サイズへの拡縮
  5. 05塗りつぶし色と背景色の指定

活用シーン

  1. 01ロゴを拡大縮小可能な SVG ファイルに変換
  2. 0250x50 の Dewey アイコンの生成
  3. 03トレースしたアイコンへのブランドカラーの適用

MCP 対応

本プロジェクトは MCP サーバーであり、ビットマップを SVG に変換してローカルディスクに書き出す trace_bitmap_to_svg ツールを MCP クライアントに提供します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"com-pulsemcp-svg-tracer": {
"command": "npx",
"args": [
"-y",
"@pulsemcp/svg-tracer-mcp-server"
]
}
}
}
起動コマンドnpx -y @pulsemcp/svg-tracer-mcp-server

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@pulsemcp/svg-tracer-mcp-server0.1.3

ツール

1

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
colorstringいいえトレースした SVG パスの塗りつぶし色を 16 進数カラー文字列で指定します。例:オレンジは "#FF5733"、黒は "#000000"。デフォルト:"#000000"。
thresholdnumberいいえトレース用の白黒しきい値(0-255)。値が低いほど細部が多く残り、値が高いほど単純化されます。デフォルト:128。
turd_sizenumberいいえこのピクセル数以下の斑点を除去します。値を大きくするとノイズが減り、小さくすると細部が保持されます。デフォルト:2。
backgroundstringいいえSVG の背景色です。背景なしにするには "transparent" を指定するか、16 進数のカラー文字列を指定します。デフォルト:"transparent"。
input_pathstringはい入力ビットマップ画像ファイルの絶対パスです。対応形式:PNG、JPG/JPEG、BMP、GIF、TIFF、WebP。例:"/tmp/logo.png"
output_pathstringいいえ出力 SVG ファイルを書き込む絶対パスです。指定しない場合、入力ファイルと同じディレクトリおよびファイル名を使用し、拡張子を .svg にします。例:"/tmp/logo.svg"
target_widthnumberいいえ出力 SVG viewBox の目標幅(ピクセル単位)です。トレースしたパスは収まるように拡大縮小されます。アスペクト比は維持されます。例:幅 50px のアイコンなら 50。
opt_tolerancenumberいいえ曲線の最適化許容値(0-1)です。値が大きいほど曲線が単純になり、小さいほど細部が保持されます。デフォルト:0.2。
target_heightnumberいいえ出力 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_pathstringはい入力ビットマップ画像ファイルの絶対パス
output_pathstringいいえ出力 SVG のパス(デフォルトは入力パスの拡張子を .svg にしたもの)
thresholdnumberいいえ白黒のしきい値 0-255(デフォルト:128)
turd_sizenumberいいえ指定したピクセル数までの斑点を抑制します(デフォルト:2)
opt_tolerancenumberいいえ曲線最適化の許容値 0-1(デフォルト:0.2)
colorstringいいえトレースしたパスの塗りつぶし色(デフォルト:"#000000")
backgroundstringいいえ背景色(デフォルト:"transparent")
target_widthnumberいいえSVG のターゲット幅(ピクセル単位)
target_heightnumberいいえ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"
)

仕組み

  1. 入力を読み込む - ビットマップ画像(PNG、JPG、BMP、GIF、TIFF、WebP)を読み込みます
  2. 前処理する - アルファチャンネルを白地に黒のグレースケールマスクに変換して、透明度を処理します
  3. トレースする - potrace を使用して、ビットマップを SVG ベクターパスに変換します
  4. 拡大縮小する - 必要に応じてパスを変換グループで囲み、ターゲットサイズに合わせます
  5. 出力する - 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

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。