AI导哈

SVG动画生成工具

MCP SVG Animator是一个基于文本输入、草图照片和YAML规范创建动画SVG图表的服务器工具，适用于快速原型设计和动态图表生成。

  • by romilly
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 romilly/mcp-svg-animator

使用说明

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 -带有拉伸线的动画人物

致谢

此项目使用以下开源包：

许可证

麻省理工学院

相关 MCP