Les animations SVG dans le web

Les animations SVG envahissent de plus en plus le web 2.0. De nombreuses techniques existent aujourd’hui afin d’y parvenir.

Les animations SVG envahissent de plus en plus le web 2.0. De nombreuses techniques existent aujourd’hui afin d’y parvenir. Voici quelques exemples :

  • SMIL : non supporté par internet explorer
  • Javascript : Snapsvg et bien d’autres
  • CSS

Avant d’animer vos SVG dans le web, il vous faut les créer ! Par ici pour apprendre a créer des SVG optimisés sur Illustrator.

Quelques bonnes pratiques d’animations SVG en CSS

Les animations SVG en CSS peuvent s’avérer désastreuses pour votre site. En effet, si certaines bonnes pratiques ne sont pas mis en place, les animations peuvent causer d’importants ralentissements.

1. Inclure le SVG dans une balise <img>

Pour animer un SVG avec 3000 lignes de codes, nous devons prendre des précautions. Afin d’éviter de surcharger votre DOM avec des nœuds inutiles, il est possible d’inclure votre fichier dans le HTML comme montré ci-dessous :

<img src="my.svg" alt="My SVG">

Votre DOM préférera cette ligne de code plutôt que les 3000 lignes de votre SVG.

2. Inclure le CSS directement dans votre SVG

Le format SVG supporte la balise <style>. Il peut donc contenir ses propriétés et ses animations directement dans son propre fichier. Voici un exemple :

<svg>  
   <style>   
      .bg-blue {     
         fill: #121921;   
      }  
   </style>  
   <rect class="bg-blue"/> 
</svg>

Quelques exemples d’animations SVG

Exemple 1 : SVG « Time Money » en Morphing SMIL

Notre premier exemple consiste à transformer une forme en une autre. C’est la technique du morphing. Les considérations à prendre en compte sont les suivantes :

  • Les formes avec morphing doit avoir le même nombre de points
  • Les valeurs des <path> doivent avoir des instructions similaires

Ci-dessous, un exemple de morphing avec la balise <animate> à inclure dans un <path> SVG.

<path>   
   <animate      
      attributeName="d"     
      begin="0s"     
      dur="4s"     
      fill="freeze"     
      values="       
      M 400 150 C 200 150 200 450 400 450 C 600 450 600 150 400 150;       
      M 450 150 C 300 150 300 300 300 300 C 300 450 450 450 450 450;       
      M 450 150 C 300 150 300 300 300 300 C 300 450 450 450 450 450;       
      M 450 150 C 300 150 300 300 300 300 C 300 450 450 450 450 450;       
      M 400 150 C 200 150 200 450 400 450 C 600 450 600 150 400 150   
   ">   
   </animate> 
</path>

Exemple 2 : Animation SVG Cube en CSS

Dans cette animation, nous allons modifier la largeur des traits de nos cubes. Le code CSS doit ressembler à ça :

.animation-cube {   
   animation: strokewidth 3s linear infinite;   
   -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */   
   -moz-animation-fill-mode: forwards; /* FF 5+ */   
   -ms-animation-fill-mode: forwards; /* IE 10+ */ 
}  

@keyframes strokewidth {   
   0% {     
      stroke-width: 1;   
   }   
   50% {     
      stroke-width: 3;   
   }   
   100% {     
      stroke-width: 1;   
   } 
}

Exemple 3 : SVG Matching en CSS

Pour notre troisième animation, nous vous expliquons comment faire un effet animé « circuit électrique » en CSS.

.animation-circuit {   
   stroke-dashoffset: 100%;   
   animation: strokedashoffset 5s linear infinite;   
   -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */   
   -moz-animation-fill-mode: forwards; /* FF 5+ */   
   -ms-animation-fill-mode: forwards; /* IE 10+ */ 
}  

@keyframes strokedashoffset {   
   0% {     
      stroke-dashoffset: 0;   
   }   
   50% {     
      stroke-dashoffset: 100%;   
   }   
   100% {     
      stroke-dashoffset: 0;   
   } 
}

Enfin, voici comment allumer ou éteindre la lumière de notre SVG.

.animation-light {   
   animation: kopacity 5s linear infinite;   
   -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */   
   -moz-animation-fill-mode: forwards; /* FF 5+ */   
   -ms-animation-fill-mode: forwards; /* IE 10+ */ 
}  

@keyframes kopacity {   
   0% {     
      opacity: 0;   
   }   
   50% {     
      opacity: 1;   
   }   
   100% {     
      opacity: 0;   
    } 
}

Tout cela vous a inspiré ? A vous de jouer ! 🚀

Les articles du même thème