Tutoriel : Les animations SVG pour le web

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('active')">
  <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.active .top {
  transform: translateY(6px) rotate(45deg);
}
.menu-icon.active .mid { opacity: 0; }
.menu-icon.active .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.observe(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.