SVGator MCP

SVGator MCP Server — Dokumentation

Der MCP-Server verbindet Ihren KI-Assistenten direkt mit SVGator, dem Online-SVG-Animationswerkzeug. Von dort aus kann Ihr Assistent in Ihren Projekten arbeiten, um sie für Sie zu durchsuchen, zu inspizieren, zu bearbeiten, zu erstellen und zu exportieren, und alles von einem einfachen „Bearbeite die Farben gemäß diesem Marken-Styleguide“ bis hin zu einem vollständigen „Erstelle mir eine animierte Logo-Enthüllung und exportiere sie als reine CSS-Datei“ übernehmen.

• Endpunkt: https://mcp.svgator.com/mcp
• Protokoll: Model Context Protocol über Streamable HTTP
• Authentifizierung: OAuth 2.1 (Anmeldung mit Ihrem SVGator-Konto – siehe Erste Schritte)

Was Sie tun können

Fähigkeit	Werkzeuge	Beispiel-Prompt
Ihre Projekte durchsuchen	list_projects, get_project, get_profile	"Liste meine SVGator-Projekte auf"
Die Struktur eines Projekts inspizieren	get_skeleton, read_part	"Welche Elemente sind in Projekt X und welche sind animiert?"
Ein Projekt schrittweise bearbeiten	edit_part	"Mach den Kreis rot und lass sein Hüpfen endlos wiederholen"
Ganze Projekte erstellen oder ersetzen	create_project, replace_project	"Erstelle mir einen neuen animierten Lade-Spinner"
Projekte duplizieren, verschieben & umbenennen	duplicate_project, move_project	"Kopiere Projekt X in meinen Ordner 'Entwürfe'"
Wiederverwendbare Assets verwalten	list_assets, get_asset, create_asset, update_asset	"Speichere dieses Icon als wiederverwendbares Asset"
Projekte in Ordnern organisieren	list_folders, get_folder, create_folder, update_folder	"Erstelle einen 'Marketing'-Ordner und lege dieses Projekt dort ab"
Authoring-Referenz nachschlagen	describe_shape	(wird vom Assistenten verwendet, um exakte JSON-Formen zu erhalten)
In lieferbare Formate exportieren	export_project, get_render	"Exportiere Projekt X als MP4-Video"
Anleitung zu Motion-Design-Handwerk erhalten	Skill-Ressourcen + Prompt	"Leite eine Logo-Enthüllung künstlerisch an und baue sie dann"

Jedes vom Server zurückgegebene Projekt enthält einen editor_url – einen Deep-Link, der das Projekt im SVGator-Editor öffnet, sodass Sie jederzeit dort von Hand weitermachen können, wo der Assistent aufgehört hat.

Werkzeuge

Der Server stellt 22 Werkzeuge bereit. Siehe die Werkzeugreferenz für vollständige Parameter- und Ausgabetabellen.

Projekte

• list_projects – Listet die SVGator-Projekte des authentifizierten Benutzers auf (neueste zuerst), mit einem editor_url Deep-Link pro Zeile und einer Gesamtanzahl für die Paginierung.
• get_project – Ruft eine einzelne Projektzusammenfassung ab: Titel, Vorschau, Ordner, Zeitstempel, Zeichenflächengröße, Hintergrundfarbe, Animationszeitleiste und gespeicherte Exporteinstellungen.
• create_project – Erstellt ein neues SVGator-Projekt aus einem vollständigen Projekt-JSON, das dem authentifizierten Benutzer gehört.
• replace_project – Ersetzt das gesamte JSON eines bestehenden Projekts durch ein bereitgestelltes vollständiges Projekt (Validierung erfolgt vor jeder Änderung).
• duplicate_project – Erstellt eine Kopie eines bestehenden Projekts, optional in einem anderen Ordner oder unter einem neuen Titel.
• move_project – Verschiebt ein Projekt in einen anderen Ordner und/oder benennt es um.

Projekt inspizieren & bearbeiten

• get_skeleton – Ruft eine günstige, Token-sparende Strukturübersicht eines Projekts ab (Elementbaum nur mit Namen und Keyframe-Anzahlen, niemals Werte) – Schritt 1 der Bearbeitungsschleife.
• read_part – Liest den exakten Wert oder das Element an einem ID-verankerten Pfad – Schritt 2 der Bearbeitungsschleife.
• edit_part – Wendet eine validierte Bearbeitung (Aktualisieren, Einfügen, Verschieben oder Löschen) an einem Pfad an und speichert sie – Schritt 3 der Bearbeitungsschleife.
• describe_shape – Ruft die exakte JSON-Form eines Bausteins (Element oder Animator) vor der Erstellung ab, sodass Feldnamen nie erraten werden müssen.

Assets

• list_assets – Listet die wiederverwendbaren Assets des authentifizierten Benutzers auf (statische oder animierte SVG-Elemente), neueste zuerst.
• get_asset – Ruft ein einzelnes Asset ab, einschließlich seiner vollständigen data ({document, definitions}) Nutzdaten.
• create_asset – Erstellt ein neues wiederverwendbares Asset aus einem Asset-Dokument.
• update_asset – Ersetzt das gesamte Dokument eines bestehenden Assets.

Ordner

• list_folders – Listet die Ordner des authentifizierten Benutzers auf (die Bezeichnungen, unter denen Projekte abgelegt sind).
• get_folder – Ruft einen einzelnen Ordner (ID, Titel, Zeitstempel) anhand seiner ID ab.
• create_folder – Erstellt einen neuen Ordner zum Organisieren von Projekten.
• update_folder – Benennt einen bestehenden Ordner um.

Export & Konto

• export_project – Exportiert ein Projekt in ein lieferbares Format (SVG, Lottie, React Native, Flutter, Video oder GIF), mit optionalen Überschreibungen pro Export.
• get_render – Fragt den Status einer Raster-Rendering-Aufgabe (Video/GIF) ab, die von export_project gestartet wurde, und ruft die signierte Download-URL ab, wenn sie fertig ist.
• get_profile – Ruft das authentifizierte Kundenprofil ab: Name, E-Mail, Tarif und Teams.

Dokumentationsübersicht

Dokument	Für	Behandelt
Erste Schritte	Alle	Verbindung von claude.ai, Claude Desktop, Claude Code und anderen MCP-Clients; Authentifizierung; Datenschutz
Werkzeugreferenz	Integratoren / Neugierige	Jedes Werkzeug mit vollständigen Parameter- und Ausgabetabellen
Projekte bearbeiten	Integratoren / Power-User	Die Navigieren → Lesen → Bearbeiten → Verifizieren-Schleife, Pfadadressierung, Authoring-Regeln
Projekte exportieren	Alle	Formate, Bereitstellungsmodi, Exportoptionen, Render-Abfrage
Skill & Ressourcen	Integratoren	Der Motion-Design-Handwerks-Skill, MCP-Ressourcen und der Prompt
Fehlerbehebung	Alle	Verbindungsprobleme, häufige Fehler und was sie bedeuten

Anforderungen

• Ein SVGator-Konto (Registrieren). Exporte werden auf die Limits Ihres Tarifs angerechnet, genau wie im Editor.
• Um eine Verbindung von claude.ai / Claude Desktop herzustellen, benötigen benutzerdefinierte Konnektoren einen Claude Pro, Max, Team oder Enterprise-Tarif. Claude Code und andere MCP-Clients verbinden sich direkt mit dem Endpunkt.

So funktioniert es (ein Absatz)

Der Server ist ein entfernter MCP-Server: Ihr MCP-Client (Claude oder jeder Client, der Streamable HTTP spricht) verbindet sich mit https://mcp.svgator.com/mcp und meldet Sie über die reguläre OAuth-Anmeldung von SVGator an. Ihre SVGator-Anmeldeinformationen bleiben ausschließlich serverseitig – das KI-Modell sieht niemals Ihr Zugriffstoken oder Ihren geheimen Schlüssel; es erhält nur die Werkzeugergebnisse (Projektlisten, Strukturübersichten, exportierte Dateien). Werkzeugeingaben werden anhand veröffentlichter Schemata validiert, und ungültige Anfragen geben beschreibende Fehler zurück, die der Assistent lesen und korrigieren kann.

⚙️ Fähigkeiten

Der MCP-Server macht SVGator zu etwas, das Sie mit natürlicher Sprache steuern können. Anstatt durch den Editor zu klicken, beschreiben Sie, was Sie möchten, und Ihr KI-Assistent erledigt es: ein Projekt aufrufen, eine Farbe ändern, ein Logo animieren oder eine fertige Datei exportieren.

Er ist für Designer gedacht, die einen Assistenten für die sich wiederholenden Teile der Animation wünschen, für Marketingteams, die webfähige Animationen benötigen, ohne bei jeder kleinen Änderung auf einen Designer warten zu müssen, und für Entwickler, die produktionsreife Exporte (Lottie, React Native, Flutter oder SVG) wünschen, die direkt in ein Produkt einfließen. Jedes Projekt wird mit einem direkten Editor-Link zurückgegeben, sodass Sie es jederzeit öffnen und von Hand fertigstellen können, was Token spart.

Folgendes kann Ihr Assistent tun, sobald er verbunden ist:

🗂️ Projekte und Assets

• Projekte auflisten: neueste zuerst, jedes mit einem direkten Editor-Link
• Große Bibliotheken durchsuchen und durchblättern
• Projekteinstellungen lesen: Zeichenflächengröße, Hintergrund, Zeitleiste und Exporteinstellungen
• Ein Projekt aus einer vollständigen Definition erstellen
• Ein bestehendes Projekt überschreiben
• Ein Projekt duplizieren: in denselben oder einen anderen Ordner
• Ein Projekt verschieben oder umbenennen
• Projekte in Ordnern organisieren
• Wiederverwendbare Assets verwalten: auflisten, lesen, erstellen und aktualisieren

🔍 Struktur und Inspektion

• Die Struktur eines Projekts abbilden: Elementbaum mit Keyframe-Anzahlen, keine umfangreichen Daten
• Sehen, was animiert ist: welche Kanäle Keyframes auf jedem Element tragen
• Exakte Werte lesen: jede Eigenschaft, jeden Keyframe oder jedes Element
• Authoring-Formen nachschlagen: das exakte JSON für jedes Element oder Konzept

🔷 Formen und Elemente

• Rechtecke
• Kreise und Ellipsen
• Linien, Polylinien und Polygone
• Benutzerdefinierte Pfade
• Text und mehrzeiliger Text
• Bilder
• Wiederverwendete Symbole und Instanzen
• Gruppen
• Masken und Schnittmasken

🎨 Füllungen, Konturen und Farbe

• Volltonfüllungen: statisch oder animiert
• Verlaufsfüllungen
• Konturen: einfarbig oder mit Verlauf, statisch oder animiert
• Compositing: Füllmethoden und Deckkraft
• Filtereffekte wie Weichzeichnen

🎞️ Animation und Keyframes

• Keyframes zu bestimmten Zeiten mit Werten hinzufügen
• Statische Werte setzen, wo keine Bewegung benötigt wird
• Keyframes lesen, inspizieren und entfernen
• Easing pro Keyframe setzen: kubische Bézierkurven
• Transformationen animieren: Position, Drehung, Skalierung und Scherung
• Füllungs-, Kontur-, Compositing- und Filterkanäle animieren
• Eine Form in eine andere übergehen lassen (Morphing)

📤 Export und Bereitstellung

• Animiertes SVG exportieren: JavaScript- oder CSS-gesteuert
• Einen Start-Trigger setzen: Laden, Hover, Klick, Scrollen oder programmatisch
• Klick- und Hover-Verhalten festlegen: Einfrieren, Neustart, Rückwärts oder Zurücksetzen
• Nach Lottie exportieren
• Nach React Native oder Flutter Quellcode exportieren
• Video rendern: MP4, MOV, AVI, MKV oder WebM
• GIF, WebP, PNG-Sequenz oder ZIP rendern
• Wiederholung steuern: Iterationen, Richtung, Ping-Pong und Geschwindigkeit
• Bildrate, Auflösung und Qualität festlegen
• Transparenz und Hintergrundfarbe handhaben

✅ Bewährte Methoden

Installieren Sie den SVGator Motion-Design-Skill und rufen Sie ihn dann namentlich auf: Es handelt sich um eine handwerkliche Anleitung, die Ihrem Assistenten hilft, bewusste Entscheidungen über Timing, Easing und Persönlichkeit zu treffen, anstatt flache, generische Bewegungen zu erzeugen. Laden Sie ihn aus dem SVGator Skills-Repository herunter und lösen Sie ihn dann direkt in Ihrem Prompt aus, indem Sie mit etwas beginnen wie „Verwende SVGator Motion Skills, um dieses Logo zu animieren.“ Sie rufen ihn bewusst manuell auf: Auf diese Weise bleibt der Skill außerhalb Ihrer Token-Nutzung, wenn Sie nur exportieren oder kleine Änderungen vornehmen, und wird nur geladen, wenn Sie tatsächlich die zusätzliche künstlerische Leitung wünschen.

Beginnen Sie mit Ihrem eigenen Artwork und animieren Sie dann: Originelle Formen von Grund auf zu generieren, ist für jeden KI-Assistenten am schwierigsten richtig hinzubekommen. Für die besten Ergebnisse erstellen oder importieren Sie Ihr SVG zuerst im SVGator-Editor und bitten Sie dann Ihren Assistenten, es zu animieren. Das hält Ihren visuellen Stil konsistent und ermöglicht es der KI, sich auf das zu konzentrieren, was sie am besten kann: Bewegung, Timing und Sequenzierung.

Benennen Sie Ihre Elemente, bevor Sie den Prompt eingeben: Ihr Assistent liest Elementnamen, um die Struktur eines Projekts zu verstehen. Klare Namen wie „linker_Arm“, „hg_kreis“ oder „Überschrift“ helfen ihm, das richtige Element anzuvisieren, Fehler zu vermeiden und in komplexen Szenen organisiert zu bleiben. Generische Namen erschweren seine Aufgabe und könnten Sie am Ende mehr Token kosten (abhängig vom Modell).

Teilen Sie komplexe Animationen in Schritte auf: Anstatt „Erstelle mir eine vollständige Onboarding-Animation“, gehen Sie Stück für Stück vor: Erstellen Sie die Elemente, fügen Sie Keyframes hinzu und verfeinern Sie dann das Timing. Der Server wendet eine validierte Änderung pro Bearbeitung an, sodass kleinere Schritte Ihnen mehr Kontrolle geben und es einfach machen, Fehler zu erkennen und zu korrigieren.

Seien Sie spezifisch in Bezug auf Timing und Gefühl: „Eine sanfte Überblendung“ ist eher vage. „Eine 400ms Einblendung mit Ease-Out“ gibt Ihrem Assistenten etwas Konkretes zum Arbeiten. Je mehr Sie das Gefühl beschreiben, ob knackig, federnd, langsam oder subtil, desto näher liegt das erste Ergebnis an dem, was Sie sich vorgestellt haben.

Passen Sie das Exportformat dem Einsatzort an: SVG ist die richtige Wahl für das Web, mit Ihrer Wahl zwischen JavaScript oder reinem CSS (für noch bessere Leistung). Lottie, React Native und Flutter lassen sich sauber an App- und Mobilprojekte übergeben. Video und GIF sind bereit für soziale Medien und E-Mail, wo ein animiertes SVG nicht abgespielt wird. Die Wahl des Formats im Voraus spart eine Runde erneuten Exports.

Duplizieren Sie ein Projekt vor großen Experimenten: Wenn Sie möchten, dass die KI etwas von Grund auf neu aufbaut, bitten Sie sie, zuerst das Projekt zu duplizieren und dann die Änderungen an der Kopie vorzunehmen. Das Original bleibt genau so, wie es war, sodass ein gewagtes Experiment Sie niemals die funktionierende Version kostet. Im Editor fertigstellen: Jedes Projekt kommt mit einem direkten Editor-Link zurück. Sobald der Assistent den Großteil der Arbeit erledigt hat, öffnen Sie das Projekt und nehmen Sie den letzten Feinschliff von Hand vor. Die KI erledigt die Schwerstarbeit, und Sie behalten die Kontrolle über die Details. Das spart außerdem Tokens, da kleine Anpassungen von Hand schneller und günstiger sind, als jede einzelne vom Assistenten vornehmen zu lassen.