SVG Canvas MCP MCP Server

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

차트