SVG Editor

Wisp Science と Claude Science 向けの SVG 図編集 MCP App。

中核機能：会話の中で科学図の SVG を開き、手で直接編集（クリックで選択、ドラッグ、色・テキスト・フォントの変更）をするか、口述 / 入力（ホストアシスタントに送信、またはその場で簡単な指示を実行）することができます。

Motif / Ketcher と同じ規約でパッケージングされています。

• .claude-plugin/plugin.json + .mcp.json + skills/*/SKILL.md

• プリパッケージ済みの stdio MCP（インストール時に npm install は実行しない）

• ui://svg-editor/editor.html（text/html;profile=mcp-app）

• ホスト側で live App を立ち上げない場合は、svg_create_artifact でスタンドアロン HTML にフォールバック

動作のしくみ

1. アシスタントが svg_open_editor を呼び出します（SVG のテキストを渡すこともできます）。Wisp / Claude Science は中央パネルにエディタを開きます。

2. キャンバス上でクリックして選択し、属性を変更します。選択状態は ui/update-model-context 経由で次のターンに引き継がれます。

3. 下部のコマンドバー：

   • その場で実行：ローカル構文（タイトル変更、色変更、凡例を隠す、フォントサイズ、パン）

   • アシスタントに送信：ui/message で送信し、モデルが svg_inspect + svg_apply で外科的な変更を行う

4. 図全体を再描画しないでください。パスとデータのジオメトリはデフォルトで元のまま維持されます。

Related MCP server: imagetosvg-mcp

開発

Node.js 20.19+ が必要です（推奨は 22+）。

npm install
npm test
npm run preview    # 浏览器里单独预览编辑器
npm run build      # UI + server + dist-plugin zip
node dist/svg-editor-mcp.mjs   # stdio MCP

Wisp Science へのインストール

1. npm run build

2. 設定 → プラグイン → プラグインをインストール を開き、svg-editor-for-claude-science.zip を選択します

3. リモートインストールでは svg-editor-for-claude-science.checksums.json の SHA-256 を使用します

4. 現在のプロジェクトでプラグインを有効にし、新しいセッションで使用 をクリックします

Wisp は MCP App を中央タブとして開き、App が元の MCP 接続にバインドされたまま tools/call（app-only の svg_commit を含む）を転送します。

Claude Science へのインストール

dist-plugin/ または zip を Claude plugin として読み込みます（Motif for Claude Code と同じディレクトリ構成）。ローカル MCP を承認してから、次を呼び出します：

• svg_open_editor — live App

• svg_create_artifact — スタンドアロン HTML へのフォールバック

ツール

セレクター：#id、[data-se-id="e12"]、text:精确、text:~部分、単純な CSS。

安全上の境界

• <script>、foreignObject、イベント属性、javascript: URL を除去します

• UI は、スクリプトのみの不透明なオリジンを持つ iframe 内で実行されます。CSP は外部ネットワークを許可しません

• 1 枚あたりの上限は 2 MB です