SVGator MCP

SVGator MCP 服务器 — 文档

该 MCP 服务器将您的 AI 助手直接连接到 SVGator，这是一款在线 SVG 动画工具。 连接后，您的助手可以在您的项目中进行操作，为您浏览、检查、编辑、创建和导出项目， 处理从简单的“根据此品牌套件编辑颜色”到完整的 “为我构建一个动画标志展示并将其导出为纯 CSS 文件”等各种任务。

• 端点： https://mcp.svgator.com/mcp
• 协议： 基于可流式 HTTP 的 模型上下文协议
• 身份验证： 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 复制到我的‘草稿’文件夹中”
管理可重用资源	list_assets, get_asset, create_asset, update_asset	“将此图标保存为可重用资源”
将项目整理到文件夹中	list_folders, get_folder, create_folder, update_folder	“创建一个‘营销’文件夹并将此项目归档到其中”
查找创作参考	describe_shape	（由助手用于获取精确的 JSON 形状）
导出为可交付格式	export_project, get_render	“将项目 X 导出为 MP4 视频”
获取动态设计工艺指导	技能资源 + 提示	“艺术指导一个标志展示，然后构建它”

服务器返回的每个项目都包含一个 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 或任何使用可流式 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 动态设计技能，然后按名称调用它： 这是一份工艺指导，可帮助您的助手在时间、缓动和个性方面做出深思熟虑的选择，而不是平淡、通用的运动。从 SVGator 技能仓库 下载它，然后在您的提示中直接触发它，例如以“使用 SVGator 动态技能为此标志制作动画”开头。您是有意手动调用它的：这样，当您仅进行导出或进行小编辑时，该技能就不会占用您的令牌使用量，并且仅在您真正需要额外的艺术指导时才加载。

从您自己的作品开始，然后制作动画： 在任何 AI 助手中，从头开始生成原始形状是最难做好的事情。为获得最佳效果，请先在 SVGator 的编辑器中构建或导入您的 SVG，然后让您的助手为其制作动画。这样可以保持您的视觉风格一致，并让 AI 专注于它最擅长的方面：运动、时间和排序。

在提示之前命名您的元素： 您的助手会读取元素名称以理解项目的结构。清晰的名称，如“left_arm”、“bg_circle”或“headline”，有助于它定位正确的元素，避免错误，并在复杂的场景中保持组织性。通用名称会增加其工作难度，并可能最终消耗您更多的令牌（取决于模型）。

将复杂的动画分解为步骤： 不要“为我构建一个完整的入门动画”，而是一次只做一部分：创建元素，添加关键帧，然后优化时间。服务器每次应用一个经过验证的更改，因此较小的步骤可以为您提供更多控制，并使任何错误都易于发现和纠正。

具体说明时间和感觉： “平滑淡入”有点模糊。“一个 400 毫秒的淡入，使用缓出”为您的助手提供了具体的工作内容。您对感觉的描述越详细，无论是干脆、有弹性、缓慢还是微妙，第一次结果就越接近您的想法。

将导出格式与其使用场景相匹配： SVG 是网络的正确选择，您可以选择 JavaScript 或纯 CSS（以获得更好的性能）。Lottie、React Native 和 Flutter 可以干净地移交给应用程序和移动项目。视频和 GIF 已准备好用于社交媒体和电子邮件，在这些场景中动画 SVG 无法播放。预先选择格式可以节省一轮重新导出的时间。

在进行大型实验之前复制项目： 如果您希望 AI 从头开始重建某些内容，请让它先复制项目，然后在副本上进行更改。原始版本保持原样，因此大胆的实验永远不会让您失去可用的版本。 在编辑器中完成： 每个项目都会附带一个直接的编辑器链接。当助手帮你完成大部分工作后，打开项目，手动进行最后的润色。AI 负责繁重的工作，而你则掌控细节。这还能节省 token，因为手动进行微调比让助手逐一修改更快、更经济。