# SVG Canvas MCP
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 기반)
## 설치
### 의존성
```bash
npm install
```
| 패키지 | 버전 | 용도 |
|--------|------|------|
| `@modelcontextprotocol/sdk` | ^1.0.0 | MCP 프로토콜 SDK |
| `@anthropic-ai/sdk` | ^0.39.0 | Anthropic API (AI 기능) |
| `svgson` | ^5.3.1 | SVG 파싱/직렬화 |
| `svg-path-commander` | ^2.0.8 | SVG 패스 조작 |
| `uuid` | ^10.0.0 | 고유 ID 생성 |
| `zod` | ^3.23.0 | 스키마 검증 |
| `potrace` | ^2.1.8 | 이미지 트레이싱 (비트맵→벡터) |
### 빌드
```bash
npm run build
```
## Claude Code 설정
### 1. `.mcp.json` 파일 생성
프로젝트 루트 또는 `~/.claude/` 디렉토리에 `.mcp.json` 파일을 생성합니다:
```json
{
"mcpServers": {
"svg-canvas": {
"command": "node",
"args": ["/path/to/svg-canvas-mcp/build/index.js"]
}
}
}
```
### 2. 활성화
`~/.claude/settings.local.json`에서 활성화:
```json
{
"enabledMcpjsonServers": ["svg-canvas"]
}
```
## 사용 예시
### 기본 캔버스 생성
```
SVG 캔버스 MCP를 사용해서 1200x630 크기의 썸네일을 만들어줘
```
### 도형 그리기
```
빨간색 원과 파란색 사각형을 그려줘
```
### 그라디언트 적용
```
배경에 보라색에서 파란색으로 가는 그라디언트를 적용해줘
```
### 애니메이션 추가
```
로고에 회전 애니메이션을 추가해줘
```
## 도구 목록
### 캔버스
| 도구 | 설명 |
|------|------|
| `svg_create` | 새 캔버스 생성 |
| `svg_open` | SVG 파일 열기 |
| `svg_save` | 파일로 저장 |
| `svg_info` | 캔버스 정보 조회 |
| `svg_resize` | 크기 변경 |
| `svg_set_background` | 배경색 설정 |
### 도형 그리기
| 도구 | 설명 |
|------|------|
| `draw_rect` | 사각형 |
| `draw_circle` | 원 |
| `draw_ellipse` | 타원 |
| `draw_line` | 직선 |
| `draw_polyline` | 연결선 |
| `draw_polygon` | 다각형 |
| `draw_text` | 텍스트 |
| `draw_image` | 이미지 |
| `draw_path` | SVG 패스 |
| `draw_regular_polygon` | 정다각형 |
| `draw_star` | 별 |
| `draw_heart` | 하트 |
| `draw_rounded_rect_path` | 둥근 모서리 사각형 |
### 패스 빌더
| 도구 | 설명 |
|------|------|
| `path_create` | 패스 시작 |
| `path_lineto` | 직선 추가 |
| `path_curveto` | 베지어 곡선 |
| `path_arcto` | 호(arc) 추가 |
| `path_close` | 패스 닫기 |
| `path_finish` | 패스 완료 |
| `path_cancel` | 패스 취소 |
### 레이어
| 도구 | 설명 |
|------|------|
| `layer_create` | 레이어 생성 |
| `layer_delete` | 레이어 삭제 |
| `layer_rename` | 이름 변경 |
| `layer_reorder` | 순서 변경 |
| `layer_visibility` | 표시/숨김 |
| `layer_lock` | 잠금 |
| `layer_opacity` | 불투명도 |
| `layer_blend_mode` | 블렌드 모드 |
| `layer_list` | 목록 조회 |
| `layer_select` | 레이어 선택 |
| `layer_merge` | 레이어 병합 |
| `layer_duplicate` | 레이어 복제 |
### 객체 조작
| 도구 | 설명 |
|------|------|
| `object_select` | 객체 선택 |
| `object_list` | 객체 목록 |
| `object_move` | 이동 |
| `object_scale` | 크기 조절 |
| `object_rotate` | 회전 |
| `object_delete` | 삭제 |
| `object_duplicate` | 복제 |
| `object_group` | 그룹화 |
| `object_ungroup` | 그룹 해제 |
| `object_order` | Z-순서 변경 |
### 스타일
| 도구 | 설명 |
|------|------|
| `style_fill` | 채우기 |
| `style_stroke` | 선 스타일 |
| `style_opacity` | 불투명도 |
| `style_gradient` | 그라디언트 정의 |
| `style_pattern` | 패턴 정의 |
| `style_filter` | 필터 적용 |
| `style_remove_filter` | 필터 제거 |
### 애니메이션
| 도구 | 설명 |
|------|------|
| `anim_css_add` | CSS 애니메이션 |
| `anim_smil_add` | SMIL 애니메이션 |
| `anim_remove` | 애니메이션 제거 |
| `anim_list` | 애니메이션 목록 |
### 심볼 & 템플릿
| 도구 | 설명 |
|------|------|
| `symbol_define` | 심볼 정의 |
| `symbol_use` | 심볼 사용 |
| `template_save` | 템플릿 저장 |
| `template_load` | 템플릿 불러오기 |
| `template_list` | 템플릿 목록 |
| `template_delete` | 템플릿 삭제 |
### 히스토리
| 도구 | 설명 |
|------|------|
| `history_undo` | 실행 취소 |
| `history_redo` | 다시 실행 |
| `history_list` | 히스토리 목록 |
| `history_goto` | 특정 시점으로 이동 |
| `history_clear` | 히스토리 삭제 |
### 내보내기
| 도구 | 설명 |
|------|------|
| `export_svg` | SVG 파일로 저장 |
| `export_code` | SVG 코드 반환 |
| `export_png` | PNG 파일로 저장 |
| `export_data_uri` | Data URI 변환 |
| `preview_browser` | 브라우저 미리보기 |
### AI 기능
| 도구 | 설명 |
|------|------|
| `ai_suggest_colors` | 색상 팔레트 추천 |
| `ai_analyze_colors` | 색상 분석 |
| `ai_align_objects` | 객체 정렬 제안 |
| `ai_suggest_layout` | 레이아웃 추천 |
### OG 이미지 프리셋
| 도구 | 설명 |
|------|------|
| `preset_list` | 사용 가능한 플랫폼/테마 목록 |
| `preset_create_og` | 플랫폼별 OG 이미지 생성 |
| `preset_create_thumbnail` | 간편 썸네일 생성 |
**지원 플랫폼**: og, naver_blog, naver_search, twitter, youtube, instagram, instagram_story, tistory, pinterest, linkedin
**지원 테마**: modern, dark, gradient_blue, gradient_sunset, minimal, nature
### 차트
| 도구 | 설명 |
|------|------|
| `chart_bar` | 막대 차트 |
| `chart_line` | 선 차트 |
| `chart_pie` | 파이 차트 |
| `chart_donut` | 도넛 차트 |
| `chart_3d_bar` | 3D 막대 차트 |
| `chart_3d_pie` | 3D 파이 차트 |
| `chart_3d_pyramid` | 3D 피라미드 차트 |
### 다이어그램
| 도구 | 설명 |
|------|------|
| `diagram_flowchart` | 플로우차트 |
| `diagram_mindmap` | 마인드맵 |
| `diagram_sequence` | 시퀀스 다이어그램 |
| `diagram_isometric` | 아이소메트릭 블록 다이어그램 |
| `diagram_3d_architecture` | 3D 인프라 아키텍처 |
### QR 코드
| 도구 | 설명 |
|------|------|
| `qrcode_generate` | QR 코드 생성 |
| `qrcode_batch` | 다량 QR 코드 생성 |
### 워터마크
| 도구 | 설명 |
|------|------|
| `watermark_text` | 텍스트 워터마크 |
| `watermark_image` | 이미지 워터마크 |
| `watermark_copyright` | 저작권 표시 |
| `watermark_diagonal` | 대각선 반복 워터마크 |
| `watermark_remove` | 워터마크 제거 |
### 이미지 트레이싱
| 도구 | 설명 |
|------|------|
| `trace_image` | 이미지를 벡터 패스로 변환 (흑백) |
| `trace_color` | 컬러 이미지를 다색 벡터로 변환 |
| `trace_outline` | 외곽선만 추출 |
| `trace_silhouette` | 실루엣(단색 형태) 추출 |
## 프로젝트 구조
```
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
```
## 개발
```bash
# 개발 모드 (빌드 + 실행)
npm run dev
# 빌드만
npm run build
# 감시 모드
npm run watch
```
## 라이선스
MIT License
