SVGator

SVGator MCP Server — ドキュメント

この MCP サーバーは、AI アシスタントをオンラインの SVG アニメーションツールである SVGator に直接接続します。 接続すると、アシスタントはプロジェクト内で 閲覧、確認、編集、作成、エクスポート を行えます。 「このブランドキットに合わせて色を編集する」といった簡単な作業から、 「アニメーション付きのロゴリビールを作成し、CSS のみのファイルとしてエクスポートする」といった作業まで、すべてを処理します。

• エンドポイント： https://mcp.svgator.com/mcp
• プロトコル： ストリーミング可能な HTTP を介した Model Context Protocol
• 認証： OAuth 2.1（SVGator アカウントでサインインしてください。詳しくは 利用開始 をご覧ください）

できること

機能	ツール	プロンプトの例
プロジェクトを閲覧する	list_projects, get_project, get_profile	「SVGator のプロジェクトを一覧表示して」
プロジェクトの構造を確認する	get_skeleton, read_part	「プロジェクト X にはどの要素があり、どれがアニメーション化されていますか？」
プロジェクトを段階的に編集する	edit_part	「円を赤にして、バウンスを無限にループさせて」
プロジェクト全体を作成または置き換える	create_project, replace_project	「新しいアニメーション付きローディングスピナーを作成して」
プロジェクトを複製、移動、名前変更する	duplicate_project, move_project	「プロジェクト X を『下書き』フォルダーにコピーして」
再利用可能なアセットを管理する	list_assets, get_asset, create_asset, update_asset	「このアイコンを再利用可能なアセットとして保存して」
プロジェクトをフォルダーに整理する	list_folders, get_folder, create_folder, update_folder	「『マーケティング』フォルダーを作成して、このプロジェクトをその中に保存して」
制作リファレンスを参照する	describe_shape	（アシスタントが正確な JSON 形式を取得するために使用）
納品用の形式にエクスポートする	export_project, get_render	「プロジェクト X を MP4 動画としてエクスポートして」
モーションデザイン制作のガイダンスを得る	スキルリソース＋プロンプト	「ロゴリビールのアートディレクションをしてから、制作して」

サーバーが返すすべてのプロジェクトには editor_url が含まれます。これはプロジェクトを SVGator エディターで開くディープリンクなので、アシスタントが作業を終えたところから、いつでも手作業で続きを行えます。

ツール

サーバーは22個のツールを公開しています。パラメーターと出力の全テーブルについては、ツールリファレンスを参照してください。

プロジェクト

• list_projects — 認証済みユーザーのSVGatorプロジェクトを新しい順に一覧表示します。各行にはeditor_urlのディープリンクが含まれ、ページネーション用の総件数も取得できます。
• get_project — プロジェクトの概要（タイトル、プレビュー、フォルダー、タイムスタンプ、キャンバスサイズ、背景色、アニメーションのタイムライン、保存済みのエクスポート設定）を取得します。
• create_project — 認証済みユーザーが所有する新しいSVGatorプロジェクトを、完全なプロジェクトJSONから作成します。
• replace_project — 既存のプロジェクトのJSON全体を、指定した完全なプロジェクトで置き換えます（変更前に検証が実行されます）。
• duplicate_project — 既存のプロジェクトを複製します。必要に応じて、別のフォルダーへの保存や新しいタイトルの指定もできます。
• move_project — プロジェクトを別のフォルダーに移動したり、名前を変更したりします。

プロジェクトの確認と編集

• get_skeleton — プロジェクトの軽量な構造マップを取得します（名前とキーフレーム数のみを含む要素ツリー。値は含みません）。編集ループのステップ1です。
• read_part — IDで指定したパスにある値または要素を正確に読み取ります。編集ループのステップ2です。
• edit_part — パスに対して検証済みの編集（更新、挿入、移動、削除）を1つ適用し、保存します。編集ループのステップ3です。
• describe_shape — 作成前に1つの構成要素（要素またはアニメーター）の正確なJSON構造を取得するため、フィールド名を推測する必要がありません。

アセット

• list_assets — 認証済みユーザーが再利用できるアセット（静的またはアニメーション付きのSVGアイテム）を新しい順に一覧表示します。
• get_asset — 完全なdata（{document, definitions}）ペイロードを含む1つのアセットを取得します。
• create_asset — アセットドキュメントから新しい再利用可能なアセットを作成します。
• update_asset — 既存のアセットのドキュメント全体を置き換えます。

フォルダー

• list_folders — 認証済みユーザーのフォルダー（プロジェクトの保存先となるラベル）を一覧表示します。
• get_folder — IDを指定して、1つのフォルダー（ID、タイトル、タイムスタンプ）を取得します。
• create_folder — プロジェクトを整理するための新しいフォルダーを作成します。
• update_folder — 既存のフォルダーの名前を変更します。

エクスポートとアカウント

• export_project — プロジェクトを納品用形式（SVG、Lottie、React Native、Flutter、動画、GIF）にエクスポートします。必要に応じて、エクスポートごとの上書き設定も指定できます。
• get_render — export_projectで開始したラスター（動画／GIF）レンダリングのステータスを確認し、完了後に署名付きダウンロードURLを取得します。
• get_profile — 認証済みユーザーの顧客プロフィール（名前、メールアドレス、プラン、チーム）を取得します。

ドキュメント一覧

ドキュメント	対象	内容
はじめに	すべてのユーザー	claude.ai、Claude Desktop、Claude Code、その他のMCPクライアントからの接続、認証、プライバシー
ツールリファレンス	インテグレーター／詳しく知りたい方	全ツールのパラメーターと出力の詳細なテーブル
プロジェクトの編集	インテグレーター／上級ユーザー	移動 → 読み取り → 編集 → 検証のループ、パス指定、作成ルール
プロジェクトのエクスポート	すべてのユーザー	形式、納品モード、エクスポートオプション、レンダリングの状態確認
スキルとリソース	インテグレーター	モーションデザインの制作スキル、MCPリソース、プロンプト
トラブルシューティング	すべてのユーザー	接続の問題、よくあるエラー、その意味

要件

• SVGatorアカウントが必要です（登録）。エクスポートはエディターの場合と同様に、プランの上限にカウントされます。
• claude.ai／Claude Desktopから接続するには、カスタムコネクターを利用できるClaudeのPro、Max、Team、またはEnterpriseプランが必要です。Claude Codeおよびその他のMCPクライアントは、エンドポイントに直接接続します。

仕組み（1 段落）

このサーバーはリモート MCP サーバーです。お使いの MCP クライアント（Claude、または Streamable HTTP に対応する任意のクライアント）は https://mcp.svgator.com/mcp に接続し、SVGator の通常の OAuth ログインを通じてサインインします。SVGator の認証情報はサーバー側にのみ保存され、AI モデルがアクセス トークンや秘密鍵を見ることはありません。モデルが受け取るのは、ツールの結果（プロジェクト一覧、構造マップ、エクスポート ファイル）のみです。ツールの入力は公開済みのスキーマに照らして検証され、無効なリクエストには、アシスタントが読み取って修正できる説明的なエラーが返されます。

⚙️ 機能

この MCP サーバーを使うと、自然な言葉で SVGator を操作できます。エディターをクリックして操作する代わりに、やりたいことを伝えるだけで、AI アシスタントがプロジェクトを開いたり、色を変更したり、ロゴをアニメーション化したり、完成したファイルをエクスポートしたりします。

アニメーションの反復作業をアシスタントに任せたいデザイナー、デザイナーの対応を待たずにウェブ対応アニメーションを必要とするマーケティングチーム、製品にすぐ組み込める本番環境向けエクスポート（Lottie、React Native、Flutter、SVG）を求める開発者のために設計されています。プロジェクトを開くためのエディターへの直接リンクが毎回返されるため、いつでも開いて手作業で仕上げられ、トークンを節約できます。

接続すると、アシスタントで次の操作ができます。

🗂️ プロジェクトとアセット

• プロジェクトを新しい順に一覧表示し、それぞれのエディターへの直接リンクを表示
• 大規模なライブラリを検索し、ページを切り替えて表示
• プロジェクトの設定を確認：キャンバスサイズ、背景、タイムライン、エクスポート設定
• 完全な定義からプロジェクトを作成
• 既存のプロジェクトを上書き
• プロジェクトを複製：同じフォルダーまたは別のフォルダーに複製
• プロジェクトを移動または名前変更
• プロジェクトをフォルダーに整理
• 再利用可能なアセットを管理：一覧表示、読み取り、作成、更新

🔍 構造と確認

• プロジェクトの構造をマップ化：キーフレーム数を含む要素ツリーを、重いデータを使わずに表示
• アニメーションの内容を確認：各要素のどのチャンネルにキーフレームがあるかを表示
• 正確な値を読み取り：任意のプロパティ、キーフレーム、要素
• 作成時のシェイプを参照：任意の要素や概念に対応する正確な JSON

🔷 シェイプと要素

• 長方形
• 円と楕円
• 線、折れ線、ポリゴン
• カスタムパス
• テキストと複数行テキスト
• 画像
• 再利用されるシンボルとインスタンス
• グループ
• マスクとクリップパス

🎨 塗り、線、色

• 単色の塗り：静的またはアニメーション
• グラデーションの塗り
• 線：単色またはグラデーション、静的またはアニメーション
• 合成：ブレンドモードと不透明度
• ぼかしなどのフィルター効果

🎞️ アニメーションとキーフレーム

• 値を指定して、特定の時刻にキーフレームを追加
• 動きが不要な箇所に静的な値を設定
• キーフレームの読み取り、確認、削除
• キーフレームごとにイージングを設定：3 次ベジェ
• 変形をアニメーション化：位置、回転、拡大縮小、傾斜
• 塗り、線、合成、フィルターチャンネルをアニメーション化
• あるシェイプから別のシェイプへモーフィング

📤 エクスポートと納品

• アニメーション SVG をエクスポート：JavaScript または CSS で制御
• 開始トリガーを設定：読み込み、ホバー、クリック、スクロール、またはプログラムによる制御
• クリック時とホバー時の動作を設定：一時停止、再開、逆再生、またはリセット
• Lottie にエクスポート
• React Native または Flutter のソースにエクスポート
• 動画をレンダリング：MP4、MOV、AVI、MKV、または WebM
• GIF、WebP、PNG シーケンス、または ZIP をレンダリング
• ループを制御：繰り返し回数、方向、ピンポン再生、速度
• フレームレート、解像度、品質を設定
• 透過と背景色を処理

✅ ベストプラクティス

SVGator motion design skill をインストールし、名前を指定して呼び出します： これは、単調でありきたりな動きではなく、タイミング、イージング、個性について意図的に選択できるよう、アシスタントを支援する制作ガイドです。SVGator skills repository からダウンロードし、「use SVGator motion skills to animate this logo.」のような文言で始めて、プロンプト内で直接呼び出してください。手動で呼び出すのは意図的な設計です。エクスポートや小さな編集だけを行う場合にはトークンを消費せず、追加のアートディレクションが必要なときだけ読み込めます。

まず自分のアートワークを用意してから、アニメーションを付けます： ゼロからオリジナルのシェイプを生成するのは、どの AI アシスタントにとっても最も難しい作業です。最良の結果を得るには、まず SVGator のエディターで SVG を作成するか、既存の SVG を読み込み、その後アシスタントにアニメーションを付けるよう依頼してください。そうすれば、ビジュアルスタイルの一貫性を保ちながら、AI が得意とする動き、タイミング、シーケンスに集中できます。

プロンプトを入力する前に、要素に名前を付けます： アシスタントは要素名を読み取り、プロジェクトの構造を把握します。「left_arm」、「bg_circle」、「headline」のような分かりやすい名前を付けると、適切な要素を対象にでき、ミスを防ぎ、複雑なシーンでも整理しやすくなります。汎用的な名前では作業が難しくなり、トークンの消費が増える可能性もあります（モデルによって異なります）。

複雑なアニメーションは手順に分けます： 「オンボーディングアニメーションをすべて作って」と依頼する代わりに、要素の作成、キーフレームの追加、タイミングの調整というように、ひとつずつ進めましょう。サーバーは編集ごとに検証済みの変更をひとつ適用するため、小さな手順に分けると、より細かく制御でき、ミスも簡単に見つけて修正できます。

タイミングと雰囲気を具体的に指定します： 「滑らかなフェード」では少し曖昧です。「ease-out を使った 400ms のフェードイン」と指定すれば、アシスタントが具体的に作業できます。キビキビ、弾むように、ゆっくり、控えめなど、求める雰囲気を詳しく説明するほど、最初の結果がイメージに近づきます。

公開先に合わせてエクスポート形式を選びます： ウェブには SVG が適しており、JavaScript または CSS のみ（パフォーマンスをさらに高められます）を選べます。Lottie、React Native、Flutter は、アプリやモバイルのプロジェクトにスムーズに引き継げます。動画と GIF は、アニメーション SVG が再生されないソーシャルメディアやメールに適しています。最初に形式を選んでおけば、再エクスポートの手間を省けます。

大きな実験をする前に、プロジェクトを複製します： AI に何かを一から作り直させたい場合は、まずプロジェクトを複製してから、コピーに変更を加えるよう依頼してください。元のプロジェクトはそのまま残るため、大胆な実験をしても作業中のバージョンを失うことはありません。

仕上げはエディターで行います： 各プロジェクトには、エディターへの直接リンクが付いています。アシスタントで大部分を仕上げたら、プロジェクトを開いて、最後の微調整を手作業で行ってください。AI が大部分の作業を担い、細部は自分で調整できます。また、小さな修正を手作業で行うほうが、アシスタントに一つずつ依頼するより早く、コストも抑えられるため、トークンの節約にもなります。