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>

🚀 Découvrez quelques animations de SVG sur le site de la Station Spatiale. 🚀

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>

Après quelques lignes de code en plus, voici le résultat :

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;
  }
}

Voici le résultat du cube animé :

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;
  }
}

Voici le SVG Matching animé :

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

Par ici pour apprendre a créer des SVG optimisés sur Illustrator.