SVGator MCP
公式AIアシスタントからSVGatorアニメーション（SVG、Lottie、GIF、動画）を作成、編集、エクスポートでき、いつでもエディターで開ける編集可能なプロジェクトを保持できます。
SVGator MCPで何ができますか？
- SVGatorプロジェクトの閲覧と検索 —
list_projectsはエディタのディープリンク付きで最新順にプロジェクトを返し、get_projectはキャンバスサイズ、タイムライン、エクスポート設定を取得します。 - 大量データを伴わずにプロジェクト構造を検査 —
get_skeletonはキーフレーム数のみを含む要素ツリーを返し、read_partは特定のパスで正確な値を読み取ります。 - プロジェクトを段階的に編集 —
edit_partはパスに対して検証済みの更新、挿入、移動、削除のいずれかを適用し、永続化します。 - プロジェクト全体の作成、複製、移動、置換 —
create_project、replace_project、duplicate_project、move_projectがプロジェクト全体の操作を処理します。 - 再利用可能なアセットとフォルダの管理 —
list_assets、create_asset、update_asset、list_folders、create_folder、update_folderがライブラリを整理します。 - 配布可能な形式へのエクスポート —
export_projectはアニメーションSVG、Lottie、React Native、Flutter、動画、GIFを出力し、get_renderがラスターダウンロードをポーリングします。
ドキュメント
SVGator MCP サーバー — ドキュメント
このMCPサーバーは、あなたのAIアシスタントをオンラインSVGアニメーションツールであるSVGatorに直接接続します。 そこから、アシスタントはあなたのプロジェクト内で参照、検査、編集、作成、エクスポートを行い、 「このブランドキットに従って色を編集して」といった簡単なものから、 「アニメーションロゴの表示を作成し、CSSのみのファイルとしてエクスポートして」といった完全なものまで、あらゆる処理を実行します。
- エンドポイント:
https://mcp.svgator.com/mcp - プロトコル: ストリーミング可能なHTTP経由のモデルコンテキストプロトコル
- 認証: 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— 完全なプロジェクトJSONから、認証されたユーザーが所有する新しいSVGatorプロジェクトを作成します。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}）ペイロードを含む単一のアセットを取得します。create_asset— アセットドキュメントから新しい再利用可能なアセットを作成します。update_asset— 既存のアセットのドキュメント全体を置き換えます。
フォルダ
list_folders— 認証されたユーザーのフォルダ（プロジェクトが分類されるラベル）を一覧表示します。get_folder— IDで単一のフォルダ（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クライアントは、エンドポイントに直接接続します。
仕組み（概要）
このサーバーはリモートMCPサーバーです。MCPクライアント（Claude、またはストリーミング可能なHTTPを話す任意のクライアント）がhttps://mcp.svgator.com/mcpに接続し、SVGatorの通常のOAuthログインを通じてサインインします。SVGatorの認証情報はサーバー側のみに保持され、AIモデルがアクセストークンや秘密鍵を認識することはありません。ツールの結果（プロジェクトリスト、構造マップ、エクスポートされたファイル）のみを受け取ります。ツール入力は公開されたスキーマに対して検証され、無効なリクエストはアシスタントが読み取って修正できる説明的なエラーを返します。
⚙️ 機能
MCPサーバーは、SVGatorを平易な言葉で操作できるものに変えます。エディターをクリックする代わりに、何をしたいかを説明するだけで、AIアシスタントがプロジェクトを表示したり、色を変更したり、ロゴをアニメーション化したり、完成したファイルをエクスポートしたりします。
アニメーションの反復的な部分をアシスタントに処理させたいデザイナー、小さな変更のためにデザイナーを待つことなくWeb対応のアニメーションを必要とするマーケティングチーム、製品に直接組み込める本番環境対応のエクスポート（Lottie、React Native、Flutter、またはSVG）を求める開発者向けに構築されています。すべてのプロジェクトには直接エディターリンクが付属しているため、いつでも開いて手動で仕上げることができ、トークンを節約できます。
接続されると、アシスタントができることは次のとおりです。
🗂️ プロジェクトとアセット
- プロジェクトの一覧表示：新しい順、それぞれに直接エディターリンク付き
- 大規模なライブラリの検索とページ送り
- プロジェクト設定の読み取り：キャンバスサイズ、背景、タイムライン、エクスポート設定
- 完全な定義からプロジェクトを作成
- 既存のプロジェクトを上書き
- プロジェクトの複製：同じフォルダまたは別のフォルダに
- プロジェクトの移動または名前変更
- プロジェクトをフォルダに整理
- 再利用可能なアセットの管理：一覧表示、読み取り、作成、更新
🔍 構造と検査
- プロジェクトの構造をマッピング：キーフレーム数を含む要素ツリー。大量のデータは含まれません
- アニメーション化されているものを確認：各要素でキーフレームを保持しているチャンネル
- 正確な値を読み取る：任意のプロパティ、キーフレーム、または要素
- オーサリング形状の検索：任意の要素または概念の正確なJSON
🔷 形状と要素
- 長方形
- 円と楕円
- 線、ポリライン、ポリゴン
- カスタムパス
- テキストと複数行テキスト
- 画像
- 再利用されたシンボルとインスタンス
- グループ
- マスクとクリップパス
🎨 塗り、線、色
- 単色塗り：静的またはアニメーション
- グラデーション塗り
- 線：単色またはグラデーション、静的またはアニメーション
- 合成：ブレンドモードと不透明度
- ぼかしなどのフィルター効果
🎞️ アニメーションとキーフレーム
- 特定の時間に値を持つキーフレームを追加
- モーションが不要な場所に静的な値を設定
- キーフレームの読み取り、検査、削除
- キーフレームごとのイージングを設定：3次ベジェ
- トランスフォームのアニメーション化：位置、回転、スケール、傾斜
- 塗り、線、合成、フィルターチャンネルのアニメーション化
- ある形状から別の形状へのモーフィング
📤 エクスポートと配信
- アニメーションSVGのエクスポート：JavaScriptまたはCSS駆動
- 開始トリガーの設定：ロード、ホバー、クリック、スクロール、またはプログラムによるもの
- クリックおよびホバー動作の設定：フリーズ、再起動、逆再生、またはリセット
- Lottieへのエクスポート
- React NativeまたはFlutterソースへのエクスポート
- ビデオのレンダリング：MP4、MOV、AVI、MKV、またはWebM
- GIF、WebP、PNGシーケンス、またはZIPのレンダリング
- ループの制御：反復回数、方向、ピンポン、速度
- フレームレート、解像度、品質の設定
- 透明度と背景色の処理
✅ ベストプラクティス
SVGatorモーションデザインスキルをインストールし、名前で呼び出します。 これは、アシスタントが平坦で一般的なモーションではなく、タイミング、イージング、個性について意図的な選択を行うのに役立つクラフトガイダンスです。SVGatorスキルリポジトリからダウンロードし、「SVGatorモーションスキルを使用してこのロゴをアニメーション化して」のような言葉でプロンプトの冒頭でトリガーします。手動で呼び出すのには理由があります。エクスポートのみを行う場合や小さな編集を行う場合にスキルがトークン使用量に含まれず、追加のアートディレクションが本当に必要な場合にのみ読み込まれるようにするためです。
独自のアートワークから始めて、アニメーション化します。 ゼロからオリジナルの形状を生成することは、どのAIアシスタントでも最も正しく行うのが難しいことです。最良の結果を得るには、まずSVGatorのエディターでSVGを構築または取り込み、次にアシスタントにアニメーション化を依頼します。これにより、ビジュアルスタイルの一貫性が保たれ、AIはモーション、タイミング、シーケンス処理という最も得意とする分野に集中できます。
プロンプトを出す前に要素に名前を付けます。 アシスタントはプロジェクトの構造を理解するために要素名を読み取ります。「left_arm」、「bg_circle」、「headline」のような明確な名前は、適切な要素をターゲットにし、ミスを避け、複雑なシーン全体で整理された状態を保つのに役立ちます。一般的な名前は作業を難しくし、モデルによってはより多くのトークンを消費する可能性があります。
複雑なアニメーションをステップに分割します。 「完全なオンボーディングアニメーションを作成して」ではなく、要素の作成、キーフレームの追加、タイミングの調整というように、一度に1つのピースずつ進めます。サーバーは編集ごとに1つの検証済みの変更を適用するため、小さなステップでより細かく制御でき、間違いがあっても簡単に見つけて修正できます。
タイミングと感触を具体的に指定します。 「スムーズなフェード」はやや曖昧です。「イーズアウトを使用した400msのフェードイン」は、アシスタントに具体的な作業対象を与えます。スナッピー、バウンシー、スロー、サトルなど、感触を説明すればするほど、最初の結果が思い描いていたものに近づきます。
エクスポート形式を、それが使用される場所に合わせます。 SVGはWebに適した選択肢であり、JavaScriptまたはCSSのみ（パフォーマンスがさらに向上）を選択できます。Lottie、React Native、Flutterは、アプリやモバイルプロジェクトにクリーンに引き渡せます。ビデオとGIFは、アニメーションSVGが再生されないソーシャルメディアやメールに対応しています。事前に形式を選択することで、再エクスポートの手間を省けます。
大規模な実験の前にプロジェクトを複製します。 AIに何かをゼロから再構築してもらいたい場合は、最初にプロジェクトの複製を依頼し、そのコピーに対して変更を加えます。元のプロジェクトはそのまま残るため、大胆な実験によって動作バージョンが失われることはありません。 エディターで仕上げる: すべてのプロジェクトには、エディターへの直接リンクが付属します。アシスタントが大部分を仕上げたら、プロジェクトを開いて最終的な磨き上げを手作業で行います。AIが重労働を担い、細部のコントロールはあなたが維持します。手作業による小さな調整は、アシスタントに一つひとつ依頼するよりも迅速でコストも抑えられるため、トークンの節約にもなります。