SVG Canvas MCP is a Model Context Protocol server that enables Photoshop-level SVG graphic creation within Claude Code, offering comprehensive tools for vector graphics design.
Core Features:
Canvas Management: Create, open, save, resize (up to 10000x10000px), set backgrounds, and configure viewBox/aspect ratio properties
Drawing Tools: Basic shapes (rectangles, circles, ellipses, lines, polygons), advanced shapes (stars, hearts, rounded rectangles, regular polygons), text insertion, image embedding, and complex paths with Bézier curves and arcs via path builder
Layer System: Create, delete, rename, reorder, merge, and duplicate layers with visibility, lock, opacity, and blend mode controls
Object Manipulation: Select, move, scale, rotate, duplicate, delete, group/ungroup objects, and control Z-order
Styling & Effects: Apply fills, strokes (color, width, linecap, linejoin, dasharray), opacity, linear/radial gradients with color stops, patterns, and filters (blur, drop-shadow, brightness, grayscale)
Animation: Add CSS keyframe or SMIL animations with control over duration, delay, iteration, and direction
Symbols & Templates: Define reusable symbols, instantiate with custom styling, and save/load/search templates with categories and tags
History Management: Full undo/redo support (multi-step), view history, jump to specific states, and clear history
Export Options: Export as SVG (raw, pretty, or minified), PNG (with scale/background options), Data URI, or get SVG code; browser preview integration
AI-Powered Features:
Color palette suggestions (complementary, triadic, analogous)
Canvas color analysis
Smart object alignment (grid, circle, horizontal/vertical patterns)
Layout recommendations based on content type
Blog & Content Creation Tools:
OG Images: Generate platform-specific Open Graph images (10 platforms including Twitter, YouTube, Instagram; 6 themes)
Charts: Create 2D/3D bar, line, pie, donut, and pyramid charts
Diagrams: Generate flowcharts, mind maps, sequence diagrams, isometric diagrams, and 3D architecture diagrams
QR Codes: Generate pure SVG-based QR codes (single or batch)
Watermarks: Add text, image, copyright, or diagonal repeating pattern watermarks
Image Tracing: Convert bitmap images to vector paths (using potrace) with support for black & white, multi-color, outline, and silhouette extraction
Supports the creation and management of CSS keyframe animations to create dynamic and animated SVG elements.
Provides comprehensive tools for creating and manipulating professional-grade SVG graphics, including shape drawing, complex path building, layer management, and styling with filters and gradients.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@SVG Canvas MCP Create a 1200x630 thumbnail with a blue gradient background and a rotating star"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Claude Code에서 포토샵 수준의 SVG 그래픽을 생성할 수 있는 MCP(Model Context Protocol) 서버입니다.
캔버스 관리: 생성, 열기, 저장, 리사이즈
도형 그리기: 사각형, 원, 타원, 선, 다각형, 별, 하트, 둥근 모서리 사각형
패스 빌더: 베지어 곡선, 호(arc), 직선을 조합한 복잡한 경로 생성
텍스트/이미지: 다양한 스타일의 텍스트, 이미지 삽입
레이어 시스템: 레이어 생성, 삭제, 순서 변경, 가시성, 잠금, 블렌드 모드
객체 조작: 이동, 회전, 스케일, 복제, 그룹화, Z-순서
스타일링: 채우기, 선, 그라디언트(선형/원형), 패턴, 필터(블러, 그림자 등)
애니메이션: CSS 키프레임, SMIL 애니메이션 지원
심볼: 재사용 가능한 심볼 정의 및 인스턴스 배치
템플릿: 캔버스를 템플릿으로 저장/불러오기
히스토리: Undo/Redo 지원
내보내기: SVG, PNG, Data URI
AI 기능: 색상 팔레트 추천, 색상 분석, 객체 정렬 제안, 레이아웃 추천
블로그 운영 기능:
OG 이미지 프리셋 (10개 플랫폼, 6개 테마)
2D/3D 차트 생성 (bar, line, pie, donut, pyramid)
2D/3D 다이어그램 (flowchart, mindmap, sequence, isometric)
QR 코드 생성 (순수 SVG 기반)
워터마크 오버레이
이미지 트레이싱: 비트맵 이미지를 벡터 패스로 변환 (potrace 기반)
Related MCP server: icogenie-mcp
npm install패키지 | 버전 | 용도 |
| ^1.0.0 | MCP 프로토콜 SDK |
| ^0.39.0 | Anthropic API (AI 기능) |
| ^5.3.1 | SVG 파싱/직렬화 |
| ^2.0.8 | SVG 패스 조작 |
| ^10.0.0 | 고유 ID 생성 |
| ^3.23.0 | 스키마 검증 |
| ^2.1.8 | 이미지 트레이싱 (비트맵→벡터) |
npm run build.mcp.json 파일 생성프로젝트 루트 또는 ~/.claude/ 디렉토리에 .mcp.json 파일을 생성합니다:
{
"mcpServers": {
"svg-canvas": {
"command": "node",
"args": ["/path/to/svg-canvas-mcp/build/index.js"]
}
}
}~/.claude/settings.local.json에서 활성화:
{
"enabledMcpjsonServers": ["svg-canvas"]
}SVG 캔버스 MCP를 사용해서 1200x630 크기의 썸네일을 만들어줘빨간색 원과 파란색 사각형을 그려줘배경에 보라색에서 파란색으로 가는 그라디언트를 적용해줘로고에 회전 애니메이션을 추가해줘도구 | 설명 |
| 새 캔버스 생성 |
| SVG 파일 열기 |
| 파일로 저장 |
| 캔버스 정보 조회 |
| 크기 변경 |
| 배경색 설정 |
도구 | 설명 |
| 사각형 |
| 원 |
| 타원 |
| 직선 |
| 연결선 |
| 다각형 |
| 텍스트 |
| 이미지 |
| SVG 패스 |
| 정다각형 |
| 별 |
| 하트 |
| 둥근 모서리 사각형 |
도구 | 설명 |
| 패스 시작 |
| 직선 추가 |
| 베지어 곡선 |
| 호(arc) 추가 |
| 패스 닫기 |
| 패스 완료 |
| 패스 취소 |
도구 | 설명 |
| 레이어 생성 |
| 레이어 삭제 |
| 이름 변경 |
| 순서 변경 |
| 표시/숨김 |
| 잠금 |
| 불투명도 |
| 블렌드 모드 |
| 목록 조회 |
| 레이어 선택 |
| 레이어 병합 |
| 레이어 복제 |
도구 | 설명 |
| 객체 선택 |
| 객체 목록 |
| 이동 |
| 크기 조절 |
| 회전 |
| 삭제 |
| 복제 |
| 그룹화 |
| 그룹 해제 |
| Z-순서 변경 |
도구 | 설명 |
| 채우기 |
| 선 스타일 |
| 불투명도 |
| 그라디언트 정의 |
| 패턴 정의 |
| 필터 적용 |
| 필터 제거 |
도구 | 설명 |
| CSS 애니메이션 |
| SMIL 애니메이션 |
| 애니메이션 제거 |
| 애니메이션 목록 |
도구 | 설명 |
| 심볼 정의 |
| 심볼 사용 |
| 템플릿 저장 |
| 템플릿 불러오기 |
| 템플릿 목록 |
| 템플릿 삭제 |
도구 | 설명 |
| 실행 취소 |
| 다시 실행 |
| 히스토리 목록 |
| 특정 시점으로 이동 |
| 히스토리 삭제 |
도구 | 설명 |
| SVG 파일로 저장 |
| SVG 코드 반환 |
| PNG 파일로 저장 |
| Data URI 변환 |
| 브라우저 미리보기 |
도구 | 설명 |
| 색상 팔레트 추천 |
| 색상 분석 |
| 객체 정렬 제안 |
| 레이아웃 추천 |
도구 | 설명 |
| 사용 가능한 플랫폼/테마 목록 |
| 플랫폼별 OG 이미지 생성 |
| 간편 썸네일 생성 |
지원 플랫폼: og, naver_blog, naver_search, twitter, youtube, instagram, instagram_story, tistory, pinterest, linkedin
지원 테마: modern, dark, gradient_blue, gradient_sunset, minimal, nature
도구 | 설명 |
| 막대 차트 |
| 선 차트 |
| 파이 차트 |
| 도넛 차트 |
| 3D 막대 차트 |
| 3D 파이 차트 |
| 3D 피라미드 차트 |
도구 | 설명 |
| 플로우차트 |
| 마인드맵 |
| 시퀀스 다이어그램 |
| 아이소메트릭 블록 다이어그램 |
| 3D 인프라 아키텍처 |
도구 | 설명 |
| QR 코드 생성 |
| 다량 QR 코드 생성 |
도구 | 설명 |
| 텍스트 워터마크 |
| 이미지 워터마크 |
| 저작권 표시 |
| 대각선 반복 워터마크 |
| 워터마크 제거 |
도구 | 설명 |
| 이미지를 벡터 패스로 변환 (흑백) |
| 컬러 이미지를 다색 벡터로 변환 |
| 외곽선만 추출 |
| 실루엣(단색 형태) 추출 |
svg-canvas-mcp/
├── src/
│ ├── index.ts # 엔트리포인트
│ ├── server.ts # MCP 서버 설정
│ ├── core/ # 핵심 모듈
│ │ ├── document.ts # SVG 문서 관리
│ │ ├── element.ts # SVG 요소 조작
│ │ ├── history-manager.ts # Undo/Redo
│ │ ├── layer-manager.ts # 레이어 관리
│ │ └── template-manager.ts # 템플릿 관리
│ ├── tools/ # MCP 도구 정의
│ │ ├── canvas.ts # 캔버스 도구
│ │ ├── drawing.ts # 그리기 도구
│ │ ├── path.ts # 패스 빌더
│ │ ├── layer.ts # 레이어 도구
│ │ ├── object.ts # 객체 조작
│ │ ├── style.ts # 스타일링
│ │ ├── animation.ts # 애니메이션
│ │ ├── symbol.ts # 심볼
│ │ ├── history.ts # 히스토리
│ │ ├── export.ts # 내보내기
│ │ ├── ai.ts # AI 기능
│ │ ├── preset.ts # OG 이미지 프리셋
│ │ ├── chart.ts # 2D/3D 차트
│ │ ├── diagram.ts # 2D/3D 다이어그램
│ │ ├── qrcode.ts # QR 코드
│ │ ├── watermark.ts # 워터마크
│ │ └── trace.ts # 이미지 트레이싱
│ ├── types/ # TypeScript 타입
│ └── utils/ # 유틸리티
│ ├── color-utils.ts
│ ├── path-utils.ts
│ ├── svg-parser.ts
│ ├── transform-utils.ts
│ └── validation.ts
├── build/ # 빌드 출력
├── package.json
└── tsconfig.json# 개발 모드 (빌드 + 실행)
npm run dev
# 빌드만
npm run build
# 감시 모드
npm run watchMIT License
선택한 객체들의 정렬 방법을 제안합니다.
Inputs: objectIds (required), mode.
현재 캔버스에서 사용된 색상을 분석합니다.
Inputs: no named parameters.
기준 색상을 바탕으로 조화로운 색상 팔레트를 추천합니다.
Inputs: baseColor (required), harmony (required), includeShades.
캔버스 크기에 맞는 레이아웃을 제안합니다.
Inputs: contentType (required), elementCount.
객체에 CSS 애니메이션을 추가합니다.
Inputs: objectId (required), keyframes (required), duration (required), timingFunction, +4 more.
정의된 애니메이션 목록을 조회합니다.
Inputs: objectId.
객체의 애니메이션을 제거합니다.
Inputs: objectId (required), animId.
객체에 SMIL 애니메이션을 추가합니다. (SVG 내장 애니메이션)
Inputs: objectId (required), attributeName (required), dur (required), from, +8 more.
원을 그립니다.
Inputs: cx (required), cy (required), r (required), fill, +5 more.
타원을 그립니다.
Inputs: cx (required), cy (required), rx (required), ry (required), +6 more.
하트 모양을 그립니다.
Inputs: cx (required), cy (required), size (required), fill, +4 more.
이미지를 삽입합니다.
Inputs: href (required), x (required), y (required), width (required), +5 more.
직선을 그립니다.
Inputs: x1 (required), y1 (required), x2 (required), y2 (required), +5 more.
SVG 패스 데이터(d 속성)로 직접 경로를 그립니다.
Inputs: d (required), fill, stroke, strokeWidth, +3 more.
다각형을 그립니다.
Inputs: points (required), fill, stroke, strokeWidth, +3 more.
여러 점을 연결하는 선을 그립니다.
Inputs: points (required), stroke, strokeWidth, fill, +3 more.
사각형을 그립니다.
Inputs: x (required), y (required), width (required), height (required), +8 more.
정다각형을 그립니다.
Inputs: cx (required), cy (required), radius (required), sides (required), +6 more.
둥근 모서리 사각형을 패스로 그립니다 (모서리별 다른 반경 가능).
Inputs: x (required), y (required), width (required), height (required), +6 more.
별 모양을 그립니다.
Inputs: cx (required), cy (required), outerRadius (required), innerRadius (required), +7 more.
텍스트를 추가합니다.
Inputs: x (required), y (required), text (required), fontFamily, +10 more.
현재 캔버스의 SVG 코드를 반환합니다.
Inputs: format.
SVG를 Data URI 형식으로 변환합니다. (이미지 태그에 직접 사용 가능)
Inputs: encode.
PNG 파일로 내보냅니다. (참고: 현재는 SVG를 저장하고 별도 변환 도구 사용 권장)
Inputs: filePath (required), scale, background.
SVG 파일로 내보냅니다.
Inputs: filePath (required), minify.
모든 히스토리를 삭제합니다. (주의: 되돌릴 수 없음)
Inputs: no named parameters.
히스토리의 특정 시점으로 이동합니다.
Inputs: historyIndex (required).
작업 히스토리를 조회합니다.
Inputs: limit.
취소한 작업을 다시 실행합니다.
Inputs: steps.
마지막 작업을 취소합니다.
Inputs: steps.
레이어의 블렌드 모드를 설정합니다.
Inputs: layerId (required), blendMode (required).
새 레이어를 생성합니다.
Inputs: name, insertAt.
레이어를 삭제합니다.
Inputs: layerId (required).
레이어를 복제합니다.
Inputs: layerId (required).
모든 레이어 목록을 조회합니다.
Inputs: no named parameters.
레이어의 잠금 상태를 설정합니다.
Inputs: layerId (required), locked (required).
두 레이어를 병합합니다.
Inputs: sourceLayerId (required), targetLayerId (required).
레이어의 불투명도를 설정합니다.
Inputs: layerId (required), opacity (required).
레이어 이름을 변경합니다.
Inputs: layerId (required), newName (required).
레이어 순서를 변경합니다.
Inputs: layerId (required), newIndex (required).
활성 레이어를 선택합니다.
Inputs: layerId (required).
레이어의 표시/숨김 상태를 설정합니다.
Inputs: layerId (required), visible (required).
객체를 삭제합니다.
Inputs: objectId (required).
객체를 복제합니다.
Inputs: objectId (required), offsetX, offsetY.
여러 객체를 그룹으로 묶습니다.
Inputs: objectIds (required), groupId.
캔버스의 모든 객체 목록을 조회합니다.
Inputs: layerId.
객체를 이동합니다.
Inputs: objectId (required), dx (required), dy (required).
객체의 Z 순서를 변경합니다.
Inputs: objectId (required), direction (required).
객체를 회전합니다.
Inputs: objectId (required), angle (required), originX, originY.
객체 크기를 조절합니다.
Inputs: objectId (required), scaleX (required), scaleY, originX, +1 more.
객체를 ID로 선택하고 정보를 조회합니다.
Inputs: objectId (required).
그룹을 해제합니다.
Inputs: groupId (required).
현재 패스에 호(arc)를 추가합니다.
Inputs: rx (required), ry (required), x (required), y (required), +4 more.
현재 패스 빌더를 취소합니다.
Inputs: no named parameters.
현재 패스를 닫습니다 (시작점으로 연결).
Inputs: no named parameters.
새 패스 빌더를 시작합니다. path_lineto, path_curveto 등으로 경로를 추가한 후 path_finish로 완료합니다.
Inputs: startX (required), startY (required).
현재 패스에 베지어 곡선을 추가합니다.
Inputs: type (required), controlPoints (required), endX (required), endY (required), +1 more.
패스 빌더를 완료하고 SVG 요소로 추가합니다.
Inputs: fill, stroke, strokeWidth, opacity, +3 more.
현재 패스에 직선을 추가합니다.
Inputs: x (required), y (required), relative.
현재 캔버스를 브라우저에서 미리봅니다. (Playwright MCP 연동)
Inputs: openBrowser.
객체의 채우기를 설정합니다.
Inputs: objectId (required), fill (required).
객체에 필터를 적용합니다.
Inputs: objectId (required), filterType (required), params (required).
그라디언트를 정의합니다. fill에 url(#id)로 사용합니다.
Inputs: type (required), stops (required), id, x1, +8 more.
객체의 불투명도를 설정합니다.
Inputs: objectId (required), opacity (required).
패턴을 정의합니다.
Inputs: width (required), height (required), content (required), id.
객체에서 필터를 제거합니다.
Inputs: objectId (required).
객체의 선 스타일을 설정합니다.
Inputs: objectId (required), color, width, dasharray, +2 more.
새 SVG 캔버스를 생성합니다.
Inputs: width (required), height (required), viewBox, background, +1 more.
현재 캔버스의 정보를 조회합니다.
Inputs: no named parameters.
기존 SVG 파일을 엽니다.
Inputs: filePath (required).
캔버스 크기를 변경합니다.
Inputs: width (required), height (required), scaleContent.
현재 캔버스를 SVG 파일로 저장합니다.
Inputs: filePath.
캔버스 배경색을 설정합니다.
Inputs: color.
객체를 재사용 가능한 심볼로 정의합니다.
Inputs: objectId (required), symbolId, viewBox.
정의된 심볼을 배치합니다.
Inputs: symbolId (required), x (required), y (required), width, +3 more.
저장된 템플릿을 삭제합니다.
Inputs: templateId (required).
저장된 템플릿 목록을 조회합니다.
Inputs: category, tags, search.
저장된 템플릿을 불러옵니다.
Inputs: templateName (required).
현재 캔버스를 템플릿으로 저장합니다.
Inputs: name (required), description, tags, category.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 79 tools
Most tools have distinct purposes with clear boundaries, such as draw_circle vs. draw_rect or layer_create vs. layer_delete. However, some overlap exists in AI suggestion tools (e.g., ai_align_objects and ai_suggest_layout might be confused for layout-related tasks), and path creation tools (path_create, path_lineto, etc.) could be ambiguous without careful reading of descriptions.
Tool names follow a highly consistent snake_case pattern with clear verb_noun or category_verb_noun structures throughout, such as draw_circle, layer_create, and export_png. All tools adhere to this convention, making them predictable and easy to parse for agents.
With 79 tools, the count is excessive for a single server, likely overwhelming for agents and leading to confusion or inefficiency. While SVG editing is a broad domain, this many tools suggests over-fragmentation, such as separate tools for each shape type or path command, rather than consolidation.
The tool set provides comprehensive coverage for SVG canvas operations, including drawing, styling, layering, animation, export, history, and templates. It supports full CRUD/lifecycle management for objects, layers, and symbols, with no obvious gaps in core functionality for the domain.
The Canva MCP server connects AI assistants (like Claude, ChatGPT, and Cursor) to Canva's API, enabling them to create and manage designs directly within chat conversations. Key capabilities include generating new designs from prompts, autofilling templates, searching and resizing existing designs, importing files from URLs, exporting designs as PDFs or images, and managing folders and comments without switching between tools.
Create professional SVG artwork, icons and vector logos from a prompt, or vectorize any image.
Hosted MCP server for AI photo editing: nothing to install, no desktop photo editor needed.
Generate images from Claude, ChatGPT, Cursor and Codex with 12 top AI image models and 10 tools: up to 4 images per call, SVG vectorization, editing and more. Remote MCP with OAuth, no API keys. Pay per image, no subscription.
