Introduction aux animations SVG
Le format SVG (Scalable Vector Graphics) offre des possibilites d'animation incomparables par rapport aux images bitmap. Grace a sa nature vectorielle et son integration dans le DOM, chaque element d'un SVG peut etre anime individuellement avec une precision chirurgicale.
Dans ce guide complet, nous allons explorer 6 techniques d'animation SVG essentielles, du celebre effet "line draw" au morphing avance de formes. Chaque technique est accompagnee d'exemples interactifs et de code pret a l'emploi.
Les animations SVG sont legeres (quelques Ko), infiniment scalables, et ne perdent jamais en qualite. Elles sont ideales pour les icones, logos, illustrations et visualisations de donnees.
Les animations SVG peuvent etre realisees de trois manieres :
- CSS Animations/Transitions : La methode la plus simple et la plus performante
- SMIL (Synchronized Multimedia Integration Language) : Animations natives SVG, puissantes mais deprecated dans certains navigateurs
- JavaScript : Pour les animations complexes et interactives (GSAP, anime.js, etc.)
1. Animation de stroke (line draw effect)
L'effet "line draw" est probablement l'animation SVG la plus populaire. Elle donne l'impression que le dessin se trace sous vos yeux, comme si quelqu'un le dessinait en temps reel.
Cette technique repose sur deux proprietes CSS magiques : stroke-dasharray et stroke-dashoffset.
/* La magie du line draw */
.svg-line-draw path,
.svg-line-draw circle,
.svg-line-draw rect {
/* Definit la longueur du trait et de l'espace */
stroke-dasharray: 1000;
/* Decale le trait (le "cache") */
stroke-dashoffset: 1000;
/* Animation qui "revele" le trait */
animation: lineDraw 2s ease forwards;
}
@keyframes lineDraw {
to {
stroke-dashoffset: 0;
}
}Calculer la longueur exacte du path
Pour une animation parfaite, vous devez connaitre la longueur exacte de votre tracé. Utilisez JavaScript pour l'obtenir :
// Selectionnez votre element SVG
const path = document.querySelector('svg path');
// Obtenez la longueur totale
const length = path.getTotalLength();
console.log('Longueur du path:', length);
// Appliquez cette valeur
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;Utilisez une valeur volontairement elevee (comme 1000) pour stroke-dasharray si vous ne voulez pas calculer la longueur exacte. Ca fonctionne tant que la valeur est superieure a la longueur reelle du path.
2. Morphing de paths SVG
Le morphing permet de transformer fluidement une forme en une autre. C'est une technique impressionnante pour les transitions d'icones (hamburger vers croix, play vers pause, etc.).
Pour que le morphing fonctionne, les deux paths doivent avoir le meme nombre de points. C'est la contrainte principale de cette technique.
/* Transition CSS sur l'attribut d */
.svg-morph path {
transition: d 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Etat initial : triangle (play) */
.svg-morph.play path {
d: path("M30 20 L30 80 L80 50 Z");
}
/* Etat morphe : deux barres (pause) */
.svg-morph.pause path {
d: path("M25 20 L25 80 L40 80 L40 20 M60 20 L60 80 L75 80 L75 20");
}// Toggle entre play et pause
function togglePlayPause(svg) {
const path = svg.querySelector('path');
const isPlay = svg.dataset.state !== 'pause';
if (isPlay) {
// Morph vers pause (2 barres)
path.setAttribute('d', 'M25 20 L25 80 L40 80 L40 20 Z M60 20 L60 80 L75 80 L75 20 Z');
svg.dataset.state = 'pause';
} else {
// Morph vers play (triangle)
path.setAttribute('d', 'M30 20 L30 80 L80 50 Z');
svg.dataset.state = 'play';
}
}L'animation de la propriete d en CSS pur ne fonctionne que dans les navigateurs modernes (Chrome, Firefox, Safari 15.4+). Pour une compatibilite maximale, utilisez une bibliotheque comme GSAP MorphSVG ou flubber.
3. Animations CSS sur SVG
Les elements SVG acceptent la plupart des proprietes CSS animables : transform, opacity, fill, stroke, et bien d'autres. Voici les animations les plus utiles.
Rotation continue
.svg-rotate {
animation: rotate 2s linear infinite;
transform-origin: center;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
/* Variante avec steps pour effet saccade */
.svg-rotate-steps {
animation: rotate 1s steps(8) infinite;
}Pulse et Bounce
/* Effet pulse - ideal pour les notifications */
.svg-pulse {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.8;
}
}
/* Effet bounce - attire l'attention */
.svg-bounce {
animation: bounce 1s ease infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Effet shake - alertes urgentes */
.svg-shake {
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0) rotate(0); }
25% { transform: translateX(-3px) rotate(-5deg); }
75% { transform: translateX(3px) rotate(5deg); }
}Animation de couleurs
/* Animation de la couleur du stroke */
.svg-stroke-color path {
animation: strokeColor 3s ease infinite;
}
@keyframes strokeColor {
0%, 100% { stroke: #6366f1; }
33% { stroke: #8b5cf6; }
66% { stroke: #d946ef; }
}
/* Animation du fill */
.svg-fill-fade {
animation: fillFade 2s ease infinite;
}
@keyframes fillFade {
0%, 100% { fill: #6366f1; }
50% { fill: #8b5cf6; }
}4. SMIL animations (animate, animateTransform)
SMIL (Synchronized Multimedia Integration Language) permet de definir des animations directement dans le SVG, sans CSS ni JavaScript. Bien que deprecie par Chrome pendant un temps, il est maintenant supporte par tous les navigateurs modernes.
<!-- Animation d'attribut simple -->
<circle cx="50" cy="50" r="40" fill="#6366f1">
<animate
attributeName="r"
values="30;40;30"
dur="2s"
repeatCount="indefinite"
/>
</circle>
<!-- Animation de transformation -->
<rect x="30" y="30" width="40" height="40" fill="#8b5cf6">
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="3s"
repeatCount="indefinite"
/>
</rect>
<!-- Animation avec easing personnalise -->
<circle cx="20" cy="50" r="10" fill="#d946ef">
<animate
attributeName="cx"
values="20;80;20"
dur="2s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
/>
</circle>Les animations SMIL fonctionnent meme quand le SVG est utilise comme <img> ou en background-image, contrairement au CSS qui ne s'applique que sur les SVG inline.
5. Icones animees pratiques
Voici une collection d'icones animees pretes a l'emploi pour vos projets. Ces animations sont optimisees pour les micro-interactions et le feedback utilisateur.
Icone de chargement
Icones de statut
<svg width="60" height="60" viewBox="0 0 50 50" fill="none">
<!-- Cercle qui se dessine -->
<circle cx="25" cy="25" r="20" stroke="#10b981" stroke-width="3">
<animate
attributeName="stroke-dasharray"
values="0 126;126 126"
dur="0.5s"
fill="freeze"
/>
</circle>
<!-- Checkmark qui se dessine apres -->
<path d="M15 25 L22 32 L35 18"
stroke="#10b981"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round">
<animate
attributeName="stroke-dasharray"
values="0 30;30 30"
dur="0.3s"
begin="0.5s"
fill="freeze"
/>
</path>
</svg>6. Performance et accessibilite
Les animations SVG sont generalement performantes, mais quelques precautions s'imposent pour garantir une experience optimale a tous vos utilisateurs.
Optimisation des performances
- Privilegiez transform et opacity : Ces proprietes beneficient de l'acceleration GPU
- Evitez d'animer les filtres : Les
filterSVG sont couteux en ressources - Limitez le nombre d'animations simultanees : Au-dela de 10, les performances peuvent chuter
- Utilisez will-change avec parcimonie : Reservez-le aux elements vraiment animes
/* Preparation pour l'animation */
.svg-animated {
will-change: transform;
contain: layout style;
}
/* Forcer le rendu GPU */
.svg-gpu {
transform: translateZ(0);
}Accessibilite
Les animations peuvent poser probleme aux utilisateurs sensibles aux mouvements. Respectez toujours leur preference systeme :
/* Respecter la preference utilisateur */
@media (prefers-reduced-motion: reduce) {
svg * {
animation: none !important;
transition: none !important;
}
/* Afficher l'etat final pour les line draw */
.svg-line-draw path,
.svg-line-draw circle {
stroke-dashoffset: 0;
}
}Les animations SMIL (integrees dans le SVG) ne sont pas affectees par prefers-reduced-motion. Pour les desactiver, vous devrez utiliser JavaScript pour supprimer ou modifier les elements <animate>.
Texte alternatif pour SVG
<!-- SVG accessible avec role et titre -->
<svg role="img" aria-labelledby="icon-title icon-desc">
<title id="icon-title">Chargement en cours</title>
<desc id="icon-desc">Animation de chargement circulaire</desc>
<!-- Contenu SVG -->
</svg>
<!-- SVG decoratif (ignorer par les lecteurs d'ecran) -->
<svg aria-hidden="true" focusable="false">
<!-- Contenu SVG decoratif -->
</svg>Conclusion
Les animations SVG offrent des possibilites infinies pour enrichir vos interfaces. Du simple effet line draw aux morphings complexes, vous disposez maintenant d'un arsenal complet de techniques.
Les points cles a retenir :
- Line draw : Utilisez
stroke-dasharrayetstroke-dashoffsetpour l'effet de dessin - Morphing : Assurez-vous que vos paths ont le meme nombre de points
- CSS vs SMIL : CSS est plus simple, SMIL fonctionne partout (meme en img)
- Performance : Privilegiez transform et opacity
- Accessibilite : Respectez toujours
prefers-reduced-motion
Retrouvez plus de 50 icones et illustrations SVG animees pretes a l'emploi dans notre bibliotheque d'effets, avec code copiable en un clic.