SVGator

SVGator MCP Server — 文档

该 MCP 服务可将你的 AI 助手直接连接到 SVGator，这款在线 SVG 动画工具。 连接后，助手可以在你的项目中为你浏览、检查、编辑、创建和导出内容， 从简单的“根据这份品牌指南修改颜色”，到完整的“为我制作一个动画 Logo 揭幕效果，并将其导出为仅使用 CSS 的文件”，都能处理。

• Endpoint： https://mcp.svgator.com/mcp
• Protocol： 通过 Streamable HTTP 使用 Model Context Protocol
• Authentication： OAuth 2.1（使用你的 SVGator 账号登录 — 请参阅 入门指南）

你可以做什么

能力	工具	提示词示例
浏览你的项目	list_projects、get_project、get_profile	“列出我的 SVGator 项目”
检查项目结构	get_skeleton、read_part	“项目 X 中有哪些元素？哪些元素带有动画？”
增量编辑项目	edit_part	“把圆形改成红色，并让它的弹跳无限循环”
创建或替换整个项目	create_project、replace_project	“为我制作一个新的动画加载转圈图标”
复制、移动和重命名项目	duplicate_project、move_project	“把项目 X 复制到我的 ‘Drafts’ 文件夹”
管理可重复使用的资源	list_assets、get_asset、create_asset、update_asset	“把这个图标保存为可重复使用的资源”
将项目整理到文件夹中	list_folders、get_folder、create_folder、update_folder	“创建一个 ‘Marketing’ 文件夹，并把这个项目放进去”
查询创作参考资料	describe_shape	（助手用于获取准确的 JSON 形状定义）
导出为交付格式	export_project、get_render	“将项目 X 导出为 MP4 视频”
获取动态图形设计指导	skill 资源 + 提示词	“为 Logo 揭幕效果制定艺术指导，然后制作出来”

服务返回的每个项目都包含一个 editor_url，这是一个深层链接，可在 SVGator 编辑器中打开该项目， 因此你可以随时从助手上次停下的地方继续手动操作。

工具

该服务提供 22 个工具。完整的参数和输出表格请参阅 工具参考。

项目

• list_projects — 按创建时间从新到旧列出已认证用户的 SVGator 项目，每行提供一个 editor_url 深层链接，并提供总数以供分页。
• get_project — 获取单个项目的摘要：标题、预览、文件夹、时间戳、画布尺寸、背景颜色、动画时间轴和已保存的导出设置。
• create_project — 根据完整的项目 JSON 创建一个由已认证用户拥有的 SVGator 项目。
• replace_project — 使用提供的完整项目 JSON 替换现有项目的全部内容（任何修改前都会进行验证）。
• duplicate_project — 复制现有项目，可选择放入其他文件夹或使用新标题。
• move_project — 将项目移至其他文件夹和／或重命名。

检查和编辑项目

• get_skeleton — 获取项目的精简结构图，节省令牌（仅包含带名称和关键帧数量的元素树，不包含值）——编辑循环的第 1 步。
• read_part — 读取由 ID 锚定的路径上的确切值或元素——编辑循环的第 2 步。
• edit_part — 在路径上应用一项经过验证的编辑（更新、插入、移动或删除），并将其持久化——编辑循环的第 3 步。
• describe_shape — 在编写前获取一个构建块（元素或动画器）的确切 JSON 结构，避免猜测字段名称。

资源

• list_assets — 按创建时间从新到旧列出已认证用户可重复使用的资源（静态或动画 SVG 项目）。
• get_asset — 获取单个资源，包括其完整的 data（{document, definitions}）负载。
• create_asset — 根据资源文档创建新的可重复使用资源。
• update_asset — 替换现有资源的整个文档。

文件夹

• list_folders — 列出已认证用户的文件夹（用于归类项目的标签）。
• get_folder — 根据 ID 获取单个文件夹（ID、标题、时间戳）。
• create_folder — 创建新文件夹以整理项目。
• update_folder — 重命名现有文件夹。

导出和账户

• export_project — 将项目导出为可交付格式（SVG、Lottie、React Native、Flutter、视频或 GIF），并可选择按次导出覆盖设置。
• get_render — 查询由 export_project 启动的光栅渲染（视频／GIF）状态，并在完成后获取已签名的下载 URL。
• get_profile — 获取已认证客户的个人资料：姓名、电子邮件、套餐和团队。

文档目录

文档	适用对象	内容
入门指南	所有人	从 claude.ai、Claude Desktop、Claude Code 和其他 MCP 客户端进行连接；身份验证；隐私
工具参考	集成开发者／感兴趣者	每个工具的完整参数和输出表格
编辑项目	集成开发者／高级用户	导航 → 读取 → 编辑 → 验证工作流、路径寻址、编写规则
导出项目	所有人	格式、交付模式、导出选项、渲染状态查询
技能和资源	集成开发者	动态设计创作技能、MCP 资源和提示词
故障排除	所有人	连接问题、常见错误及其含义

要求

• 一个 SVGator 账户（注册）。导出会按与编辑器中相同的方式计入套餐限额。
• 要从 claude.ai / Claude Desktop 连接，自定义连接器需要 Claude Pro、Max、Team 或 Enterprise 套餐。Claude Code 和其他 MCP 客户端可直接连接到端点。

工作原理（一个段落）

该服务是一个远程 MCP 服务：你的 MCP 客户端（Claude，或任何支持 Streamable HTTP 的客户端）会连接到 https://mcp.svgator.com/mcp，并通过 SVGator 的常规 OAuth 登录完成身份验证。你的 SVGator 凭据仅保留在服务端——AI 模型永远不会看到你的访问 令牌或密钥；它只会接收工具结果（项目列表、结构图、导出文件）。工具输入会根据已发布的架构进行验证，无效请求会返回描述性错误，供助手读取并修正。

⚙️ 功能

MCP 服务让你可以用日常语言操控 SVGator。无需在编辑器中逐项点击，只需描述你的需求，AI 助手就能帮你完成：打开项目、更改颜色、为徽标添加动画，或导出成品文件。

它适合希望由助手处理重复性动画工作、无需每次小改动都等待设计师的营销团队，以及需要可直接用于产品的生产就绪导出文件（Lottie、React Native、Flutter 或 SVG）的开发者。每个项目都会附带一个直达编辑器的链接，你随时可以打开项目并手动完成后续工作，从而节省令牌。

连接后，助手可以完成以下工作：

🗂️ 项目和资源

• 列出项目：按最新创建时间排序，每个项目都附带直达编辑器的链接
• 搜索大型素材库并分页浏览
• 读取项目设置：画布尺寸、背景、时间轴和导出设置
• 根据完整定义创建项目
• 覆盖现有项目
• 复制项目：复制到同一文件夹或其他文件夹
• 移动或重命名项目
• 将项目整理到文件夹中
• 管理可重复使用的资源：列出、读取、创建和更新

🔍 结构和检查

• 映射项目结构：展示元素树和关键帧数量，不包含大量数据
• 查看动画内容：每个元素的哪些通道包含关键帧
• 读取精确值：任意属性、关键帧或元素的值
• 查找创作形状：任意元素或概念对应的精确 JSON

🔷 形状和元素

• 矩形
• 圆形和椭圆
• 直线、折线和多边形
• 自定义路径
• 文本和多行文本
• 图像
• 重用的符号和实例
• 组
• 蒙版和剪切路径

🎨 填充、描边和颜色

• 纯色填充：静态或动画
• 渐变填充
• 描边：纯色或渐变，静态或动画
• 合成：混合模式和不透明度
• 模糊等滤镜效果

🎞️ 动画和关键帧

• 在指定时间添加带有数值的关键帧
• 在无需动画的地方设置静态值
• 读取、检查和移除关键帧
• 为每个关键帧设置缓动：三次贝塞尔
• 为变换添加动画：位置、旋转、缩放和倾斜
• 为填充、描边、合成和滤镜通道添加动画
• 将一种形状变形为另一种形状

📤 导出和交付

• 导出动画 SVG：由 JavaScript 或 CSS 驱动
• 设置开始触发条件：加载、悬停、点击、滚动或以编程方式触发
• 设置点击和悬停行为：冻结、重新开始、反向或重置
• 导出为 Lottie
• 导出为 React Native 或 Flutter 源文件
• 渲染视频：MP4、MOV、AVI、MKV 或 WebM
• 渲染 GIF、WebP、PNG 序列或 ZIP
• 控制循环：播放次数、方向、往返播放和速度
• 设置帧率、分辨率和质量
• 处理透明度和背景颜色

✅ 最佳实践

安装 SVGator motion design skill，然后按名称调用：它提供制作指导，可帮助助手对时机、缓动和个性做出审慎选择，而不是生成平淡、千篇一律的动画。从 SVGator skills repository 下载，然后在提示词开头输入类似“使用 SVGator motion skills 为这个徽标制作动画”的内容，即可触发它。你需要手动调用它：这样，当你只想导出或进行小幅修改时，它就不会占用令牌；只有在你确实需要额外的艺术指导时，它才会加载。

从自己的作品开始，再制作动画： 从零开始生成原创图形，是任何 AI 助手最难做好的一件事。为了获得最佳效果，请先在 SVGator 编辑器中制作或导入 SVG，再让助手为它制作动画。这样既能保持视觉风格一致，也能让 AI 专注于自己最擅长的部分：运动、时机和序列。

在输入提示词前为元素命名： 助手会读取元素名称，以了解项目结构。使用“left_arm”“bg_circle”或“headline”等清晰的名称，有助于它准确定位目标元素、避免错误，并在复杂场景中保持井然有序。通用名称会让它更难处理，还可能增加令牌用量（具体取决于模型）。

将复杂动画拆分成多个步骤： 与其说“为我制作完整的新手引导动画”，不如逐步完成：先创建元素，再添加关键帧，最后调整时机。服务端每次编辑只会应用一项经过验证的更改，因此小步骤能让你更好地掌控流程，也便于发现并纠正错误。

明确说明时机和感觉： “平滑淡入”有些含糊。“以 ease-out 效果淡入，时长为 400ms”则能为助手提供具体的制作方向。你对感觉的描述越具体，无论是利落、活泼、缓慢还是微妙，首个结果就越接近你的预期。

根据动画的使用场景选择导出格式： SVG 适合网页使用，你可以选择 JavaScript 或纯 CSS（性能更佳）。Lottie、React Native 和 Flutter 可顺畅用于应用和移动项目。视频和 GIF 适合社交媒体和电子邮件，因为动画 SVG 无法在这些场景中播放。提前选好格式，可以省去重新导出的步骤。

进行重大尝试前先复制项目： 如果你希望 AI 从头开始重建内容，请先让它复制项目，再在副本上进行修改。原项目会保持原样，因此大胆尝试也不会影响可用版本。

在编辑器中完成收尾： 每个项目都会附带一个可直接打开的编辑器链接。助手帮你完成大部分工作后，打开项目并手动完成最后的润色。AI 负责繁重的工作，而细节仍由你掌控。这样还能节省令牌，因为手动进行小幅调整比让助手逐项修改更快、成本更低。