SVG Canvas MCP

SVG画布MCP

可以在Claude Code中创建Photoshop级别SVG图形的模型上下文协议（MCP）服务器。

主要功能

• 画布管理：创建、打开、保存、尺寸
• 绘制图形：矩形、圆、椭圆、直线、多边形、星星、心形、圆角矩形
• 路径生成器：创建由Bezier曲线、圆弧和直线组合而成的复杂路径
• 文本/图像：各种样式的文本，插入图像
• 层系统：层创建、删除、重新排序、可见性、锁定、混合模式
• 对象操作：移动、旋转、缩放、复制、分组、Z顺序
• 造型：填充、线条、渐变（线性/圆形）、图案、滤镜（模糊、阴影等）
• 动画：CSS关键帧，支持SMIL动画
• 元件：定义可重复使用的元件并放置实例
• 模板：将画布另存为模板/导入
• 历史记录：Undo/Redo支持
• 导出：SVG、PNG、数据类型
• AI功能：调色板推荐、颜色分析、对象排序建议、布局推荐
• 博客操作功能:

- OG图像预设（10个平台，6个主题） - 创建二维/三维图表（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、naverblog、naversearch、twitter、youtube、instagram、instagramstory、tistory、pinterest、linkedin

支持主题：现代、深色、渐变蓝、渐变未设置、极简、自然

图表

图表

二维码

水印

图像跟踪

项目结构

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许可证