SVG Converter

🚀 MCP SVG 使用ガイド

MCP SVG は、SVG コードを高品質の PNG および JPG 画像に変換するための強力なツールです。このドキュメントでは、MCP SVG のインストール、設定、使用方法などについて詳しく説明します。

🚀 クイックスタート

MCP SVG を使用するためには、まずインストールと設定を行う必要があります。以下の手順に従って進めてください。

✨ 主な機能

サポート形式

• SVG から PNG への変換
• SVG から JPG への変換

高度な機能

• 背景色のカスタマイズ
• 画像の拡大縮小
• JPEG 品質の制御
• 自動パスリダイレクト

📦 インストール

インストール手順

1. npm を使用したインストール：

   npm install -g mcp-svg-converter
   

2. グローバルインストールの確認： node_modules ディレクトリがユーザーのホームディレクトリに存在することを確認してください。例えば：/Users/yourusername/node_modules

設定

設定ファイルの作成

プロジェクトのルートディレクトリまたは任意の場所に mcp-config.json という名前のファイルを作成し、以下の内容を追加します。

{
  "tools": {
    "svg-converter": {
      "command": "npx",
      "args": [
        "mcp-svg-converter"
      ],
      "allowedOutputPaths": [
        "/Users/yourusername/Desktop/svg-output",
        "/Users/yourusername/Documents/svg-images"
      ]
    }
  }
}

設定の説明

• command: 実行するコマンドを指定します（例：npx または実行ファイルのパス）
• args: コマンドの引数リストで、ツール名と許可された出力ディレクトリが順に並びます
• allowedOutputPaths: 書き込みが許可されているフォルダのパス

サーバーの起動

ターミナルで以下のコマンドを実行して、MCP サーバーを起動します。

npx mcp-svg-converter /Users/yourusername/Desktop/svg-output /Users/yourusername/Documents/svg-images

引数の説明

• 出力ディレクトリ: 書き込みが許可されているフォルダのパスを指定します

💻 使用例

基本的な使用法

例 1: PNG への変換

{
  "svgCode": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">\n  <rect width=\"200\" height=\"200\" fill=\"#f0f0f0\" />\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#ff6b6b\" />\n  <path d=\"M100 50 L130 150 L70 150 Z\" fill=\"white\" />\n</svg>",
  "outputPath": "/Users/yourusername/Desktop/output.png",
  "backgroundColor": "#ffffff",
  "scale": 2
}

例 2: JPG への変換

{
  "svgCode": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">\n  <rect width=\"200\" height=\"200\" fill=\"#f0f0f0\" />\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#ff6b6b\" />\n  <path d=\"M100 50 L130 150 L70 150 Z\" fill=\"white\" />\n</svg>",
  "outputPath": "/Users/yourusername/Desktop/output.jpg",
  "quality": 90
}

📚 ドキュメント

共通パラメータ

• svgCode: SVG コードの文字列
• outputPath: 出力ファイルのパス

特定形式のパラメータ

• PNG:
  • backgroundColor: 背景色（デフォルトは透明）
• JPG:
  • quality: 画像の品質で、0 - 100 の範囲（デフォルトは 85）

🔧 トラブルシューティング

一般的な問題

1. 権限問題: 出力ディレクトリに書き込み権限があることを確認してください。
2. パスの誤り: 出力パスが正しいことを確認してください。

解決策

chmod 755 /Users/yourusername/Desktop/svg-output

🔧 ツールのチェック

MCP は、設定ファイルとサーバーの状態を検証するためのチェックツールを提供しています。

npx mcp-inspector

チェック結果の例

{
  "status": "success",
  "message": "すべての設定パラメータが有効です"
}

📄 ライセンス

本ドキュメントにはライセンス情報が記載されていません。

🔗 詳細情報

詳細なヘルプやドキュメントについては、MCP 公式サイト をご覧ください。