SVG Animés en Minutes : Tutoriel Gemini 3.1

Pourquoi l'animation par code surpasse à nouveau les GIFs

La poussée de Google pour 2026 en faveur des visuels natifs code ne consiste pas à écarter les designers—il s'agit de déployer des actifs minuscules, à résolution infinie directement depuis un prompt. Les modèles de classe Gemini 3.1 peuvent générer un balisage SVG valide avec des animations CSS ou SMIL intégrées. Parce que le résultat repose sur des maths, pas des pixels, un seul fichier s'adapte des icônes mobiles aux sections hero sans réexportation.

Ce tutoriel vous guide à travers trois projets évolutifs sur MidassAI Chat—pas de timeline Figma, pas d'After Effects, aucun IDE local requis jusqu'à ce que vous colliez l'extrait final.

Public Cible

• Développeurs frontend prototypant des micro-interactions
• Marketeurs ayant besoin de loaders et d'icônes légers pour des landing pages
• Éducateurs créant des diagrammes interactifs (physique, chimie, flux de processus)
• Quiconque est fatigué des loaders GIF de 2 Mo sur des sites par ailleurs rapides

Avant de Prompter : Trois Contraintes pour Éviter un Résultat Médiocre

Incluez toujours ces éléments dans votre premier message :

1. Format de sortie : « Return only raw SVG code, starting with <svg and ending with </svg>. No markdown fences. »
2. Moteur d'animation : « Use CSS @keyframes inside a <style> block within the SVG » (ou « use <animateTransform> » si vous avez besoin d'embarquements SMIL uniquement).
3. Viewport : « viewBox=0 0 100 100 », width/height=100%, preserveAspectRatio=xMidYMid meet.

Sans le #1, vous lutterez contre les wrappers markdown dans les éditeurs CMS. Sans le #2, le modèle choisit parfois des APIs d'animation incohérentes. Sans le #3, les mises en page responsives se brisent sur mobile.

Projet 1 : Spinner de Chargement à Trois Points (Débutant)

Ouvrez MidassAI Chat et envoyez :

Voici le prompt exact à utiliser :

Write a single self-contained SVG loading indicator: three circles in a row, staggered bounce animation, 1.2s loop, colors #4F46E5 / #6366F1 / #818CF8. Output only raw SVG. Include CSS keyframes inside the SVG. viewBox 0 0 120 40.

Validation en 60 secondes :

1. Copiez la sortie dans un fichier .html vide à l'intérieur de <body>.
2. Ouvrez dans Chrome—l'animation doit boucler fluidement.
3. Inspectez la taille du fichier—attendez-vous à moins de 3 Ko.

Correction courante : Si les cercles sont coupés en haut, répondez : « Increase viewBox height by 20% and reduce bounce amplitude by 15%. »

Projet 2 : État de Survol Interactif d'un Bouton (Intermédiaire)

Objectif : Icône SVG qui morph la couleur du trait au survol—CSS pur, pas de JavaScript.

Modèle de prompt :

Voici le prompt exact à utiliser :

Create an SVG icon (24×24 logical size, scalable) of a chat bubble. On :hover via CSS inside the SVG, transition stroke from #64748B to #2563EB over 200ms ease-out. Include role="img" and <title>Chat</title>. Output raw SVG only.

Collez-le dans l'emplacement d'icône de votre site ou en ligne dans le HTML. Parce que le survol est piloté par CSS, cela fonctionne dans les pages statiques et la plupart des blocs HTML CMS.

Piège à éviter : Certains sanitizers suppriment les balises <style>. Si votre CMS supprime les styles, demandez à Gemini de « move animation to inline style attributes on each element » dans un suivi.

Projet 3 : Simulation Éducative avec Déclencheur (Avancé)

Inspiré par les éducateurs en chimie et physique utilisant Gemini pour des diagrammes interactifs, construisez une simulation en un fichier :

Voici le prompt exact à utiliser :

Generate a single-file interactive SVG illustrating a simple state machine: Idle → Loading → Success. Include a <button> inside <foreignObject> labeled “Run”. On click, animate a progress arc from 0° to 360° over 2s, then show a green checkmark. Use CSS classes toggled via minimal inline JS inside <script> within SVG (CDATA wrapped). Output only the SVG document.

Liste de vérification de test :

• Le clic du bouton se déclenche exactement une fois par cycle
• L'animation se réinitialise proprement au deuxième clic
• Aucun asset ou police externe

Si <foreignObject> échoue sur votre plateforme cible, demandez à Gemini de « replace foreignObject button with an <a> trigger using href='#run' and :target CSS pseudo-class. »

Boucle d'Itération : Comment les Pros Affinent sans Recommencer

Traitez chaque réponse comme une version, pas un brouillon :

1. Collez le SVG actuel.
2. Décrivez un changement visuel (« slower easing », « flat design, no gradients »).
3. Demandez : « Return full updated SVG; preserve viewBox and accessibility title. »

Gemini 3 gère bien les modifications spatiales lorsque vous ancrez les coordonnées (« move the center dot from (50,50) to (50,45) »).

Gemini 3.1 vs Anciens Modèles sur les Tâches SVG

Les anciens modèles souvent :

• Émettent du XML cassé (paths non fermés)
• Mélangent incorrectement les namespaces HTML et SVG
• Animent avec SMIL déprécié sans fallbacks

Les sorties de classe Gemini 3.1 rendent généralement du premier coup dans un navigateur moderne pour les tâches de loader et d'icône—toujours valider dans votre contexte d'embarquement (WordPress, Notion, clients email suppriment agressivement les scripts).

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

Checklist de Production Avant Déploiement

• Passez la sortie via W3C SVG validator ou équivalent
• Testez dans Safari + Chrome (le timing d'animation CSS diffère légèrement)
• Confirmez que le CMS ne supprime pas <style> / <script>
• Ajoutez une media query prefers-reduced-motion—demandez à Gemini de générer ceci dans un suivi
• Attribuez les assets assistés par IA selon la politique de votre org

Quand Ne Pas Utiliser Ce Workflow

Évitez l'animation SVG générée par IA quand :

• Les directives de marque exigent des composants de design-system verrouillés
• Vous avez besoin d'une intégration Lottie avec des courbes d'easing complexes déjà dans Figma
• L'environnement cible est l'email (le support SVG est incohérent)

Pour les sites marketing, les portails de docs et les outils internes, le prompt-to-SVG reste l'un des chemins les plus rapides de l'idée à l'embarquement.

Étape Suivante

Lancez le Projet 1 en direct, collez le spinner dans votre page de staging, puis itérez sur les couleurs de marque. MidassAI Chat vous offre la génération de code de classe Gemini 3 dans le navigateur—aucune configuration de projet AI Studio requise.

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

Articles associés

• Gemini 3.1 Pro : évaluer les nouveautés au travail
• Gemini 3.1 Pro vs Flash : Quel Modèle Choisir ?
• Gemini 3 : quand mettre le contexte en cache ?
• Gemini 3 : vérifier le JSON et ses preuves
• QA vidéo avec Gemini 3 : vérifier les écarts horodatés