Le SVG

L'animation en SVG

L'animation via SMIL

Afin de pouvoir être animable, le SVG à été développé en collaboration avec les développeurs du SMIL. Le SMIL est une autre recommandation du W3C, visant l'écriture de présentation multimédia interactive. Pour en savoir plus sur le SMIL, c'est par .

Le SVG incorpore 5 balises différentes de SMIL Animation afin de gérer ses animations. Un élément notable est qu'à l'heure où j'écris ces lignes, aucun navigateur n'est pleinement compatible avec ces éléments. Si les exemples ne fonctionnent pas sur votre navigateur, je vous conseille d'installer le navigateur Opera (10.51+).

La balise animate

Cette balise permet d'animer un seul attribut (ou propriété) au cours du temps.

Pour savoir ce qui peut ê animé au cours du temps, c'est par .

Exemple:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px">
	<rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px">
		<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"/>
	</rect>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.

Hum, loupé...

Pour l'instant, je vais passer sous silence les différents attributs de la balise animate. En effet, tout ces attributs sont communs avec la plus part des balises d'animation, je les expliquerai donc à la fin.

La balise set

La balise set est un moyen simple de fixer la valeur d'un attribut pour une période donnée.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
	width="120px" height="70px">
	<rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px">
		<set attributeName="fill" to="red" begin="mouseover" end="mouseout" />
	</rect>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.

Hum, loupé...

La balise animateMotion

Cette balise permet, comme son nom l'indique, la modification de la position d'une figure (ou d'un groupe) au cours du temps. Il existe plusieurs moyen de spécifier cette position, soit par un jeu de valeurs (x,y), soit par l'utilisation d'un tracé.

L'exemple qui suit montre l'utilisation d'un tracé, il provient directement de la recommandation W3C du SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Exemple animMotion01 - illustre les calculs d'animation du mouvement</desc>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <!-- Dessine le contour du tracé de mouvement en bleu, avec
          trois petits cercles au début, au milieu et à la fin. -->

  <path d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />

  <!-- Voici un triangle qui se déplacera sur le tracé de mouvement.
       Il est défini avec une orientation verticale, la base du triangle étant
       centrée horizontalement juste au-dessus de l'origine. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >

    <!-- Définit l'animation sur le tracé de mouvement -->
    <animateMotion dur="6s" repeatCount="indefinite"
                   path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
  </path>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.

Hum, loupé...

La balise animateColor

Cette balise permet de changer la couleur d'un objet au cours du temps.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px">
	<rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px">
		<animateColor attributeName="fill" values="red;green;blue;green;red" dur="5s" repeatCount="indefinite"/>
		<animateColor attributeName="stroke" values="green;blue;red;blue;green" dur="5s" repeatCount="indefinite"/>
	</rect>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.

Hum, loupé...

La balise animateTransform

Cette dernière balise permet la gestion des transformations au cours du temps.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" height="70px">
	<rect x="30px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px">
		<animateTransform additive="sum" attributeName="transform" type="skewX" values="0;20;0;-20;0" dur="2s" repeatCount="indefinite"/>
	</rect>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous.

Hum, loupé...

Les attributs de synchronisation

Au travers ces différents exemples, nous avons vu différentes maniéres de synchroniser nos animations. Voyons maintenant la signification des différents attributs:

Les attributs de gestion de valeurs

Il existe plusieurs attributs pour spécifier les valeurs de l'animation:

Les attribut de succéssion d'animation

C'est le dernier d'attributs possibles, et il n'y a que deux attributs :

L'animation via ECMAScript

Un autre moyen d'animer le SVG et d'utiliser son DOM. Selon wikipédia, "Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté."

Il se représente généralement comme un arbre que l'on peut parcourir et modifier à souhait. Pour le SVG le meilleur moyen d'y arriver est par le biais de l'ECMAScript, et plus particulièrement du JavaScript. L'avantage de ce type d'animation est qu'il fonctionne sur la plus part des navigateurs actuel.

Expliquer le fonctionnement du JavaScipt dans le SVG reviendrait à tout simplement essayer de vous enseigner le JavaScript, ce qui pourrait faire l'objet d'un exposé complet. Vous trouverez donc ici un seul exemple, attestant de la bonne interaction du JavaScript avec SVG.

Le code Javascript :

var oldcol;

function colorme(evt) {
	var rect = evt.target;
	
	oldcol = rect.getAttribute("fill");
	rect.setAttribute("fill", "blue");
}

function uncolorme(evt) {
	var rect = evt.target;
	
	rect.setAttribute("fill", oldcol);
}

Le code SVG :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1" width="120px" height="70px" onload="init();">
	<defs>
		<script type="text/ecmascript" xlink:href="../script/jssetrect.js"/>
	</defs>
	<rect id="monrect" x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" 
			fill="#ffcc00" stroke="#ff9900" stroke-width="2px"
			onmouseover="colorme(evt)" onmouseout="uncolorme(evt)"/>
</svg>

Si votre navigateur est compatible, vous devriez voir l'animation ci-dessous. (passez votre souris sur le rectange)

Hum, loupé...