SVGator MCP

Serveur MCP SVGator — Documentation

Le serveur MCP connecte votre assistant IA directement à SVGator, l'outil d'animation SVG en ligne. À partir de là, votre assistant peut travailler dans vos projets pour les parcourir, inspecter, modifier, créer et exporter pour vous, gérant tout, d'un simple « modifie les couleurs selon cette charte graphique » à un « crée-moi une animation de révélation de logo et exporte-la en fichier CSS uniquement ».

• Endpoint : https://mcp.svgator.com/mcp
• Protocole : Model Context Protocol via HTTP Streamable
• Authentification : OAuth 2.1 (connectez-vous avec votre compte SVGator — voir Premiers pas)

Ce que vous pouvez faire

Capacité	Outils	Exemple d'invite
Parcourir vos projets	list_projects, get_project, get_profile	"Lister mes projets SVGator"
Inspecter la structure d'un projet	get_skeleton, read_part	"Quels éléments sont dans le projet X, et lesquels sont animés ?"
Modifier un projet de manière incrémentielle	edit_part	"Rends le cercle rouge et fais boucler son rebond à l'infini"
Créer ou remplacer des projets entiers	create_project, replace_project	"Crée-moi un nouveau spinner de chargement animé"
Dupliquer, déplacer et renommer des projets	duplicate_project, move_project	"Copier le projet X dans mon dossier 'Brouillons'"
Gérer les ressources réutilisables	list_assets, get_asset, create_asset, update_asset	"Enregistrer cette icône comme ressource réutilisable"
Organiser les projets en dossiers	list_folders, get_folder, create_folder, update_folder	"Créer un dossier 'Marketing' et y classer ce projet"
Consulter la référence de création	describe_shape	(utilisé par l'assistant pour obtenir les formes JSON exactes)
Exporter vers des formats livrables	export_project, get_render	"Exporter le projet X en vidéo MP4"
Obtenir des conseils sur la conception de mouvement	ressources de compétence + invite	"Diriger artistiquement une révélation de logo, puis la construire"

Chaque projet renvoyé par le serveur inclut un editor_url — un lien profond qui ouvre le projet dans l'éditeur SVGator, vous permettant de toujours continuer manuellement là où l'assistant s'est arrêté.

Outils

Le serveur expose 22 outils. Consultez la Référence des outils pour les tableaux complets des paramètres et des sorties.

Projets

• list_projects — Lister les projets SVGator de l'utilisateur authentifié (les plus récents en premier), avec un lien profond editor_url par ligne et un compte total pour la pagination.
• get_project — Obtenir le résumé d'un seul projet : titre, aperçu, dossier, horodatages, taille du canevas, couleur d'arrière-plan, timeline d'animation et paramètres d'exportation enregistrés.
• create_project — Créer un nouveau projet SVGator à partir d'un JSON de projet complet, appartenant à l'utilisateur authentifié.
• replace_project — Remplacer l'intégralité du JSON d'un projet existant par un projet complet fourni (la validation s'exécute avant toute mutation).
• duplicate_project — Faire une copie d'un projet existant, éventuellement dans un dossier différent ou sous un nouveau titre.
• move_project — Déplacer un projet vers un autre dossier et/ou le renommer.

Inspection et modification d'un projet

• get_skeleton — Obtenir une carte de structure légère et économe en tokens d'un projet (arborescence d'éléments avec noms et nombre d'images clés uniquement, jamais les valeurs) — étape 1 de la boucle d'édition.
• read_part — Lire la valeur ou l'élément exact à un chemin ancré par identifiant — étape 2 de la boucle d'édition.
• edit_part — Appliquer une modification validée (mise à jour, insertion, déplacement ou suppression) à un chemin et la persister — étape 3 de la boucle d'édition.
• describe_shape — Obtenir la forme JSON exacte d'un bloc de construction (élément ou animateur) avant la création, afin que les noms de champs ne soient jamais devinés.

Ressources

• list_assets — Lister les ressources réutilisables de l'utilisateur authentifié (éléments SVG statiques ou animés), les plus récentes en premier.
• get_asset — Obtenir une seule ressource, y compris sa charge utile complète data ({document, definitions}).
• create_asset — Créer une nouvelle ressource réutilisable à partir d'un document de ressource.
• update_asset — Remplacer l'intégralité du document d'une ressource existante.

Dossiers

• list_folders — Lister les dossiers de l'utilisateur authentifié (les étiquettes sous lesquelles les projets sont classés).
• get_folder — Obtenir un seul dossier (id, titre, horodatages) par son identifiant.
• create_folder — Créer un nouveau dossier pour organiser les projets.
• update_folder — Renommer un dossier existant.

Exportation et compte

• export_project — Exporter un projet vers un format livrable (SVG, Lottie, React Native, Flutter, vidéo ou GIF), avec des remplacements optionnels par exportation.
• get_render — Interroger le statut d'un rendu raster (vidéo/GIF) démarré par export_project et obtenir l'URL de téléchargement signée une fois terminé.
• get_profile — Obtenir le profil client authentifié : nom, e-mail, plan et équipes.

Plan de la documentation

Document	Pour	Couvre
Premiers pas	Tout le monde	Connexion depuis claude.ai, Claude Desktop, Claude Code et d'autres clients MCP ; authentification ; confidentialité
Référence des outils	Intégrateurs / curieux	Chaque outil avec des tableaux complets de paramètres et de sorties
Modification de projets	Intégrateurs / utilisateurs avancés	La boucle naviguer → lire → modifier → vérifier, adressage par chemin, règles de création
Exportation de projets	Tout le monde	Formats, modes de livraison, options d'exportation, interrogation du rendu
Compétence et ressources	Intégrateurs	La compétence de conception de mouvement, les ressources MCP et l'invite
Dépannage	Tout le monde	Problèmes de connexion, erreurs courantes et leur signification

Prérequis

• Un compte SVGator (s'inscrire). Les exportations sont décomptées des limites de votre plan exactement comme dans l'éditeur.
• Pour se connecter depuis claude.ai / Claude Desktop, les connecteurs personnalisés nécessitent un plan Claude Pro, Max, Team ou Enterprise. Claude Code et les autres clients MCP se connectent directement à l'endpoint.

Comment ça fonctionne (en un paragraphe)

Le serveur est un serveur MCP distant : votre client MCP (Claude, ou tout client parlant HTTP Streamable) se connecte à https://mcp.svgator.com/mcp et vous authentifie via la connexion OAuth standard de SVGator. Vos identifiants SVGator restent uniquement côté serveur — le modèle d'IA ne voit jamais votre jeton d'accès ou votre clé secrète ; il ne reçoit que les résultats des outils (listes de projets, cartes de structure, fichiers exportés). Les entrées des outils sont validées par rapport aux schémas publiés, et les requêtes invalides renvoient des erreurs descriptives que l'assistant peut lire et corriger.

⚙️ Capacités

Le serveur MCP transforme SVGator en quelque chose que vous pouvez piloter en langage naturel. Au lieu de cliquer dans l'éditeur, vous décrivez ce que vous voulez et votre assistant IA le fait : ouvrir un projet, changer une couleur, animer un logo ou exporter un fichier final.

Il est conçu pour les designers qui souhaitent qu'un assistant gère les parties répétitives de l'animation, pour les équipes marketing qui ont besoin d'animations prêtes pour le web sans attendre un designer pour chaque petit changement, et pour les développeurs qui veulent des exportations prêtes pour la production (Lottie, React Native, Flutter ou SVG) qui s'intègrent directement dans un produit. Chaque projet est renvoyé avec un lien direct vers l'éditeur, vous pouvez donc toujours l'ouvrir et le terminer manuellement, économisant ainsi des tokens.

Voici ce que votre assistant peut faire une fois connecté :

🗂️ Projets et ressources

• Lister les projets : les plus récents en premier, chacun avec un lien direct vers l'éditeur
• Rechercher et paginer dans de grandes bibliothèques
• Lire les paramètres du projet : taille du canevas, arrière-plan, timeline et paramètres d'exportation
• Créer un projet à partir d'une définition complète
• Écraser un projet existant
• Dupliquer un projet : dans le même dossier ou un autre
• Déplacer ou renommer un projet
• Organiser les projets en dossiers
• Gérer les ressources réutilisables : lister, lire, créer et mettre à jour

🔍 Structure et inspection

• Cartographier la structure d'un projet : arborescence d'éléments avec nombre d'images clés, sans données lourdes
• Voir ce qui est animé : quels canaux portent des images clés sur chaque élément
• Lire les valeurs exactes : toute propriété, image clé ou élément
• Consulter les formes de création : le JSON exact pour tout élément ou concept

🔷 Formes et éléments

• Rectangles
• Cercles et ellipses
• Lignes, polylignes et polygones
• Tracés personnalisés
• Texte et texte multiligne
• Images
• Symboles et instances réutilisés
• Groupes
• Masques et tracés de détourage

🎨 Remplissages, contours et couleur

• Remplissages de couleur unie : statiques ou animés
• Remplissages en dégradé
• Contours : unis ou en dégradé, statiques ou animés
• Composition : modes de fusion et opacité
• Effets de filtre tels que le flou

🎞️ Animation et images clés

• Ajouter des images clés à des moments spécifiques, avec des valeurs
• Définir des valeurs statiques là où aucun mouvement n'est nécessaire
• Lire, inspecter et supprimer des images clés
• Définir l'interpolation par image clé : courbe de Bézier cubique
• Animer les transformations : position, rotation, échelle et inclinaison
• Animer les canaux de remplissage, contour, composition et filtre
• Transformer une forme en une autre

📤 Exportation et livraison

• Exporter un SVG animé : piloté par JavaScript ou CSS
• Définir un déclencheur de démarrage : chargement, survol, clic, défilement ou programmatique
• Définir le comportement au clic et au survol : figer, redémarrer, inverser ou réinitialiser
• Exporter vers Lottie
• Exporter vers le code source React Native ou Flutter
• Rendu vidéo : MP4, MOV, AVI, MKV ou WebM
• Rendu GIF, WebP, séquence PNG ou ZIP
• Contrôler la boucle : itérations, direction, ping-pong et vitesse
• Définir la fréquence d'images, la résolution et la qualité
• Gérer la transparence et la couleur d'arrière-plan

✅ Bonnes pratiques

Installez la compétence de conception de mouvement SVGator, puis appelez-la par son nom : c'est un guide artisanal qui aide votre assistant à faire des choix délibérés concernant le timing, l'interpolation et la personnalité au lieu d'un mouvement plat et générique. Téléchargez-la depuis le dépôt de compétences SVGator, puis déclenchez-la directement dans votre invite en commençant par quelque chose comme "utilise les compétences de mouvement SVGator pour animer ce logo". Vous l'appelez manuellement exprès : ainsi, la compétence reste en dehors de votre utilisation de tokens lorsque vous ne faites qu'exporter ou de petites modifications, et ne se charge que lorsque vous voulez réellement la direction artistique supplémentaire.

Partez de vos propres illustrations, puis animez : Générer des formes originales à partir de zéro est la chose la plus difficile à réussir pour tout assistant IA. Pour de meilleurs résultats, construisez ou importez d'abord votre SVG dans l'éditeur de SVGator, puis demandez à votre assistant de l'animer. Cela garde votre style visuel cohérent et permet à l'IA de se concentrer sur ce qu'elle fait le mieux : le mouvement, le timing et le séquençage.

Nommez vos éléments avant de formuler votre invite : Votre assistant lit les noms des éléments pour comprendre la structure d'un projet. Des noms clairs comme "bras_gauche", "cercle_fond" ou "titre" l'aident à cibler le bon élément, à éviter les erreurs et à rester organisé dans les scènes complexes. Les noms génériques rendent son travail plus difficile et pourraient finir par vous coûter plus de tokens (selon le modèle).

Décomposez les animations complexes en étapes : Au lieu de "construis-moi une animation d'intégration complète", procédez étape par étape : créez les éléments, ajoutez des images clés, puis affinez le timing. Le serveur applique un changement validé par modification, donc des étapes plus petites vous donnent plus de contrôle et rendent toute erreur facile à repérer et à corriger.

Soyez précis sur le timing et la sensation : "Un fondu en douceur" est un peu vague. "Un fondu entrant de 400 ms avec une interpolation de sortie" donne à votre assistant quelque chose de concret sur quoi travailler. Plus vous décrivez la sensation, qu'elle soit vive, rebondissante, lente ou subtile, plus le premier résultat se rapproche de ce que vous aviez en tête.

Adaptez le format d'exportation à l'endroit où il sera utilisé : Le SVG est le bon choix pour le web, avec votre choix de JavaScript ou CSS uniquement (pour des performances encore meilleures). Lottie, React Native et Flutter s'intègrent parfaitement aux projets d'applications et mobiles. La vidéo et le GIF sont prêts pour les réseaux sociaux et les e-mails, où un SVG animé ne sera pas lu. Choisir le format dès le départ évite un cycle de ré-exportation.

Dupliquez un projet avant de grandes expérimentations : Si vous voulez que l'IA reconstruise quelque chose de fond en comble, demandez-lui d'abord de dupliquer le projet, puis d'apporter les modifications sur la copie. L'original reste exactement tel qu'il était, ainsi une expérience audacieuse ne vous coûte jamais la version fonctionnelle. Terminez dans l'éditeur : Chaque projet revient avec un lien direct vers l'éditeur. Une fois que l'assistant vous a fait avancer sur la majeure partie du travail, ouvrez le projet et peaufinez-le à la main. L'IA fait le gros du travail, et vous gardez le contrôle des détails. Cela permet aussi d'économiser des jetons, car les petites retouches manuelles sont plus rapides et moins coûteuses que de demander à l'assistant de les faire une par une.