MCP SVG动画工具
用于创建动画SVG图的MCP服务器。 您可以根据文本输入、草图照片和YAML规范创建图表。
你通常不需要使用YAML；只要告诉克劳德你想要什么，上传草图的照片， 然后迭代，直到你得到你想要的东西。
您可以在上看到一些示例输入和输出 演示页
文件输出配置
默认情况下，MCP服务器不允许将文件写入文件系统。要启用文件输出（SVG、PNG或视频），请在以下位置创建配置文件 ~/.config/mcp-svg-animator/config.yaml:
file_output:
allowed:
- path: "~/diagrams"
types: [svg, png, webm]
- path: "/tmp/svg-animator/**"
types: [svg, png]
- path: "~/projects/**/output"
types: [svg, png, webm]配置选项：
path：可以写入文件的目录。支持~扩展和全球模式(*对于单层，**用于递归）。types：允许的文件类型列表(svg,png,webm).
允许路径的子目录中的文件也是允许的。
特性
- 创建并迭代您的需求 使用自然语言和/或粗略的图表
- 多种形状类型 -圆形、矩形、直线、文本、路径、椭圆、组
- 连接元件 -通过自动定位在元素中心之间绘制线条
- 文本背景 -在文本标签后面自动生成背景面板
- 路径段 -使用move_to、line_to、cubic_bezier、quadratic_bezier和arc构建曲线
- SMIL动画 -为属性和变换设置动画
- 可重用定义 -定义一次，使用多次
- 库导入 -跨图表共享定义
- 相对定位 -参考其他要素的立场
- 直接文件输出 -将SVG直接写入文件，减少令牌使用
- PNG导出 -生成静态图表的PNG预览
- 视频导出 -将动画录制到.webm视频
安装
pip install mcp-svg-animator
# Install Playwright browsers (for video generation)
playwright install chromium使用Claude代码
全局注册MCP服务器：
claude mcp add --scope user svg-animator -- python -m mcp_svg_animator然后在任何克劳德代码会话中， 让Claude代码创建动画:
“创建一个红色圆圈的动态SVG，该圆圈会跳动”
看 docs/usage.md 了解更多详情。
MCP工具
您不需要显式调用这些。请Claude Code创建您描述的动画， 它将调用相关工具。
| 工具 | 说明 |
|---|---|
create_svg_from_yaml | 根据YAML规范生成SVG。可选的 output_path 将SVG写入文件；可选的 png_path 生成PNG预览。 |
create_animation_video | 将SVG动画录制到.webm视频 |
发展
# Clone the repository
git clone https://github.com/romilly/mcp-svg-animator.git
cd mcp-svg-animator
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
pip install -r requirements-test.txt
# Install Playwright browsers (for video generation)
playwright install chromium
# Run tests
pytest
# Type checking
pyright src/例子
请参阅 examples/ 示例YAML文件和生成的SVG的目录：
demo.yaml-基本形状stick_figure.yaml-静态棒状图stick_figure_waving.yaml-动态挥手curves.yaml-贝塞尔曲线和圆弧meeting.yaml-两个人，一个走路去见另一个connection_demo.svg-使用连接元素的架构图balloon_friends.svg-带有拉伸线的动画人物
致谢
此项目使用以下开源包：
许可证
麻省理工学院