Skip to main content
Glama
kim62210

SVG Canvas MCP

by kim62210
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

SVG Canvas MCP

Claude Code에서 포토샵 수준의 SVG 그래픽을 생성할 수 있는 MCP(Model Context Protocol) 서버입니다.

주요 기능

  • 캔버스 관리: 생성, 열기, 저장, 리사이즈

  • 도형 그리기: 사각형, 원, 타원, 선, 다각형, 별, 하트, 둥근 모서리 사각형

  • 패스 빌더: 베지어 곡선, 호(arc), 직선을 조합한 복잡한 경로 생성

  • 텍스트/이미지: 다양한 스타일의 텍스트, 이미지 삽입

  • 레이어 시스템: 레이어 생성, 삭제, 순서 변경, 가시성, 잠금, 블렌드 모드

  • 객체 조작: 이동, 회전, 스케일, 복제, 그룹화, Z-순서

  • 스타일링: 채우기, 선, 그라디언트(선형/원형), 패턴, 필터(블러, 그림자 등)

  • 애니메이션: CSS 키프레임, SMIL 애니메이션 지원

  • 심볼: 재사용 가능한 심볼 정의 및 인스턴스 배치

  • 템플릿: 캔버스를 템플릿으로 저장/불러오기

  • 히스토리: Undo/Redo 지원

  • 내보내기: SVG, PNG, Data URI

  • AI 기능: 색상 팔레트 추천, 색상 분석, 객체 정렬 제안, 레이아웃 추천

설치

의존성

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

스키마 검증

빌드

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 크기의 썸네일을 만들어줘

도형 그리기

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

그라디언트 적용

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

애니메이션 추가

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

도구 목록

캔버스

도구

설명

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

레이아웃 추천

프로젝트 구조

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 기능 │ ├── 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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

Resources

Tools

View all tools

New MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kim62210/svg-canvas-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server