version 1.43, dernière mise à jour le 12 janvier 2010.
SVG signifie Scalable Vector Graphics. Ce langage permet d'écrire des graphiques vectoriels 2D en XML. Il a été inventé en 1998 par un groupe de travail (comprenant Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple,
Corel, HP, ILOG...) pour répondre à un besoin de graphiques légers, dynamiques et interactifs.
Une première ébauche du langage est sortie en octobre 1998 et en juin 2000 apparaît la première version du Viewer Adobe (plugin permettant de visualiser le SVG). Le SVG s'est très vite placé comme un concurrent de Flash et à ce titre, Adobe a intégré ce langage dans la plupart de ses éditeurs (dont les principaux sont Illustrator et Golive).
Cependant, comme Flash est désormais un produit bien installé, notamment en publicité et sur les sites « branchés », SVG semble plus adapté aux contextes suivants :
visualisation de contenus (économiques, processus, cartes, etc.) au format XML, associée à JavaScript+DOM, ou bien à des transformations XSLT... ;
interface utilisateur pour certains types d'applications Internet (comme par exemple Firefox) ;
interfaces pour des outils de consultation particuliers (par exemple avec une faible bande passante)
dessins statiques, animés ou même interactifs dans le monde de l'éducation.
Les raisons pouvant pousser à l'adoption d'un format comme SVG sont nombreuses :
Liées aux avantages du graphisme vectoriel :
Adaptation de l'affichage à des media variés et à des tailles différentes ;
Possibilité d'appliquer des styles ;
Possibilité d'indexer le texte qui fait partie du graphisme ;
Taille de l'image après compression ;
Facilités d'édition : les éléments sont des objets, des hiérarchies, etc.
Liées aux avantages particuliers du format SVG :
Insertion dans le monde XML/XHTML :
Génération de SVG avec XSLT à partir de données XML ;
Intégration totale dans XHTML, viewers SMIL, etc.
Utilisation de CSS ;
Scriptable avec JavaScript via le DOM.
Possibilité de mélanger des grammaires XML entre elles : un document HTML peut contenir des gaphiques SVG, des expressions mathématiques en MathML, des présentations en SMIL...
Modèle de couleurs sophistiqué, filtres graphiques (comme dans PhotoShop) ;
Possibilité d'indexage par les moteurs de recherche (c'est un fichier texte !) ;
Possibilité de partager du code (format texte non propriétaire) ;
Une liste complète des implémentations de SVG est disponible sur le site du W3C.
Comme SVG est un format XML, n'importe quel éditeur de texte fait en théorie l'affaire. Il est néanmoins recommandé d'utiliser de préférence un éditeur
dédié à XML si l'on choisit cette option, comme WebDraw de Jasc, ou InkScape. Adobe Illustrator, Corel Draw permettent aussi d'exporter au format SVG -et cela pour ne parler que des logiciels les plus connus. Google a lancé en 2010 un éditeur SVG en ligne.
SVG n'est actuellement pas supporté en natif par tous les navigateurs. On distingue plusieurs degrés d'avancement :
Internet Explorer ne le supporte pas en natif. Il est donc nécessaire d'installer soi-même un plugin. Le plus répandu d'entre eux est, à la date de révision de ce cours (mars 2008), le plugin SVG Viewer 3.03, téléchargeable gratuitement sur le site d'Adobe : http://www.adobe.com/svg/
FireFox, à partir de sa version 1.5, a entrepris de supporter en natif le format SVG, mais son support reste partiel. Le panorama du support SVG de FireFox donne néanmoins un aperçu des fonctionnalités de ce format.
Opera a commencé à prendre en charge le SVG dans sa version 8.0. Le support SVG d'Opera inclut maintenant des animations.
Un fichier SVG commence par une déclaration de version XML standard, comme par exemple
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
Il faut alors ajouter le DocType correspondant à la version SVG utilisée :
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
Il est cependant préférable, en cours de développement, de copier localement la DTD de SVG, et d'y accéder en local :
<!DOCTYPE svg SYSTEM "svg10.dtd">
La version 1.1 de la DTD SVG existe également, mais représente une évolution en terme de modularisation hors de propos ici.
La racine d'un fichier SVG est un élément... svg. Mais il est nécessaire de définir deux espaces de noms, un par défaut et un second permettant d'avoir accès à d'autres fonctionnalités
que nous verrons par la suite, comme suit :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink">(..)
</svg>
La taille de la fenêtre SVG est définie par les attributs width et height de l'élément <svg> : <svg width="400" height="250" xmlns="http://www.w3.org/2000/svg">
À moyen terme on devrait pouvoir insérer directement du code SVG dans du code XHTML. Certaines variantes de Mozilla possèdent cette fonctionnalité avec un sous-ensemble de SVG.
La version canonique demande d'utiliser la balise <object>. On peut en consulter un exemple sur le site de l'INSEE avec l'évolution des prix à la consommation depuis 2000.
La solution la plus souple d'emploi reste d'utiliser un environnement <iframe>. Par exemple :
<iframe src="salut-tout-le-monde.svg" height="540" width="95%" frameborder="0">
<p>(Contenu alternatif: image+texte, texte seulement...)</p>
</iframe>
SVG définit un certain nombre d'éléments graphiques de base. Voici la liste des éléments les plus importants :
Texte avec text ;
Rectangles rect ;
Le cercle circle et l'ellipse ellipse ;
Lignes line et poly-lignes polyline ;
Polygones ;
Formes arbitraires avec path.
Chaque élément graphique est représenté par un élément XML qui est paramétrable avec des attributs XML et hérite d'attributs de ses parents.
Comme dans d'autres langages vectoriels (par exemple VRML), il existe des formes géométriques de base (rectangle, ellipse, cercle, lignes, poly-lignes et polygone). Il existe également
une méthode permettant de produire des formes complexes.
Il faut se référer à la spécification pour connaître tous les détails. Ici, nous ne montrons en règle générale qu'un petit extrait, car leur nombre est énorme !
La plupart des éléments se partagent un nombre commun d'attributs comme par exemple l'attribut id (identificateur) ou encore style (les propriétés de style suivent les règles du CSS2).
La plupart des valeurs d'attributs sont assez intuitives (pour ceux qui connaissent un peu CSS). En revanche pour certains il existe de véritables sous-grammaires (voir la création de formes arbitraires avec path par exemple)
Les objets SVG se positionnent dans un système de coordonnées qui commence en haut et à gauche (pratique standard en graphisme informatique).
Il est possible de travailler avec des coordonnées locales.
Les unités à utiliser sont les mêmes qu'en CSS2.
Chaque objet peut être translaté, orienté et changé de taille. Il hérite des transformations de l'objet parent.
SVG définit quelques dizaines d'attributs-propriétés applicables à certains éléments. En ce qui concerne les éléments graphiques,
voici les deux plus importants :
stroke définit la forme du bord d'un objet ;
fill définit comment le contenu d'un objet est rempli.
SVG possède deux syntaxes différentes pour définir la mise en forme d'un élément :
L'attribut style reprend la syntaxe et les styles de CSS2 ;
Pour chaque style, il existe aussi un attribut de présentation SVG. Cela simplifie la génération de contenus SVG avec XSLT.
Par exemple :
<rect x="200" y="100" width="60" height="30" fill="red" stroke="blue" stroke-width="3" />
Le code précédent a le même effet que :
<rect x="200" y="100" width="60" height="30" style="fill:red;stroke:blue;stroke-width:3" />
fill permet de gérer le remplissage de l'élément. Ses propriétés sont :
la couleur, avec les mêmes conventions de représentation qu'en CSS (exemple précédent : fill="red").
l'URI d'une couleur, d'un gradient de couleur (pour obtenir un effet de dégradé) ou d'un motif de remplissage.
une valeur d'opacité (opacity), comprise entre 0 et 1. Voir l'exemple opacite.svg.
stroke permet de gérer l'entourage d'un élément de dessin. Ses propriétés sont :
la couleur, avec les mêmes conventions de représentation qu'en CSS (exemple précédent : fill="red").
l'uri d'une couleur, d'un gradient de couleur (pour obtenir un effet de dégradé) ou d'un motif de remplissage.
une valeur d'opacité (opacity), comprise entre 0 et 1.
l'épaisseur (width) du trait ;
la jonction de ligne (linejoin), qui peut prendre les valeurs miter, round ou bevel. Voir l'exemple strokejoin.svg.
la forme des angles (linecap) qui peut être butt( les lignes s'arrêtent brutalement à leur fin), round ou square (des carrés sont tracés en bout de chaque ligne). Voir l'exemple strokecap.svg.
des pointillés éventuels avec la propriété dasharray, qui doit prendre comme valeur, si spécifiée, une chaîne de valeurs numériques séparées par des espaces. Voir par exemple
strokedash.svg. On peut spécifier un décalage de démarrage des pointillés avec la propriété dashoffset.
L'élément rect permet de définir des rectangles, y compris avec des coins arrondis sans passer par une modification de l'attribut stroke-linejoin. Les attributs de base sont :
x et y, qui donnent la position du coin supérieur gauche.
width et height, qui permettent de définir respectivement largeur et hauteur du rectangle.
rx et ry, qui sont les axes x et y de l'ellipse utilisée pour arrondir ; les nombres négatifs sont interdits, et on ne peut dépasser
la moitié de la largeur (longueur) du rectangle.
Voir l'exemple rectangle.svg.
Un cercle est créé par l'élément circle et une ellipse par l'élément... ellipse. Leurs attributs sont :
cx et cy qui définissent les coordonnées du centre.
r qui définit le rayon du cercle.
rx et ry qui définissent les demi-axes x et y de l'ellipse.
Voir l'exemple cercleellipse.svg.
Une ligne est définie avec l'élément line, une poly-ligne par l'élément... polyline.
Les attributs de line sont :
x1 et y1, qui définissent les coordonnées du point de départ.
x2 et y2, qui définissent les coordonnées du point d'arrivée.
L'attribut de base de polyline est points, qui prend comme valeur une suite de coordonnées. Voir l'exemple lignes.svg pour plus de détails.
Un polygone est une courbe fermée, une poly-ligne une courbe ouverte. L'élément permettant de définir un polygone est polygon. L'attribut de base de cet élément est points, qui s'utilise de la même manière qu'avec une polyligne. Voir des exemples dans le fichier polygones.svg.
L'élément path permet de définir des formes arbitraires. Ces formes peuvent avoir un contour et servir de support pour d'autres éléments
(voir plus loin un exemple avec du texte).
Ces attributs sont au nombre de 2 :
d, au nom peu explicite, sert à définir les path data, autrement dit la liste de commande permettant de tracer le chemin.
nominalLength, facultatif, permet de définir éventuellement la longueur totale du chemin.
Les path data suivent les règles suivantes :
Toutes les instructions peuvent être abrégées en un seul caractère
Les espaces peuvent être éliminés
On peut omettre de répéter une commande
Il existe toujours deux versions des commandes :
en majuscules : coordonnées absolues
en minuscules : coordonnées relatives
Ces règles visent à diminuer au maximum la taille requise par la description des chemins. Les commandes sont :
M ou m (moveto) x,y démarre un nouveau sous-chemin
Z ou z (closepath) ferme un sous-chemin en traçant une ligne droite entre le point courant et le dernier moveto
lineto
L ou l (lineto) x , y trace une ligne droite entre le point courant et le point (x,y).
H ou h (horizontal lineto) x trace une ligne horizontale entre le point courant et le point (x,y0).
V ou v : (vertical lineto) y trace une ligne verticale entre le point courant et le point ( x0,y ).
Il existe également des commandes permettant de tracer des courbes (courbes de Bézier, arcs...).
Un exemple de tracé simple et un autre de tracé de courbes sont visibles dans le fichier path.svg.
L'élément balise text est considérée comme un objet graphique, et est donc gérée comme tel. Il possède deux attributs : x et y, qui donnent les coordonnées du point de départ du texte. La mise en forme est réalisée par des propriétés de style CSS.
À l'intérieur d'un élément text, on peut ajuster la position du texte, sa valeur ou la police grâce à l'élément tspan. Cet élément possède, outre les attributs x et y, des attributs dx et dy permettant de spécifier les décalages à apporter dans l'écriture du texte par rapport à la position par défaut. Voir par exemple le fichier texte.svg.
Il est possible d'écrire un texte le long d'un chemin (path) défini par ailleurs, par un élément path en appelant un élément textPath. Voir l'exemple textpath.svg.
Chaque langage informatique de haut niveau doit permettre de regrouper des objets dans des blocs, de les nommer et de les
réutiliser. SVG possède plusieurs constructions intéressantes.
Il faut noter également que les objets SVG (comme les objets HTML) héritent le style de leurs parents. Autrement dit, les styles « cascadent » le long de l'arborescence. Voici la liste des
éléments les plus importants. Notez qu'il faut se référer à la spécification pour connaître tous les attributs de ces éléments.
Ici, nous ne montrons qu'un petit extrait.
Le fragment d'un document SVG : svg ;
Groupage d'éléments avec g ;
Objets abstraits (chablons) symbol ;
Section de définition def ;
Utilisation d'éléments use ;
Titre title et description desc.
svg est la racine d'un graphisme SVG. Mais on peut aussi imbriquer des éléments svg parmi d'autres et les positionner. Chaque svg crée un nouveau système de coordonnées. Ainsi on peut facilement réutiliser des fragments graphiques sans devoir modifier
des coordonnées. Voir l'exemple salut2.svg.
Cet élément sert à regrouper les éléments graphiques, ainsi que vous avez pu le constater en regardant le code source des exemples précédents. En voici une autre illustration avec g.svg. Notez l'héritage des propriétés, mais aussi leur redéfinition locale possible.
Cet élément permet de définir des objets graphiques réutilisables en plusieurs endroits, avec l'élément use. symbol ressemble à g, sauf que l'objet lui-même n'est pas dessiné. Cet élément possède des attributs supplémentaires, comme viewBox et preserveAspectRatio, dont nous ne parlerons pas.
Cet élément ressemble un peu à symbol, mais est plus simple. De même, l'objet défini n'est pas dessiné.
use permet de réutiliser les objets suivants : svg, symbol, g, les éléments graphiques et use. Cet élément se comporte légèrement différemment selon le type d'objet défini (voir la spécification). Il s'agit donc d'un instrument de base pour éviter de répéter du code.
Les objets réutilisés doivent avoir un identificateur XML. Par exemple, <rect id="rectanglerouge" fill="red" width="20" height="10"/>.
Les attributs x, y, width et height permettent de redéfinir la taille et la position de l'élément appelé. xlink:href permet de renvoyer à l'élément défini. Voir par exemple les fichiers use.svg, use2.svg et use3.svg.
Ces éléments permettent de documenter le code. Ils ne sont pas affichés tels quels. En revanche, un outil de consultation
peut par exemple décider de les afficher comme des infobulles. Ces documentations peuvent être utiles pour principalement
deux raisons : éventuellement mieux comprendre le code (même s'il est bien sûr toujours possible de le faire via des commentaires <!-- (...) --!>), mais aussi permettre un meilleur référencement du SVG par un moteur de recherche.
Les formats supportés sont jpeg et png. L'élément image permet également d'insérer un autre fichier SVG. Les attributs sont :
x et y, qui définissent la position de l'image ;
width et height, qui définissent la taille de l'image ;
xlink:href indique l'URI de l'image (équivalent de l'attribut src de l'élément img en HTML.
Cet élément possède également un attribut supplémentaire, preserveAspectRatio.
L'attribut supplémentaire preserveAspectRatio permet de définir la manière dont l'affichage de l'image doit s'adapter à son cadre. Il est utilisé également pour nombre
d'autres éléments, dont par exemple symbol, ce qui explique que la description suivante se place souvent dans la perspective d'un élément à redimensionner non limité
à un unique rectangle. Il peut prendre plusieurs valeurs :
rien (valeur par défaut) : la mise à l'échelle est telle que les valeurs extrêmes en x et en y touchent les bords du rectangle de point de vue.
xMinYmin : mise à l'échelle uniforme. La plus petite largeur de l'image est ajustée à la plus petite largeur du cadre.
xMidYMin mise à l'échelle uniforme. La valeur moyenne des x de l'élément est ajustée à la valeur moyenne des x du cadre.
Il y a aussi toutes les autres variantes en Min, Max et Mid pour chacune des deux coordonnées.
Cet attribut peut également prendre comme valeur un paramètre, meet ou slice, optionnel :
meet (valeur par défaut) met à l'échelle le graphique de sorte que le rapport d'aspect soit préservé, tous les éléments soient
visibles (pour une image, qu'elle ne soit pas coupée), et que le cadre soit calculé le plus large possible.
slice met à l'échelle le graphique de telle sorte que le rapport d'aspect soit préservé, tous l'esapce du cadre soit occupé par
la boîte, et que le cadre soit calculé le plus petit possible.
Une illustration complète est visible avec le fichier preserveaspectratio.svg.
Jusqu'à présent, nous avons vu comment placer des éléments graphiques parfois complexes dans un cadre donné. Afin d'aller
plus loin, il serait possible d'explorer dans le détail la manière dont le format SVG gère les systèmes de coordonnées, et de faire une étude détaillée des transformations et changements de repère d'un point
de vue mathématique -le seul à même de produire une démarche rigoureuse de l'ensemble des transformations à appliquer pour
obtenir un effet voulu. Nous allons cependant ici nous contenter d'aborder chaque transformation indépendamment, tout en gardant
présent à l'esprit que ce système de transformations est extrêmement complexe.
Cet attribut est disponible pour l'ensemble des éléments de groupement (par exemple <g>), aussi bien que pour tous les éléments graphiques (figures géométriques, texte, etc.). Il accepte un certain nombre de paramètres
permettant d'opérer translations, rotations, redimensionnement, transformations quelconques avec une matrice, etc.
La syntaxe est par exemple <g transform="translate(50, 40)">, permettant d'opérer un déplacement du groupe de 50 pixels vers la droite, et 40 pixels vers le bas. Le code suivant...
<rect width="100" height="50" x="10" y="50" transform="translate(10,-20)" />
... déclare un rectangle placé initialement au point de coordonnées (10,50), mais translaté de 10 pixels vers la droite et 20 pixels vers le haut, ce qui le place finalement au point de coordonnées (20,30).
La syntaxe est scale(<sx>[,<sy>]). Lorsque sy n'est pas indiqué, on considère que sy=sx.Attention, le système de coordonnées est modifié. Le code suivant...
<rect width="100" height="50" x="10" y="50" transform="scale(2)" />
... déclare un rectangle de 100 pixels de large et 50 pixels de haut, placé initialement au point de coordonnées (10,50). Une fois mis à l'échelle, ici augmenté d'un facteur 2 dans les deux directions, il devient un rectangle de 200 pixels de large et 100 pixels de haut, placé au point de coordonnées (20,100).
La syntaxe est rotate(<rotate-angle> [<cx>,<cy>]). L'angle de rotation est indiqué en degrés. cx et cy définissent le centre de rotation. Attention ! Par défaut, il s'agit de l'origine du système de coordonnées locales, pas du centre de l'objet !
L'ordre des opérations est séquentiel. Attention, à chaque transformation on obtient un nouveau système de coordonnées !
Il est possible d'appliquer des filtres numériques à un élément graphique, aussi bien que de lui appliquer un masque afin
de le modifier : voir par exemple le fichier filters01.svg tiré de la spécification SVG.
On peut évidemment appliquer des effets d'animation sur les éléments graphiques, grâce à un jeu d'éléments et d'attributs
développés en collaboration avec l'équipe en charge de l'élaboration de SMIL. Les graphiques SVG peuvent être animés par les éléments d'animation SVG, mais aussi directement par l'interface du DOM. Voir par exemple le fichier anim01.svg tiré de la spécification SVG.
SVG permet également de définir de nouvelles polices, qu'il peut importer. Voir par exemple le fichier font.svg tiré de la spécification SVG.
On peut insérer des éléments interactifs par le biais de scripts, ou bien par l'utilisation d'éléments spécifiques.
SVG est un langage graphique extrêmement riche, dont il est impossible de faire le tour en si peu de temps. Je vous engage -une
fois n'est pas coutume- à explorer la spécification du W3C, qui fourmille d'exemples particulièrement parlants des possibilités de ce langage.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Synchroniser des contenus multimédia avec SMIL
Cours suivant : L'animation dans le SVG
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
