- Tous les cours
- Conditions d'utilisation
- À propos de ces cours
- Contact

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

version 1.43, dernière mise à jour le 12 janvier 2010.

Chercher dans le cours :

## Table des matières (TdM)

1. I. Introduction
   1. Origine et but
      1. Histoire
      2. « Niche » de SVG
   2. Pourquoi SVG ?
   3. Outils
      1. Introduction
      2. Édition
      3. Visualisation

1. II. SVG de base
   1. Structure d'une simple page SVG
      1. Prologue
      2. Élément racine
   2. Imbrication 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

##### a. Histoire

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

>Retour à la TdM

##### b. « Niche » de SVG

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.

>Retour à la TdM

#### 2. Pourquoi SVG ?

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

>Retour à la TdM

#### 3. Outils

##### a. Introduction

Une liste complète des implémentations de `SVG` est disponible sur le site du W3C.

>Retour à la TdM

##### b. É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, 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.

>Retour à la TdM

##### c. Visualisation

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

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

>Retour à la TdM

##### 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. Imbrication d'un fichier SVG dans HTML

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

>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`), 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)

>Retour à la TdM

##### 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`.

>Retour à la TdM

##### c. Transformations

Chaque objet peut être translaté, orienté et changé de taille. 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 :

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

>Retour à la TdM

##### b. Propriétés fill

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

>Retour à la TdM

##### c. Propriétés de stroke

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

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

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

>Retour à la TdM

##### b. Cercles et ellipses

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.

>Retour à la TdM

##### 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 :

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

>Retour à la TdM

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

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

>Retour à la TdM

##### b. Attributs de base

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.

>Retour à la TdM

##### c. Path data

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.

>Retour à la TdM

#### 6. Texte

##### a. La balise text

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.

>Retour à la TdM

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

>Retour à la TdM

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

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

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.

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. Ainsi on peut facilement réutiliser des fragments graphiques sans devoir modifier des coordonnées. Voir l'exemple salut2.svg.

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

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

>Retour à la TdM

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

Cet élément ressemble un peu à `symbol`, mais est plus simple. De même, l'objet défini n'est pas dessiné.

>Retour à la TdM

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

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

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

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

>Retour à la TdM

##### 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`, 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.

>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 extrêmement 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.

>Retour à la TdM

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

>Retour à la TdM

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

>Retour à la TdM

##### 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 !

>Retour à la TdM

##### 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`.

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

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

>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

- Le 12 janvier 2010, version 1.43. Mention de l'éditeur en ligne lancé par Google.
- Le 11 mars 2008, version 1.42. Corrections de syntaxe et de fautes de frappe.
- Le 9 septembre 2007, version 1.41. Correction du nom d'un élément.
- Le 30 janvier 2006, version 1.40. Ajout d'un exercice et d'exemples sur les transformations.
- Le 13 janvier 2006, version 1.31. Corrections de coquilles et syntaxiques.
- Le 14 décembre 2005, version 1.30. Corrections typographiques, réécriture de la présentation du support.
- Le 12 septembre 2005, version 1.21. Corrections typographiques.
- Le 13 juillet 2005, version 1.20. Réécriture des exemples.
- Le 16 mars 2005, version 1.14. Remarque sur le support de SVG par Opera.
- Le 11 mars 2005, version 1.13. Corrections typographiques.
- Le 16 juin 2004, version 1.12. Ajout des corrections des exercices.
- Le 6 avril 2004, version 1.11. Ajout du lien vers le plug-in Adobe beta pour Mozilla .
- Le 29 mars 2004, version 1.10. Corrections typographiques.
- Le 6 décembre 2003, version 1.00. Création du cours

## Bibliographie

### De l'auteur (G. Chagnon)

- XML, publié par Pearson Education en septembre 2007. Livre de cours et exercices écrit en collaboration avec Florent Nolot (Université de Reims). Consulter la fiche sur Eyrolles. Consulter la fiche sur Amazon.

## Conditions d'utilisation et licence

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

Retour au menu