SVGator MCP

chính thức

Tạo, chỉnh sửa và xuất hoạt ảnh SVGator (SVG, Lottie, GIF, video) từ trợ lý AI của bạn, đồng thời giữ một dự án có thể chỉnh sửa để bạn có thể mở trong trình chỉnh sửa bất kỳ lúc nào.

GitHub
4
Dùng thử MCP nàyĐược tài trợ

Bạn có thể làm gì với SVGator MCP?

  • Duyệt và tìm kiếm các dự án SVGator của bạnlist_projects trả về các dự án mới nhất trước với liên kết sâu đến trình chỉnh sửa, và get_project lấy kích thước canvas, dòng thời gian và cài đặt xuất.
  • Kiểm tra cấu trúc của một dự án mà không cần dữ liệu nặngget_skeleton trả về cây phần tử chỉ với số lượng keyframe, và read_part đọc các giá trị chính xác tại một đường dẫn cụ thể.
  • Chỉnh sửa dự án theo từng bướcedit_part áp dụng một thao tác cập nhật, chèn, di chuyển hoặc xóa đã được xác thực tại một đường dẫn và lưu lại.
  • Tạo, nhân bản, di chuyển hoặc thay thế toàn bộ dự áncreate_project, replace_project, duplicate_projectmove_project xử lý các thao tác toàn bộ dự án.
  • Quản lý tài sản và thư mục có thể tái sử dụnglist_assets, create_asset, update_asset, list_folders, create_folderupdate_folder sắp xếp thư viện của bạn.
  • Xuất sang các định dạng có thể phân phốiexport_project xuất ra SVG động, Lottie, React Native, Flutter, video hoặc GIF, với get_render thăm dò các bản tải xuống raster.

Tài liệu

SVGator MCP Server — Tài liệu

Máy chủ MCP kết nối trợ lý AI của bạn trực tiếp với SVGator, công cụ tạo hoạt ảnh SVG trực tuyến. Từ đó, trợ lý của bạn có thể làm việc trong các dự án của bạn để duyệt, kiểm tra, chỉnh sửa, tạo và xuất chúng cho bạn, xử lý mọi thứ từ một yêu cầu đơn giản như “chỉnh sửa màu sắc theo bộ nhận diện thương hiệu này” đến một yêu cầu hoàn chỉnh “hãy tạo cho tôi một đoạn mở đầu logo động và xuất nó dưới dạng tệp chỉ CSS.”

  • Điểm cuối: https://mcp.svgator.com/mcp
  • Giao thức: Model Context Protocol qua HTTP có thể truyền phát
  • Xác thực: OAuth 2.1 (đăng nhập bằng tài khoản SVGator của bạn — xem Bắt đầu)

Những gì bạn có thể làm

Khả năngCông cụLời nhắc ví dụ
Duyệt các dự án của bạnlist_projects, get_project, get_profile"Liệt kê các dự án SVGator của tôi"
Kiểm tra cấu trúc của một dự ánget_skeleton, read_part"Dự án X có những phần tử nào và phần tử nào đang được tạo hoạt ảnh?"
Chỉnh sửa dự án từng bướcedit_part"Làm cho hình tròn màu đỏ và lặp lại hiệu ứng nảy mãi mãi"
Tạo hoặc thay thế toàn bộ dự áncreate_project, replace_project"Tạo cho tôi một vòng quay tải động mới"
Nhân bản, di chuyển và đổi tên dự ánduplicate_project, move_project"Sao chép dự án X vào thư mục 'Bản nháp' của tôi"
Quản lý tài sản có thể tái sử dụnglist_assets, get_asset, create_asset, update_asset"Lưu biểu tượng này dưới dạng tài sản có thể tái sử dụng"
Sắp xếp dự án vào các thư mụclist_folders, get_folder, create_folder, update_folder"Tạo một thư mục 'Tiếp thị' và đưa dự án này vào đó"
Tra cứu tham chiếu tác giảdescribe_shape(được trợ lý sử dụng để lấy hình dạng JSON chính xác)
Xuất sang các định dạng có thể phân phốiexport_project, get_render"Xuất dự án X dưới dạng video MP4"
Nhận hướng dẫn thủ công thiết kế chuyển độngtài nguyên kỹ năng + lời nhắc"Định hướng nghệ thuật cho một đoạn mở đầu logo, sau đó xây dựng nó"

Mỗi dự án mà máy chủ trả về đều bao gồm một editor_url — một liên kết sâu mở dự án trong trình chỉnh sửa SVGator, vì vậy bạn luôn có thể tiếp tục thủ công từ nơi trợ lý đã dừng lại.

Công cụ

Máy chủ cung cấp 22 công cụ. Xem Tham chiếu công cụ để biết bảng tham số và đầu ra đầy đủ.

Dự án

  • list_projects — Liệt kê các dự án SVGator của người dùng đã xác thực (mới nhất trước), với một liên kết sâu editor_url trên mỗi hàng và tổng số để phân trang.
  • get_project — Nhận tóm tắt một dự án: tiêu đề, xem trước, thư mục, dấu thời gian, kích thước canvas, màu nền, dòng thời gian hoạt ảnh và cài đặt xuất đã lưu.
  • create_project — Tạo một dự án SVGator mới từ JSON dự án đầy đủ, thuộc sở hữu của người dùng đã xác thực.
  • replace_project — Thay thế toàn bộ JSON của một dự án hiện có bằng một dự án đầy đủ được cung cấp (xác thực chạy trước bất kỳ thay đổi nào).
  • duplicate_project — Tạo một bản sao của dự án hiện có, tùy chọn vào một thư mục khác hoặc với tiêu đề mới.
  • move_project — Di chuyển một dự án sang một thư mục khác và/hoặc đổi tên nó.

Kiểm tra và chỉnh sửa dự án

  • get_skeleton — Nhận bản đồ cấu trúc nhẹ, tiết kiệm token của một dự án (cây phần tử chỉ có tên và số lượng khung hình chính, không bao giờ có giá trị) — bước 1 của vòng lặp chỉnh sửa.
  • read_part — Đọc giá trị hoặc phần tử chính xác tại một đường dẫn được neo bằng id — bước 2 của vòng lặp chỉnh sửa.
  • edit_part — Áp dụng một chỉnh sửa đã xác thực (cập nhật, chèn, di chuyển hoặc xóa) tại một đường dẫn và lưu nó — bước 3 của vòng lặp chỉnh sửa.
  • describe_shape — Nhận hình dạng JSON chính xác của một khối xây dựng (phần tử hoặc trình tạo hoạt ảnh) trước khi tạo, để tên trường không bao giờ bị đoán.

Tài sản

  • list_assets — Liệt kê các tài sản có thể tái sử dụng của người dùng đã xác thực (các mục SVG tĩnh hoặc động), mới nhất trước.
  • get_asset — Nhận một tài sản duy nhất bao gồm tải trọng data ({document, definitions}) đầy đủ của nó.
  • create_asset — Tạo một tài sản có thể tái sử dụng mới từ một tài liệu tài sản.
  • update_asset — Thay thế toàn bộ tài liệu của một tài sản hiện có.

Thư mục

  • list_folders — Liệt kê các thư mục của người dùng đã xác thực (các nhãn mà dự án được lưu trữ).
  • get_folder — Nhận một thư mục duy nhất (id, tiêu đề, dấu thời gian) theo id của nó.
  • create_folder — Tạo một thư mục mới để sắp xếp các dự án.
  • update_folder — Đổi tên một thư mục hiện có.

Xuất và tài khoản

  • export_project — Xuất một dự án sang định dạng có thể phân phối (SVG, Lottie, React Native, Flutter, video hoặc GIF), với các ghi đè tùy chọn cho mỗi lần xuất.
  • get_render — Thăm dò trạng thái của một kết xuất raster (video/GIF) được bắt đầu bởi export_project và nhận URL tải xuống đã ký khi hoàn tất.
  • get_profile — Nhận hồ sơ khách hàng đã xác thực: tên, email, gói và nhóm.

Sơ đồ tài liệu

Tài liệuDành choBao gồm
Bắt đầuMọi ngườiKết nối từ claude.ai, Claude Desktop, Claude Code và các máy khách MCP khác; xác thực; quyền riêng tư
Tham chiếu công cụNgười tích hợp / người tò mòMọi công cụ với bảng tham số và đầu ra đầy đủ
Chỉnh sửa dự ánNgười tích hợp / người dùng thành thạoVòng lặp điều hướng → đọc → chỉnh sửa → xác minh, định địa chỉ đường dẫn, quy tắc tạo
Xuất dự ánMọi ngườiĐịnh dạng, chế độ phân phối, tùy chọn xuất, thăm dò kết xuất
Kỹ năng & tài nguyênNgười tích hợpKỹ năng thủ công thiết kế chuyển động, tài nguyên MCP và lời nhắc
Khắc phục sự cốMọi ngườiSự cố kết nối, lỗi phổ biến và ý nghĩa của chúng

Yêu cầu

  • Một tài khoản SVGator (đăng ký). Các lần xuất được tính vào giới hạn gói của bạn giống hệt như trong trình chỉnh sửa.
  • Để kết nối từ claude.ai / Claude Desktop, các trình kết nối tùy chỉnh yêu cầu gói Claude Pro, Max, Team hoặc Enterprise. Claude Code và các máy khách MCP khác kết nối trực tiếp đến điểm cuối.

Cách thức hoạt động (một đoạn)

Máy chủ là một máy chủ MCP từ xa: máy khách MCP của bạn (Claude hoặc bất kỳ máy khách nào sử dụng HTTP có thể truyền phát) kết nối với https://mcp.svgator.com/mcp và đăng nhập bạn thông qua đăng nhập OAuth thông thường của SVGator. Thông tin đăng nhập SVGator của bạn chỉ ở phía máy chủ — mô hình AI không bao giờ thấy mã thông báo truy cập hoặc khóa bí mật của bạn; nó chỉ nhận được kết quả công cụ (danh sách dự án, bản đồ cấu trúc, tệp đã xuất). Đầu vào công cụ được xác thực dựa trên các lược đồ đã công bố và các yêu cầu không hợp lệ trả về lỗi mô tả mà trợ lý có thể đọc và sửa.

⚙️ Khả năng

Máy chủ MCP biến SVGator thành thứ bạn có thể điều khiển bằng ngôn ngữ tự nhiên. Thay vì nhấp qua trình chỉnh sửa, bạn mô tả những gì bạn muốn và trợ lý AI của bạn thực hiện: mở một dự án, thay đổi màu sắc, tạo hoạt ảnh cho logo hoặc xuất tệp hoàn chỉnh.

Nó được xây dựng cho các nhà thiết kế muốn có một trợ lý xử lý các phần lặp đi lặp lại của việc tạo hoạt ảnh, cho các nhóm tiếp thị cần hoạt ảnh sẵn sàng cho web mà không cần chờ đợi nhà thiết kế cho mỗi thay đổi nhỏ, và cho các nhà phát triển muốn xuất sẵn sàng sản xuất (Lottie, React Native, Flutter hoặc SVG) có thể đưa thẳng vào sản phẩm. Mỗi dự án đều đi kèm với một liên kết trình chỉnh sửa trực tiếp, vì vậy bạn luôn có thể mở nó và hoàn thành thủ công, tiết kiệm token.

Đây là những gì trợ lý của bạn có thể làm sau khi được kết nối:

🗂️ Dự án và Tài sản

  • Liệt kê dự án: mới nhất trước, mỗi dự án có liên kết trình chỉnh sửa trực tiếp
  • Tìm kiếm và phân trang qua các thư viện lớn
  • Đọc cài đặt dự án: kích thước canvas, nền, dòng thời gian và cài đặt xuất
  • Tạo dự án từ một định nghĩa đầy đủ
  • Ghi đè một dự án hiện có
  • Nhân bản một dự án: vào cùng hoặc thư mục khác
  • Di chuyển hoặc đổi tên một dự án
  • Sắp xếp dự án vào các thư mục
  • Quản lý tài sản có thể tái sử dụng: liệt kê, đọc, tạo và cập nhật

🔍 Cấu trúc và Kiểm tra

  • Lập bản đồ cấu trúc của một dự án: cây phần tử với số lượng khung hình chính, không có dữ liệu nặng
  • Xem những gì đang được tạo hoạt ảnh: kênh nào mang khung hình chính trên mỗi phần tử
  • Đọc giá trị chính xác: bất kỳ thuộc tính, khung hình chính hoặc phần tử nào
  • Tra cứu hình dạng tác giả: JSON chính xác cho bất kỳ phần tử hoặc khái niệm nào

🔷 Hình dạng và Phần tử

  • Hình chữ nhật
  • Hình tròn và hình elip
  • Đường thẳng, đường gấp khúc và đa giác
  • Đường dẫn tùy chỉnh
  • Văn bản và văn bản nhiều dòng
  • Hình ảnh
  • Biểu tượng và thể hiện được tái sử dụng
  • Nhóm
  • Mặt nạ và đường cắt

🎨 Tô, Nét và Màu sắc

  • Tô màu đồng nhất: tĩnh hoặc động
  • Tô gradient
  • Nét: đồng nhất hoặc gradient, tĩnh hoặc động
  • Tổng hợp: chế độ hòa trộn và độ mờ
  • Hiệu ứng bộ lọc như làm mờ

🎞️ Hoạt ảnh và Khung hình chính

  • Thêm khung hình chính tại các thời điểm cụ thể, với các giá trị
  • Đặt giá trị tĩnh khi không cần chuyển động
  • Đọc, kiểm tra và xóa khung hình chính
  • Đặt easing cho mỗi khung hình chính: cubic bezier
  • Tạo hoạt ảnh biến đổi: vị trí, xoay, tỷ lệ và nghiêng
  • Tạo hoạt ảnh các kênh tô, nét, tổng hợp và bộ lọc
  • Biến hình dạng này thành hình dạng khác

📤 Xuất và Phân phối

  • Xuất SVG động: được điều khiển bởi JavaScript hoặc CSS
  • Đặt trình kích hoạt bắt đầu: tải, di chuột, nhấp, cuộn hoặc lập trình
  • Đặt hành vi nhấp và di chuột: đóng băng, khởi động lại, đảo ngược hoặc đặt lại
  • Xuất sang Lottie
  • Xuất sang mã nguồn React Native hoặc Flutter
  • Kết xuất video: MP4, MOV, AVI, MKV hoặc WebM
  • Kết xuất GIF, WebP, chuỗi PNG hoặc ZIP
  • Kiểm soát lặp: số lần lặp, hướng, ping-pong và tốc độ
  • Đặt tốc độ khung hình, độ phân giải và chất lượng
  • Xử lý độ trong suốt và màu nền

✅ Thực hành tốt nhất

Cài đặt kỹ năng thiết kế chuyển động SVGator, sau đó gọi nó theo tên: Đó là hướng dẫn thủ công giúp trợ lý của bạn đưa ra các lựa chọn có chủ ý về thời gian, easing và cá tính thay vì chuyển động phẳng, chung chung. Tải xuống từ kho kỹ năng SVGator, sau đó kích hoạt nó ngay trong lời nhắc của bạn bằng cách bắt đầu với điều gì đó như "sử dụng kỹ năng chuyển động SVGator để tạo hoạt ảnh cho logo này." Bạn gọi nó thủ công có mục đích: theo cách đó, kỹ năng sẽ không tiêu tốn token của bạn khi bạn chỉ xuất hoặc thực hiện các chỉnh sửa nhỏ và chỉ tải khi bạn thực sự muốn có thêm định hướng nghệ thuật.

Bắt đầu từ tác phẩm nghệ thuật của riêng bạn, sau đó tạo hoạt ảnh: Tạo hình dạng gốc từ đầu là điều khó thực hiện đúng nhất trong bất kỳ trợ lý AI nào. Để có kết quả tốt nhất, hãy xây dựng hoặc mang SVG của bạn vào trình chỉnh sửa của SVGator trước, sau đó yêu cầu trợ lý của bạn tạo hoạt ảnh cho nó. Điều đó giữ cho phong cách hình ảnh của bạn nhất quán và cho phép AI tập trung vào những gì nó làm tốt nhất: chuyển động, thời gian và trình tự.

Đặt tên cho các phần tử của bạn trước khi bạn nhắc: Trợ lý của bạn đọc tên phần tử để hiểu cấu trúc của dự án. Các tên rõ ràng như “tay_trái”, “hình_tròn_nền” hoặc “tiêu_đề” giúp nó nhắm mục tiêu đúng phần tử, tránh sai sót và duy trì tổ chức trong các cảnh phức tạp. Tên chung chung khiến công việc của nó khó khăn hơn và có thể khiến bạn tốn nhiều token hơn (tùy thuộc vào mô hình).

Chia nhỏ các hoạt ảnh phức tạp thành các bước: Thay vì “xây dựng cho tôi một hoạt ảnh giới thiệu đầy đủ”, hãy thực hiện từng phần một: tạo các phần tử, thêm khung hình chính, sau đó tinh chỉnh thời gian. Máy chủ áp dụng một thay đổi đã xác thực cho mỗi lần chỉnh sửa, vì vậy các bước nhỏ hơn giúp bạn kiểm soát nhiều hơn và làm cho bất kỳ sai lầm nào cũng dễ dàng phát hiện và sửa chữa.

Cụ thể về thời gian và cảm giác: “Một hiệu ứng mờ dần mượt mà” hơi mơ hồ. “Hiệu ứng mờ dần trong 400ms với ease-out” cung cấp cho trợ lý của bạn điều gì đó cụ thể để làm việc. Bạn càng mô tả cảm giác, cho dù là nhanh, nảy, chậm hay tinh tế, thì kết quả đầu tiên càng gần với những gì bạn nghĩ trong đầu.

Khớp định dạng xuất với nơi nó sẽ được sử dụng: SVG là lựa chọn phù hợp cho web, với lựa chọn JavaScript hoặc chỉ CSS của bạn (để có hiệu suất tốt hơn nữa). Lottie, React Native và Flutter chuyển giao sạch sẽ cho các dự án ứng dụng và di động. Video và GIF sẵn sàng cho mạng xã hội và email, nơi SVG động sẽ không phát. Chọn định dạng trước sẽ tiết kiệm một vòng xuất lại.

Nhân bản một dự án trước các thử nghiệm lớn: Nếu bạn muốn AI xây dựng lại thứ gì đó từ đầu, hãy yêu cầu nó nhân bản dự án trước, sau đó thực hiện các thay đổi trên bản sao. Bản gốc vẫn giữ nguyên như cũ, vì vậy một thử nghiệm táo bạo không bao giờ làm mất phiên bản đang hoạt động của bạn. Hoàn thiện trong trình chỉnh sửa: Mỗi dự án đều đi kèm một liên kết trực tiếp đến trình chỉnh sửa. Khi trợ lý đã giúp bạn hoàn thành phần lớn công việc, hãy mở dự án và tự tay xử lý những bước hoàn thiện cuối cùng. AI sẽ làm những việc nặng nhọc, còn bạn giữ quyền kiểm soát các chi tiết. Điều này cũng giúp tiết kiệm token, vì những tinh chỉnh nhỏ bằng tay sẽ nhanh và rẻ hơn so với việc yêu cầu trợ lý thực hiện từng thao tác một.