Cours de XML - Un format de dessin vectoriel en XML: SVG

version 1.52, dernière mise à jour le 29 octobre 2018.

   

Table des matières (TdM)

  1. I. Introduction
    1. Origine et but
    2. Pourquoi SVG ?
    3. Outils
      1. Édition
      2. Visualisation
  1. II. SVG de base
    1. Structure d'une simple page SVG
      1. Prologue
      2. Élément racine
    2. Utilisation d'un fichier SVG dans HTML
  1. III. Éléments graphiques de base
    1. Introduction
    2. Mécanismes principaux
      1. Attributs
      2. Positionnement et unités
      3. Transformations
    3. Le rendu
      1. Introduction
      2. Propriétés fill
      3. Propriétés de stroke
    4. Figures géométriques
      1. Rectangles
      2. Cercles et ellipses
      3. Lignes et polylignes
      4. Polygones
      5. Exercice : Éléments géométriques de base
      6. Exercice : Rendu visuel
    5. Formes arbitraires avec path
      1. Introduction
      2. Attributs de base
      3. Path data
    6. Texte
      1. La balise text
      2. Éléments d'ajustement
      3. Lien avec les chemins
      4. Exercice : Écriture de texte le long d'un chemin
  1. IV. Structuration: éléments de groupage et références
    1. Introduction
    2. Le fragment d'un document SVG : svg
    3. Groupage d'éléments avec g
    4. Objets abstraits avec symbol, defs et use
      1. Symboles (élément symbol)
      2. Définitions (élément defs)
      3. Utilisation d'objets: l'élément use
      4. Exercice : Groupage d'éléments
    5. Titre title et descriptions desc
    6. Insertion d'images: l'élément image
      1. Élément image
      2. L'attribut preserveAspectRatio
  1. V. Transformations
    1. Introduction
    2. Transformations avec l'attribut transform
      1. Introduction
      2. Translations avec le paramètre translate
      3. Redimensionnement avec scaling
      4. Rotation avec le paramètre rotate
      5. Ordre des opérations
      6. Exercice : Transformations
    3. Exercice : Récapitulation
  1. VI. Autres fonctionnalités
    1. Masquage, filtrage
    2. Animations
    3. Définition de polices
    4. Interactivité
  1. VII. Conclusion

Retour au menu

Contenu du cours

I. Introduction

1. Origine et but

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).

>Retour à la TdM

2. Pourquoi SVG ?

Les raisons pouvant pousser à l'adoption d'un format comme SVG sont nombreuses :

>Retour à la TdM

3. Outils

a. Édition

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.

b. Visualisation

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.

>Retour à la TdM

II. SVG de base

1. Structure d'une simple page SVG

a. Prologue

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.

b. Élément racine

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">

>Retour à la TdM

2. Utilisation d'un fichier SVG dans HTML

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>

>Retour à la TdM

III. Éléments graphiques de base

1. Introduction

SVG définit un certain nombre d'éléments graphiques de base. Voici la liste des éléments les plus importants :

  1. Texte avec text ;

  2. Rectangles rect ;

  3. Le cercle circle et l'ellipse ellipse ;

  4. Lignes line et poly-lignes polyline ;

  5. Polygones ;

  6. 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.

>Retour à la TdM

2. Mécanismes principaux

a. Attributs

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)

b. Positionnement et unités

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.

c. Transformations

Chaque objet peut être translaté, orienté et redimensionné. Il hérite des transformations de l'objet parent.

>Retour à la TdM

3. Le rendu

a. Introduction

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 :

SVG possède deux syntaxes différentes pour définir la mise en forme d'un élément :

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" />

b. Propriétés fill

fill permet de gérer le remplissage de l'élément. Ses propriétés sont :

c. Propriétés de stroke

stroke permet de gérer l'entourage d'un élément de dessin. Ses propriétés sont :

>Retour à la TdM

4. Figures géométriques

a. Rectangles

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 :

Par exemple…

<rect width="300" height="50" x="50" y="50" stroke-width="4px" stroke="black" fill="cyan" />

Voir l'exemple rectangle.svg.

SVG Demo: rectangle. Rectangle aux côtés arrondis Rectangle à côtés droits
b. Cercles et ellipses

Un cercle est créé par l'élément circle et une ellipse par l'élément… ellipse. Leurs attributs sont :

Voir l'exemple cercleellipse.svg.

SVG Demo: cercle et ellipse.
c. Lignes et polylignes

Une ligne est définie avec l'élément line, une poly-ligne par l'élément… polyline.

Les attributs de line sont :

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.

SVG Demo: Lignes.
d. Polygones

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.

SVG Demo: quelques polygones réguliers

Exercice 1. Éléments géométriques de base

Énoncé

Exercice 2. Rendu visuel

Énoncé

>Retour à la TdM

5. Formes arbitraires avec path

a. Introduction

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).

b. Attributs de base

Ces attributs sont au nombre de 2 :

c. Path data

Les path data suivent les règles suivantes :

Ces règles visent à diminuer au maximum la taille requise par la description des chemins. Les commandes sont :

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.

SVG Demo: path.

>Retour à la TdM

6. Texte

a. La balise text

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.

b. Éléments d'ajustement

À 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.

Voici un texte écrit droit. Et en voici un autre un peu décalé...
c. Lien avec les chemins

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.

On monte, puis on descend, et hop une petite bosse!

Exercice 1. Écriture de texte le long d'un chemin

Énoncé
Correction

>Retour à la TdM

IV. Structuration: éléments de groupage et références

1. Introduction

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.

  1. Le fragment d'un document SVG : svg ;

  2. Groupage d'éléments avec g ;

  3. Objets abstraits (chablons) symbol ;

  4. Section de définition def ;

  5. Utilisation d'éléments use ;

  6. Titre title et description desc.

>Retour à la TdM

2. Le fragment d'un document SVG : svg

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.

Bonjour, cher visiteur Bonjour, cher visiteur

>Retour à la TdM

3. Groupage d'éléments avec g

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.

Mon plus beau dessin

>Retour à la TdM

4. Objets abstraits avec symbol, defs et use

a. Symboles (élément symbol)

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.

b. Définitions (élément defs)

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.

c. Utilisation d'objets: l'élément use

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.

Rectangle initial Rectangle copié Rectangle copié

Exercice 1. Groupage d'éléments

Énoncé

>Retour à la TdM

5. Titre title et descriptions desc

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.

>Retour à la TdM

6. Insertion d'images: l'élément image

a. Élément image

Les formats supportés sont jpeg et png. L'élément image permet également d'insérer un autre fichier SVG. Les attributs sont :

Cet élément possède également un attribut supplémentaire, preserveAspectRatio.

b. L'attribut 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 :

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 :

Une illustration complète est visible avec le fichier preserveaspectratio.svg.

Example PreserveAspectRatio - illustrates preserveAspectRatio attribute SVG to fit Viewport 1 Viewport 2 --------------- meet --------------- xMin* xMid* xMax* ---------- meet ---------- *YMin *YMid *YMax ---------- slice ---------- xMin* xMid* xMax* --------------- slice --------------- *YMin *YMid *YMax

>Retour à la TdM

V. Transformations

1. Introduction

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.

>Retour à la TdM

2. Transformations avec l'attribut transform

a. Introduction

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.

b. Translations avec le paramètre translate

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).

c. Redimensionnement avec scaling

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).

d. Rotation avec le paramètre rotate

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 !

e. Ordre des opérations

L'ordre des opérations est séquentiel. Attention, à chaque transformation on obtient un nouveau système de coordonnées !

Exercice 1. Transformations

Énoncé
Correction

>Retour à la TdM

Exercice 1. Récapitulation

Énoncé
Correction (Génération SVG)
Correction (Génération HTML)

VI. Autres fonctionnalités

1. Masquage, filtrage

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 .

Example filters01.svg - introducing filter effects An example which combines multiple filter primitives to produce a 3D lighting effect on a graphic consisting of the string "SVG" sitting on top of oval filled in red and surrounded by an oval outlined in red. SVG

>Retour à la TdM

2. Animations

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.

Example anim01 - demonstrate animation elements It's alive!

>Retour à la TdM

3. Définition de polices

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.

Texte utilisant la font "Super Sans" Texte normal.

>Retour à la TdM

4. Interactivité

On peut insérer des éléments interactifs par le biais de scripts, ou bien par l'utilisation d'éléments spécifiques.

>Retour à la TdM

VII. Conclusion

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.

Historique de ce document

Bibliographie

De l'auteur (G. Chagnon)

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu