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）
安装
依赖性
| 包 |
版本 |
用途 |
@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图像跟踪（位图→矢量） |
|
|
构建
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 添加圆弧 |
|
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 |
数据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、naverblog、naversearch、twitter、youtube、instagram、instagramstory、tistory、pinterest、linkedin
支持主题：现代、深色、渐变蓝、渐变未设置、极简、自然
图表
| 工具 |
说明 |
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基础架构体系结构 |
二维码
| 工具 |
说明 |
qrcode_generate |
生成二维码 |
qrcode_batch 生成大量二维码 |
|
水印
| 工具 |
说明 |
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
开发
# 개발 모드 (빌드 + 실행)
npm run dev
# 빌드만
npm run build
# 감시 모드
npm run watch
许可证
MIT许可证
