Conditions d'utilisation et licence
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
version 1.52, dernière mise à jour le 29 octobre 2018.
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). Adobe a intégré ce langage dans la plupart de ses éditeurs (notamment Illustrator).
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 :
Intégration dans le monde XML/XHTML :
Génération à la volée 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) ;
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. Des outils visuels sont bien évidemment aussi disponibles, comme InkScape, Adobe Illustrator ou Corel Draw.
Le support de SVG par les navigateurs a souvent été aléatoire mais depuis plusieurs années, et pour suivre l'essor des usages de ce format en parallèle de l'augmentation des consultations de sites Web en mobilité, la situation s'est grandement améliorée et le support du SVG de base ne pose plus de problème avec les versions récentes des navigateurs.
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 possible, 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">
En HTML5, il est possible d'insérer directement du code SVG dans du code HTML. On peut aussi charger une image SVG à l'aide de l'élément img.
Cependant, si pour des raisons diverses (navigateurs anciens…) on ne peut procéder ainsi, la version canonique demande d'utiliser la balise <object>.
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 ou son successseur Extensible 3D), 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 redimensionné. 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 le remplissage d'un objet.
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 (voir l'exemple gradientsimple.svg).
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.
Par exemple…
<rect width="300" height="50" x="50" y="50" stroke-width="4px" stroke="black" fill="cyan" />
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 text est considéré comme un objet graphique, et est donc géré 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.
SVG possède plusieurs constructions intéressantes pour regrouper des objets dans des blocs, les nommer et les réutiliser.
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 ; nous ne montrons ici 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 ; on peut ainsi 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 permet de rassembler en tête d'un document SVG l'ensemble des définitions, comme par exemple les éléments symbol.
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 normalement pas affichés. 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. 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 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.