Pourquoi animer en SVG plutôt qu’en GIF ou vidéo
Un logo animé en GIF pèse 200-500 Ko. Le même en SVG animé : 5-15 Ko. Le SVG est vectoriel (net à toute taille), léger, manipulable en CSS et JavaScript, et indexable par Google. Pour les animations d’interface — loaders, icônes, illustrations interactives — le SVG est imbattable.
Les bases du SVG pour l’animation
<!-- SVG basique : cercle + rectangle -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="#3B82F6" />
<rect x="20" y="20" width="60" height="60" rx="8" fill="#10B981" />
<!-- Le path : l'élément le plus puissant -->
<path d="M 10 80 Q 95 10 180 80 T 350 80"
stroke="#EF4444" fill="none" stroke-width="3" />
</svg>
<!-- Propriétés animables en SVG :
- fill, stroke, stroke-width (couleurs et bordures)
- opacity (transparence)
- transform (rotation, scale, translate)
- d (path data — morphing de formes !)
- stroke-dasharray, stroke-dashoffset (line drawing)
- r, cx, cy, x, y, width, height (dimensions)
-->Technique 1 : Line Drawing avec CSS
L’effet « line drawing » (dessin qui se trace) est l’animation SVG la plus populaire. Le secret : stroke-dasharray et stroke-dashoffset.
<svg viewBox="0 0 100 100" class="draw-svg">
<path class="draw-path"
d="M 10,50 Q 25,10 50,50 T 90,50"
fill="none" stroke="#3B82F6" stroke-width="2" />
</svg>
<style>
.draw-path {
/* Longueur totale du path (à mesurer avec JS ou estimation) */
stroke-dasharray: 200;
stroke-dashoffset: 200; /* Caché au départ */
animation: draw 2s ease-in-out forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0; /* Le trait se dessine */
}
}
/* Mesurer la longueur exacte avec JavaScript :
const path = document.querySelector('.draw-path');
console.log(path.getTotalLength()); // ex: 187.3
*/
</style>Logo qui se dessine
<!-- Exportez votre logo en SVG depuis Illustrator/Figma -->
<!-- Assurez-vous que les formes sont des paths, pas des textes -->
<svg class="logo-animated" viewBox="0 0 300 100">
<path class="letter" d="M10,90 L10,10 L50,10 ..." />
<path class="letter" d="M60,90 L60,10 ..." />
<path class="letter" d="M110,10 L110,90 ..." />
</svg>
<style>
.logo-animated .letter {
fill: none;
stroke: #1a1a1a;
stroke-width: 2;
stroke-dasharray: var(--length);
stroke-dashoffset: var(--length);
animation: draw-letter 1.5s ease-in-out forwards;
}
/* Décalage pour chaque lettre */
.letter:nth-child(1) { --length: 250; animation-delay: 0s; }
.letter:nth-child(2) { --length: 180; animation-delay: 0.3s; }
.letter:nth-child(3) { --length: 200; animation-delay: 0.6s; }
@keyframes draw-letter {
to { stroke-dashoffset: 0; }
}
/* Phase 2 : remplir après le dessin */
.logo-animated .letter {
animation:
draw-letter 1.5s ease-in-out forwards,
fill-letter 0.5s ease-in 1.5s forwards;
}
@keyframes fill-letter {
to {
fill: #1a1a1a;
stroke: transparent;
}
}
</style>Technique 2 : Animations CSS sur SVG
<!-- Loader SVG animé -->
<svg viewBox="0 0 50 50" class="loader-svg">
<circle class="loader-ring" cx="25" cy="25" r="20"
fill="none" stroke="#3B82F6" stroke-width="4" />
</svg>
<style>
.loader-svg {
width: 48px;
height: 48px;
animation: rotate 1s linear infinite;
}
.loader-ring {
stroke-dasharray: 80, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
</style><!-- Icône hamburger → X animée -->
<svg viewBox="0 0 24 24" class="menu-icon" onclick="this.classList.toggle('activé')">
<line class="line top" x1="4" y1="6" x2="20" y2="6" />
<line class="line mid" x1="4" y1="12" x2="20" y2="12" />
<line class="line bot" x1="4" y1="18" x2="20" y2="18" />
</svg>
<style>
.menu-icon {
width: 32px; cursor: pointer;
stroke: #1a1a1a; stroke-width: 2;
stroke-linecap: round;
}
.line {
transition: transform 0.3s ease, opacity 0.2s;
transform-origin: center;
}
.menu-icon.activé .top {
transform: translateY(6px) rotate(45deg);
}
.menu-icon.activé .mid { opacity: 0; }
.menu-icon.activé .bot {
transform: translateY(-6px) rotate(-45deg);
}
</style>Technique 3 : GSAP pour les animations complexes
// npm install gsap
import { gsap } from 'gsap';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; // Plugin premium
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Line drawing avec GSAP (sans calcul de longueur manuel)
gsap.from('.draw-path', {
drawSVG: 0, // De 0% à 100%
duration: 2,
ease: 'power2.inOut'
});
// Animation d'illustration au scroll
gsap.from('.illustration path', {
drawSVG: 0,
duration: 1.5,
stagger: 0.1, // Chaque path avec 0.1s de délai
ease: 'power2.out',
scrollTrigger: {
trigger: '.illustration',
start: 'top 80%',
}
});
// Morphing de forme (cercle → étoile)
gsap.to('.shape', {
attr: { d: 'M50,10 L61,35 L88,35 L67,52 L73,78 L50,63 L27,78 L33,52 L12,35 L39,35 Z' },
duration: 1,
ease: 'elastic.out(1, 0.3)',
yoyo: true,
repeat: -1
});Lottie : des animations After Effects sur le web
Lottie permet d’exporter des animations After Effects en JSON léger et de les lire sur le web. Un motion designer crée l’animation, un développeur l’intègre en 3 lignes de code.
<!-- Via CDN -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest"></script>
<!-- Intégration simple -->
<lottie-player
src="https://assets.lottiefiles.com/animation.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop autoplay>
</lottie-player>
<!-- Contrôle avec JavaScript -->
<script>
const player = document.querySelector('lottie-player');
// Jouer au scroll
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) player.play();
else player.stop();
});
observer.observé(player);
</script>LottieFiles.com propose des milliers d’animations gratuites. Cherchez « loading », « success », « error », « empty state » — vous trouverez des animations professionnelles prêtes à l’emploi.
Outils de création SVG animé
- SVGator — Éditeur en ligne pour créer des animations SVG sans code. Interface timeline. Plan gratuit limité, pro à ~15$/mois
- Rive — Le successeur de Lottie pour les animations interactives. Runtime léger, state machines, interactivité. Gratuit pour commencer
- After Effects + Bodymovin — Le workflow pro : animation dans AE, export JSON via le plugin Bodymovin, lecture avec Lottie
- Figma — Exportez vos designs en SVG, puis animez avec CSS ou GSAP
- SVGOMG — Optimisez vos SVG avant animation : supprime les métadonnées, simplifie les paths. Réduit la taille de 30-60%
Performance et accessibilité
/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
svg * {
animation: none !important;
transition: none !important;
}
/* Alternative : montrer l'état final sans animation */
.draw-path {
stroke-dashoffset: 0;
}
}
/* Performance : utilisez transform, pas les attributs SVG */
/* BON : animé par le GPU */
.icon { transform: rotate(0deg); transition: transform 0.3s; }
.icon:hover { transform: rotate(15deg); }
/* MAUVAIS : recalcul du layout à chaque frame */
/* circle { cx: 50; transition: cx 0.3s; } */- Ajoutez role= »img » et aria-label aux SVG significatifs
- Les SVG décoratifs : aria-hidden= »true »
- Limitez la durée — Les animations d’entrée ne devraient pas dépasser 1 seconde. Les animations en boucle (loaders) doivent être subtiles
- Pas de clignotement — Jamais plus de 3 flashs par seconde (risque d’épilepsie)
Les animations SVG sont le secret des sites web qui se démarquent. Un logo qui se dessine, un loader élégant, des icônes qui réagissent — ces micro-interactions créent une expérience mémorable. Commencez par le line drawing CSS (le plus simple et le plus impressionnant), puis explorez GSAP et Lottie pour les animations complexes.
Choisir entre animation déclarative et JavaScript impératif
Deux philosophies coexistent pour animer du SVG. La déclarative via CSS @keyframes ou la balise SMIL native (animate/animateTransform). L’impérative via JavaScript et requestAnimationFrame ou des libs comme GSAP. Le choix dépend de la complexité et de la maintenabilité visée. Pour un site WordPress de PME à Plateau qui anime un logo et 2-3 icônes, CSS suffit largement et évite la dépendance JS.
/* Animation icône check qui se trace */
@keyframes draw {
to { stroke-dashoffset: 0; }
}
.check-svg path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw 1s ease-out forwards;
}Pour des animations de tableau de bord avec plusieurs éléments synchronisés (charts qui se construisent, transitions de pages), GSAP reste le standard professionnel. Sa licence gratuite couvre la plupart des cas commerciaux depuis le rachat par Webflow en 2024.
Optimiser la taille des fichiers SVG pour le mobile africain
Un SVG exporté brut depuis Figma ou Illustrator pèse souvent 30-80 ko avec beaucoup de métadonnées inutiles. Un SVG optimisé pèse 3-12 ko, ce qui change radicalement le LCP sur 4G ouest-africaine. SVGO (svgo.dev) est l’outil de référence pour l’optimisation, accessible en CLI ou via plugins Vite/Webpack.
npx svgo --multipass icone.svg -o icone-optim.svg
# Réduit typiquement 70-85% de taillePour un déploiement automatisé, intégrez SVGO dans votre build pipeline. Les SVG passent par l’optimisation à chaque commit, et les contributeurs n’ont pas à y penser. Pour une équipe à Bamako qui produit beaucoup d’icônes, cette automatisation gagne plusieurs centaines de Ko sur la home page d’un site moyen.
Animer les data-visualisations avec D3.js
Les graphiques de tableau de bord (chiffre d’affaires mensuel, courbe de visiteurs, répartition par région) bénéficient énormément d’animations subtiles à l’apparition. D3.js est le couteau suisse pour ce cas d’usage : génération SVG dynamique depuis des données + transitions natives.
const bars = d3.select('svg').selectAll('rect')
.data(donneesVentes)
.join('rect')
.attr('x', (d, i) => i * 60)
.attr('width', 50)
.attr('y', 300)
.attr('height', 0)
.transition()
.duration(800)
.ease(d3.easeCubicOut)
.attr('y', d => 300 - d.value * 5)
.attr('height', d => d.value * 5);Sur un dashboard analytique pour un cabinet de conseil à Almadies, ce type d’animation rend les chiffres mémorables sans perturber la lecture. La règle : animation courte (300-800 ms), easing doux (cubic-out), une seule animation par interaction. Au-delà, vous saoulez l’utilisateur.
Respecter le paramètre prefers-reduced-motion
Certaines personnes souffrent de troubles vestibulaires ou de migraines déclenchées par les animations rapides. Le navigateur expose le paramètre prefers-reduced-motion via media query CSS. Toute animation non essentielle doit le respecter pour rester accessible.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Cette directive globale neutralise toutes les animations CSS pour les utilisateurs qui ont activé l’option. Pour les animations JS, appelez window.matchMedia('(prefers-reduced-motion: reduce)').matches avant de lancer une séquence et désactivez si vrai. Cette discipline coûte 5 minutes et fait la différence entre un site exclusif et un site inclusif.
Choisir entre Lottie et SVG natif selon le cas
Lottie est excellent pour les animations complexes créées dans After Effects et exportées en JSON. Son rendu SVG ou Canvas est performant sur mobile. Pour un onboarding produit ou une animation de chargement sophistiquée, Lottie reste le choix le plus rapide à implémenter.
L’inverse est aussi vrai : pour une simple animation d’icône ou un effet hover, importer la lib Lottie (40-60 ko gzippé) est disproportionné. Restez sur du SVG natif + CSS pour ces cas. La règle simple : Lottie au-delà de 5-6 keyframes ou de transformations complexes, SVG natif sinon. Dans la continuité, voir notre guide animations et micro-interactions.
Tester les performances d’animation avec DevTools
Une animation qui jank (saute) sur mobile Tecno entrée de gamme à Niamey est un échec, même si elle est fluide sur votre MacBook Pro. Chrome DevTools propose deux outils pour mesurer objectivement. L’onglet Performance enregistre 5-10 secondes d’interaction et affiche les frames perdus. L’onglet Rendering avec FPS Meter montre le frame rate en temps réel.
Cible : 60 fps stables (16,6 ms par frame). Sous 50 fps, l’animation est perçue saccadée. Les coupables fréquents sont les animations de propriétés non accélérées GPU (top, left, width au lieu de transform et opacity). Forcez la composition GPU avec will-change: transform sur les éléments animés, sans en abuser pour ne pas saturer la mémoire vidéo.
Documenter une bibliothèque d’animations réutilisables
Sur un projet qui dure plusieurs années, accumulez vos animations dans un fichier animations.css réutilisable. Chaque équipe redéfinissait fadeIn, slideUp, scaleIn dans son coin avant cette discipline. Centralisez. Pour une agence à Cocody qui livre 10 sites WordPress par an, cette bibliothèque interne fait gagner plusieurs heures par projet et garantit la cohérence visuelle.
Conventions de nommage simples (anim-fade-in, anim-slide-up-200, anim-scale-pulse), durations standardisées et easing partagé. Cette base évite les divergences subtiles entre projets et accélère l’onboarding des nouveaux développeurs. Documentez chaque animation avec un commentaire et un exemple visuel hébergé sur Storybook ou un fichier HTML statique. Lectures complémentaires, voir notre principes design interface.
Cette discipline simple évite les divergences subtiles entre projets et accélère l’onboarding. Documentez chaque animation avec un commentaire court et un exemple visuel hébergé sur Storybook. Sur un angle proche, voir notre guide principes design interface.
Une bibliothèque d’animations partagée vit ensuite plusieurs années sans réécriture, ce qui amortit largement l’effort initial.
C’est un investissement éditorial qui paie sur le long terme.
Et c’est aussi un signe de maturité d’équipe pour les recruteurs et les clients.