 Retrouvez cet article dans : Linux Pratique 48
Dans le numéro précédent, vous avez pu découvrir et vous familiariser avec le format SVG, un langage basé sur XML, qui permet de décrire des dessins vectoriels en deux dimensions. Après avoir visualisé la structure de base d’un document SVG, ainsi que la description de divers éléments (formes géométriques, chemins, liens, gradients de couleur, texte, images), nous irons un peu plus loin ici en abordant les styles et transformations que l’on peut affecter aux objets SVG, pour finir par les animations grâce au SVG dynamique.
Styles et CSS
Comme vous avez déjà pu le remarquer dans les exemples déjà présentés, SVG permet d’affecter des styles aux éléments. Tout comme en X/HTML, ceci est réalisable de deux manières différentes :
- via l’utilisation de l’attribut
stylequi permet de déclarer le style dans la balise de l’élément lui-même ; - via l’utilisation de l’attribut
class, qui permet de référencer un style prédéfini dans une feuille de style CSS interne ou externe (via une instruction<?xml-stylesheet?>).
Exemples :
Transformations
SVG possède un système de transformations applicables aux objets ou groupes d’objets déclarés. Il s’agit en fait de transformations mathématiques entre systèmes de coordonnées. SVG propose les transformations suivantes :
translate(x,y) : translation de l’élément aux coordonnées (x,y) ;scale(Nx,Ny) : mise à l’échelle avec les ratios Nx pour les abscisses et Ny pour les ordonnées (par défaut Nx=Ny) ;rotate(deg,cx,cy) : rotation de deg degrés, à partir du point (cx,cy) (par défaut ce point est l’origine du système de coordonnées courant) ;skewX(deg)etskewY(deg) : inclinaison sur l’axe des abscisses ou des ordonnées ;matrix(a b c d e f) : transformation mathématique de changement de coordonnées, correspondant à la formule matricielle suivante :
Exemples : voir tableau 2.
Mixage avec du XHTML
Un des intérêts du langage SVG est qu’il peut être mixé ou imbriqué avec d’autres langages XML, comme le XHTML. Ainsi, à condition que le navigateur Web le supporte (ce qui est le cas de Firefox par exemple), il est possible de mélanger dans un même document XML des éléments XHTML et SVG en utilisant des namespaces (espaces de noms) différents, voire mieux, comme on le verra plus loin dans cet article, d’interagir avec les objets SVG depuis du code JavaScript inclus dans la page XHTML.
Pour ce faire, il est nécessaire d’indiquer au client le bon type MIME, qui est : application/xhtml+xml. Cela peut être fait en modifiant la configuration de votre serveur Web ou en modifiant l’en-tête HTTP envoyé par chaque page via un langage comme PHP (Tab. 3)
SVG dynamique
Scripts et évènements
SVG implémente la norme DOM2 du W3C et est donc manipulable via JavaScript de manière similaire Ã
X/HTML. Ainsi, chaque élément d’un document SVG et chaque attribut d’un élément pouvent être dynamiquement modifiés.
En outre, SVG dispose d’un système d’évènements similaire à X/HTML. On retrouve notamment les classiques onload, onunload, onclick, omouseup, onmousedown, onmouseover, onmousemove, onmouseout,... mais aussi des évènements plus spécifiques, comme ceux relatifs aux animations : onbegin, onend, onrepeat.
L’exemple suivant modifie la couleur d’un élément SVG lorsque l’utilisateur clique dessus :
<?php
header("Content-type: application/xhtml+xml");
?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<h3>Cliquez sur le cercle</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<circle id="monDessin" cx="70" cy="70" r="40" stroke="black" stroke-width="2" fill="red"/>
<script>
<![CDATA[
function doClick(e) {
document.getElementById("monDessin").setAttribute("fill", "blue");
alert(e.type);
}
document.getElementById("monDessin").onclick = doClick;
]]>
</script>
</svg>
</body>
</html>
Animations
La norme SVG contient également la définition d’animations, inspirées du langage SMIL (Synchronized Multimedia Integration Language) défini par le W3C. Les animations consistent en des changements de valeurs d’attributs d’éléments (ou de groupes d’éléments). Il s’agit d’animations basées sur le temps et non sur des frames comme dans la technologie Flash. Il faut donc indiquer le départ et la durée de chaque animation, qui peut alors faire varier n’importe quel attribut SVG. Les animations peuvent en outre se dérouler en parallèle et être déclenchées par des évènements utilisateurs.
Les animations ne sont pas (encore) supportées par tous les clients SVG. Le tableau suivant fait le point sur ce sujet.
 SVG dispose de plusieurs balises dédiées aux animations, à insérer dans l’élément à animer :
animate : variation d’un attribut au cours du temps ;set : modification simple d’un attribut pour une durée spécifiée ;animateColor : transition de couleur au cours du temps ;animateMotion : déplacement de l’élément le long d’un chemin (cf.<path>décrit plus haut) ;animateTransform : contrôle de l’application de transformations SVG sur l’élément (cf.<transform>plus haut).
Exemples : voir tableau 5.
Dans les exemples précédents, les animations sont déclenchées au bout d’un certain nombre de secondes, précisé via l’attribut begin. Il est également possible
d’associer ce déclenchement à un évènement utilisateur, par exemple avec begin=’’mouseover’’.
Des animations plus complexes peuvent être obtenues en parallélisant des animations simples. Les animations disposent de nombreux paramètres pour contrôler leurs déroulés et leurs enchaînements. Ils ne sont pas détaillés ici par souci de concision et de simplification.
Conclusion
Cette brève introduction au langage SVG n’avait pas pour but d’être exhaustive. Ainsi, un certain nombre d’éléments n’ont pas été abordés, comme les motifs (objets réutilisables pour le remplissage), les filtres (comme les flous gaussiens), les markers (objets graphiques utilisés en terminaison d’un tracé, par exemple une flèche à la fin d’une ligne), les techniques de clipping, de masking et de composition.
SVG est un langage puissant, au centre de l’enjeu actuel de disposer d’un internet graphique ouvert et standardisé. Outre le support de l’audio et du pré-téléchargement, ses manques par rapport au format propriétaire Flash sont surtout au niveau des animations.
Espérons donc que, dans un futur proche, les clients SVG supporteront mieux les animations et que des outils libres de conception d’animations verront le jour !
Liens
- La norme SVG : http://www.w3.org/Graphics/SVG/
- Le wiki de svg.org : http://wiki.svg.org
- L’éditeur Inkscape de SVG statique : http://www.inkscape.org
- L’archive publique de cliparts SVG : http://www.openclipart.org
Des exemples d’utilisation de SVG dynamique sur le Web :
- Montre analogique : http://www.jasonkarldavis.com/scripts/svgclock/clock-moz.svg
- Jeu Tetris : http://croczilla.com/svg/samples/svgtetris/svgtetris.svg
 Retrouvez cet article dans : Linux Pratique 48
