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 기반)

설치

의존성

npm install

빌드

npm run build

Claude Code 설정

1. .mcp.json 파일 생성

프로젝트 루트 또는 ~/.claude/ 디렉토리에 .mcp.json 파일을 생성합니다:

{
  "mcpServers": {
    "svg-canvas": {
      "command": "node",
      "args": ["/path/to/svg-canvas-mcp/build/index.js"]
    }
  }
}

2. 활성화

~/.claude/settings.local.json에서 활성화:

{
  "enabledMcpjsonServers": ["svg-canvas"]
}

사용 예시

기본 캔버스 생성

SVG 캔버스 MCP를 사용해서 1200x630 크기의 썸네일을 만들어줘

도형 그리기

빨간색 원과 파란색 사각형을 그려줘

그라디언트 적용

배경에 보라색에서 파란색으로 가는 그라디언트를 적용해줘

애니메이션 추가

로고에 회전 애니메이션을 추가해줘

도구 목록

캔버스

도형 그리기

패스 빌더

레이어

객체 조작

스타일

애니메이션

심볼 & 템플릿

히스토리

내보내기

AI 기능

OG 이미지 프리셋

지원 플랫폼: og, naver_blog, naver_search, twitter, youtube, instagram, instagram_story, tistory, pinterest, linkedin

지원 테마: modern, dark, gradient_blue, gradient_sunset, minimal, nature

차트

다이어그램

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 watch

라이선스

MIT License