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 Science / 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 전용 svg_commit 포함)을 전달합니다.

Claude Science에 설치

dist-plugin/ 또는 zip을 Claude 플러그인으로 로드(Motif for Claude Science와 동일한 디렉터리 레이아웃). 로컬 MCP를 승인한 후 호출:

• svg_open_editor — live App 열기

• svg_create_artifact — 독립 HTML 폴백

도구

선택기: #id, [data-se-id="e12"], text:精确, text:~部分, 간단한 CSS.

보안 경계

• <script>, foreignObject, 이벤트 속성, javascript: URL 제거

• UI는 스크립트 전용, 불투명 origin의 iframe에서 실행되며 CSP가 외부 네트워크를 허용하지 않음

• 단일 도형 상한 2 MB