Les animations SVG

Animation avec SMIL

Il est possible d'animer du SVG à partir d'éléments du langage SMIL (Synchronized Multimedia Integration Language). Pour faire simple, SMIL (qui repose sur XML) permet de réaliser ce que ne peut faire CSS, à savoir contrôler les animations, créer des intéractions... Et c'est là tout son intérêt.

Mais avant de nous pencher plus en détails sur ce langage, il est important de préciser que la compatibilité des navigateurs est assez bonne. Sachez également que tous les attributs SVG ne peuvent pas être animés.

Enfin, ce langage a été déprécié sur Chrome et Opera (edit : la restriction a été levée) et n'est pas à l'étude pour Edge.

Parmi les éléments pouvant être animés, on trouve notamment :

1. <svg>
2. <g>
3. <a>
4. <path>
5. <image>

La liste complète des éléments pouvant être animés

Il existe 4 balises (Il en existait cinq, mais <animatecolor> a été dépréciée depuis. On utilisera alors <animate>.) pour créer une animation SMIL :

1. <animate>
2. <set>
3. <animateTransform>
4. <animateMotion>

Détaillons ci-dessous chacun de ces quatre éléments :

L’élément <animate> :

Pour créer une animation, nous aurons besoin de spécifier les attributs suivants :

1. attributName : spécifie l'attribut ou la propriété CSS à animer
2. attributType : spécifie le type de noeud à traiter
3. fill : permet de geler l'animation arrivée à sa fin
4. from : la valeur de départ de l'animation
5. to : la valeur finale à atteindre
6. begin : l'instant de départ de notre animation
7. dur : la durée de notre animation

Cliquez sur le carré ci-dessous :

Vous pouvez remarquer que le carré se déplace de gauche à droite, puis s'arrête. Pour ce faire, on utilise l'attribut fill auquel on ajoute la valeur freeze.

<svg width="100%" height="100"> 
<rect id="votreid" width="50" height="50" x="25" y="0" fill="#0099cc" />
<animate 
href="#votreid"
attributeName="x"
from="0"
to="450" 
dur="1s"
begin="click"
fill="freeze" />
</svg>
		

Cliquez sur le carré ci-dessous :

Vous pouvez remarquer que le carré se déplace de gauche à droite puis revient à son état initial. Ici, nous avons utilisé la valeur remove.

<svg width="100%" height="100"> 
<rect id="votreid" width="50" height="50" x="25" y="0" fill="#0099cc" />
<animate 
href="#votreid"
attributeName="x"
from="0"
to="450" 
dur="1s"
begin="click"
fill="remove" />
</svg>
		

La même chose, mais avec un cercle :

<svg width="100%" height="100"> 
<circle id="votreid" r="30" cx="50" cy="50" fill="orange" />
<animate 
href="#votreid"
attributeName="cx"
from="0"
to="450" 
dur="1s"
begin="click"
fill="remove" />
</svg>
		

Du texte animé le long d'un chemin

En rajoutant un peu de css, on peut faire des choses sympa :

Voici le code html :

<svg width="50%" height="50%" viewBox="0 0 400 300"> 
<path id="chemin" d="M 10,180 C 100,0 200,300 300,150 Q 340,100 385,120"/>
<text>
	<textPath xlink:href="#chemin" start-offset="100%">Le SVG, c’est trop fun !
		<animate attributeName="startOffset" 
		from="100%" to="-70%"
		begin="0s" dur="7s" repeatCount="indefinite"/>
	</textpath>
</text>	
</svg>
		

Voici le code css :

#chemin{
	fill:none;
	stroke:yellowgreen;
	stroke-linecap:round;
	stroke-width:1.1em; /* pour qu’il puisse contenir tout le texte */
	}

text{
	letter-spacing:2px;
	}
text > textPath{
	baseline-shift:-0.7ex;
	}
			

L’élément <set> :

Il s'agit d'un raccourci de l'élément <animate>. Il définit simplement un attribut sur une certaine valeur après qu'un intervalle de temps spécifique est passé. On utilisera cet élément lorsque l'on souhaite indiquer des attributs et ou des propriétés qui ne soient pas numériques.

<svg width="200" height="120" viewBox="0 0 200 120">
<rect style="cursor:pointer" id="anim" x="10" y="10" width="80" height="80" fill="#01FF89" >
<set begin="click" attributeName="fill" to="#7A5FFF" />
</rect>
<text x="50" y="90%" text-anchor="middle">cliquez</text>
<set begin="reset.click" attributeName="fill" to="#01FF89" href="#anim" />
<text style="cursor:pointer" id="reset" x="80%" y="90%" text-anchor="middle">Reset</text>
</svg>
		

L’élément <animateTransform> :

Cet élément permet d’animer des objets grâce à l’attribut de transformation SVG <transform>. Les valeurs pour cet élément sont :

1. translate
2. rotate
3. scale
4. skewX
5. skewY

L’élément <animateMotion> :

L'élément animateMotion permet de faire se déplacer un objet le long d'un chemin (attribut path). Il existe deux façons pour dessiner un chemin avec cet attribut.

Soit on renseigne les coordonnées dans l'attribut path comme dans l'exemple ci-dessous :

<svg width="600" height="300" viewBox="0 0 600 300">
<circle r="20" fill="var(--theme-couleur)" >
<animateMotion begin="0" dur="5s" repeatCount="indefinite" path="M 0,0 S 100,500 500,0"/>
</circle>
</svg>
		

Soit on renseigne les coordonnées dans l'attribut mpath comme dans l'exemple ci-dessous :

<svg width="600" height="300" viewBox="0 0 600 300">
<path id="exemple" d="M 0,0 S 100,500 500,0" style="fill:none"/>
<g>
<circle r="20" fill="var(--theme-couleur)"/>
<animateMotion begin="0" dur="5s" repeatCount="indefinite">
<mpath href="#exemple"/>
</animateMotion>
</g>
</svg>