AI导哈

SVG画布服务器

一个提供持久化SVG画布的MCP服务器，支持通过简单工具调用进行绘制，并可将画布导出为PNG或SVG格式。

  • by datakurre
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 datakurre/svg-mcp

使用说明

svg mcp

一个MCP服务器，它提供了一个持久的SVG画布，您可以通过简单的工具调用进行绘制。每个工具都会将当前画布返回为PNG图像，这样您就可以在每个步骤后直观地检查进度。

特性

  • 持久内存画布——元素在工具调用中累积
  • 用于矩形、圆形、椭圆形、直线、折线、多边形、路径和文本的形状工具
  • draw_raw_svg 任意SVG片段的转义阴影
  • add_def 用于渐变、图案、剪辑路径和过滤器
  • 导出到 可缩放矢量图形 或 便携式网络图形 （具有可配置的分辨率比例）
  • 每个工具都将当前画布作为PNG预览返回

需求

  • Python≥3.14
  • 开罗 系统库（由使用 cairosvg 用于PNG渲染）

在Ubuntu/Debian上：

sudo apt install libcairo2

在macOS（Homebrew）上：

brew install cairo

Python依赖关系：

pip install cairosvg "mcp[cli]"

运行服务器

服务器通过以下方式进行通信 标准 （标准MCP传输）：

python main.py

MCP客户端配置

使用Nix（推荐）

如果你有 尼克斯 已安装，不需要本地签出。使用 nix run 命令--Nix将自动获取、构建和缓存所有内容。

克劳德桌面(claude_desktop_config.json)

{
  "mcpServers": {
    "svg-mcp": {
      "command": "nix",
      "args": ["run", "github:datakurre/svg-mcp"]
    }
  }
}

VS代码(settings.json)

{
  "mcp": {
    "servers": {
      "svg-mcp": {
        "type": "stdio",
        "command": "nix",
        "args": ["run", "github:datakurre/svg-mcp"]
      }
    }
  }
}

没有Nix（本地Python）

克劳德桌面(claude_desktop_config.json)

{
  "mcpServers": {
    "svg-mcp": {
      "command": "python",
      "args": ["/path/to/svg-mcp/main.py"]
    }
  }
}

VS代码(settings.json)

{
  "mcp": {
    "servers": {
      "svg-mcp": {
        "type": "stdio",
        "command": "python",
        "args": ["/path/to/svg-mcp/main.py"]
      }
    }
  }
}

替换 /path/to/svg-mcp/main.py 机器上的绝对路径。

工具参考

画布管理

工具 说明
create_canvas(width, height, background) 创建或重置画布。默认值：800×600，白色背景。
resize_canvas(width, height, background) 调整画布大小而不清除元素。背景是可选的。
clear_canvas() 删除所有元素（和defs），保留大小和背景。
get_canvas() 返回当前画布的PNG预览，不做任何更改。
get_svg_source() 返回当前画布的原始SVG源代码。
list_elements() 按z顺序列出所有元素ID（底部→ top).
get_element(element_id) 返回单个元素的原始SVG片段。
remove_element(element_id) 按ID删除单个元素
update_element(element_id, svg_fragment) 替换元素的SVG，保留其z位置。

Z顺序

工具 说明
bring_forward(element_id) 向顶部移动一步（稍后渲染=在前面）。
send_backward(element_id) 向底部移动一步（之前渲染=后面渲染）。
bring_to_front(element_id) 移动到堆栈的最顶部。
send_to_back(element_id) 移动到堆栈的最底部。

撤消/恢复

工具 说明
undo() 撤消上次画布更改（最多50步）。
redo() 重新应用上次撤消的更改。

绘图

工具 关键参数
draw_rect x, y, width, height, rx, ry, fill, stroke, stroke_width, stroke_dasharray, opacity, rotation
draw_circle cx, cy, r, fill, stroke, stroke_width, stroke_dasharray, opacity
draw_ellipse cx, cy, rx, ry, fill, stroke, stroke_width, stroke_dasharray, opacity, rotation
draw_line x1, y1, x2, y2, stroke, stroke_width, stroke_dasharray, opacity, stroke_linecap
draw_polyline points （例如。 "0,0 50,50 100,0")，填充，笔划，stroke_dasharray
draw_polygon points （闭合形状）、填充、笔划、stroke_dasharray、
draw_path d （SVG路径数据）、填充、笔划、stroke_dasharray、
draw_text x, y, text, font_size, font_family, fill, text_anchor, font_weight, rotation
draw_image x, y, width, height, href （URL或数据URI）
draw_group children （原始SVG字符串）， transform （例如。 "translate(100,50) rotate(45)"), opacity
draw_raw_svg svg_fragment --任何有效的SVG字符串，例如。 <use>, <symbol>，过滤器

所有绘图工具都接受可选 element_id 参数。如果省略，则会自动生成一个唯一的ID。

stroke_dasharray 接受任何SVG破折号模式，例如。 "5,3" （5px破折号，3px间隙）或 "10,5,2,5" （长短交替）。

定义

工具 说明
add_def(def_fragment) 添加a <defs> 子对象，如渐变、图案或剪辑路径。

示例——定义一个线性梯度并使用它：

add_def('<linearGradient id="sky"><stop offset="0%" stop-color="#87ceeb"/><stop offset="100%" stop-color="#fff"/></linearGradient>')
draw_rect(x=0, y=0, width=800, height=600, fill="url(#sky)")

出口

工具 说明
export_svg(file_path) 将画布写入 .svg 文件。
export_png(file_path, scale) 将画布写为 .png 文件。 scale=2.0 分辨率加倍。

示例会话

create_canvas(width=600, height=400, background="#1a1a2e")
draw_circle(cx=300, cy=200, r=120, fill="#e94560", stroke="white", stroke_width=3)
draw_text(x=300, y=210, text="Hello!", font_size=48, fill="white", text_anchor="middle")
export_png("output/hello.png", scale=2.0)

坐标系

SVG使用 左上原点 y向下增加。所有单位都是相对于中设置的画布尺寸的像素 create_canvas.

相关 MCP