Format SVG

description du format SVG

Généralités

Le format SVG repose sur la norme XML.
Il est rattaché à l'espace de nommage http://www.w3.org/2000/svg,
L'élément racine du SVG est svg,
Il est possible de placer des formes géométriques directement dans la racine,
Les formes géométriques peuvent être indiquées par les balises circle, rect, line...

On voit l'importance du W3C sur lequel reposent l'ensemble des formats communément utilisés sur le Web et plus généralement dans les échanges d'informations entre les systèmes que ce soit pour le XML, le xHTML, le SVG...

Exemple simple d'image SVG

Le code ci dessous correspond à une image svg :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="300" height="200">
  <title>Exemple simple de figure SVG</title>
  <desc>Cette figure est constituée d'un rectangle,
   d'un segment de droite et d'un cercle.</desc>
 
  <rect width="290" height="190" x="10" y="10" fill="#0F0"/>
  <line x1="15" y1="15" x2="285" y2="185" stroke="#F00"
                                          stroke-width="5px"/>
  <circle cx="120" cy="90" r="75" fill="#F0F"/>
  <text x="20" y="70" style="font-size:35px;fill:#666">Bonjour
                                                 à tous</text>
</svg>

Image résultante :

Exemple simple d'image SVG

À la lecture du code précédent on remarque :
- la possibilité de placer un titre par title,
- la possibilité de placer une description par descr,
- les coordonnées sont précisées sans unités relativement au coin supérieur gauche de l'écran par les attributs des balises géométriques,
- une dimension globale est donnée à l'élément racine svg par les attributs width et height.
Les unités des dimensions peuvent être précisées, dans le cas contraire ce seront les unités de base qui seront utilisées, c'est à dire, dans la plupart des cas, le pixel.

Les formes rectangulaires

L'élément rect permet de définir des rectangles :
- Ses attributs de base sont :
  - x et y pour la position du coin supérieur gauche,
  - width et height pour la largeur et la hauteur du rectangle,
  - rx et ry pour les rayons x et y de l'ellipse utilisée pour arrondir les angles.
- Exemple :
```
<rect width="100" height="50" x="10" y="5" rx="15" ry="25"/>
```
Image résultante :

les rayons de l'ellipse ne peuvent être supérieurs à la moitié de la largeur du rectangle.

Les formes circulaires et elliptiques

L'élément circle permet de définir des cercles :
- ses attributs de base sont :
  - cx et cy pour les coordonnées du centre,
  - r pour le rayon du cercle.
L'élément ellipse permet de définir une ellipse. il nécessitera de 2 rayons rx et ry

Exemples :

<circle r="100" cx="250" cy="105" fill="#FF0"/>
<ellipse rx="100" ry="50" cx="110" cy="80"/>

Image résultante :

Les lignes et les lignes brisées

L'élément line permet de définir une ligne à partir de 2 points :
- ses attributs de base sont :
  - x1 et y1 pour les coordonnées du premier point,
  - x2 et y2 pour les coordonnées du second point.
L'élément polyline permet de définir une ligne brisée à partir d'un ensemble de points :
- l'attribut points contient la listes des coordonnées des points composant la ligne.

Exemples :

<line x1="10" y1="20" x2="260" y2="290"/>
<polyline points="50,10, 100,280, 190,290, 290,10"/>

Image résultante :

Les polygones

L'élément polygon permet de définir un polygone à partir d'une liste de points :
- l'attribut points contient la listes des coordonnées des points composant le polygone,
- le contour du polygone sera automatiquement fermé contrairement aux éléments polyline.

Exemples :

<polygon points="475,50, 518,74, 518,125,
                 475,150, 431,124, 431,75"/>

Image résultante :

Les chemins

L'élément path permet de définir un chemin.
L'attribut d permet de définir une liste de coordonnées à parcourir qui peuvent être :
- des arcs de cercles par arc,
- des courbes de Bézier par curveto,
- des déplacements par moveto, ...
Les éléments définis dans les chemins ont été choisis afin d'être les plus compacts possibles :
- les types de déplacements peuvent être indiqués par leurs préfixe, ainsi CURVETO ou C auront la même signification,
- le type peut être omis, dans ce cas le type du déplacement précédent sera utilisé.

Les chemins

Dans un chemin les coordonnées peuvent être indiquées en absolu ou en relatif :
- un déplacement dont le type est fourni en majuscules sera positionné en absolu,
- un déplacement dont le type est fourni en minuscules sera positionné en relatif,
La terminaison du chemin par z fermera celui-ci.

Exemples de courbe de Bézier fermée :

<path d="M 10,10 C 500,0 0,500 500,500 1000,500 0,0 10,500 z"/>

Image résultante :

Les courbes de Bézier ont étés inventées par la français Pierre Bézier à la fin du XXe. Cette invention géniale est omniprésente dans toutes les approches modernes du dessin.

Les chemins

Le valeurs possibles pour les types de chemins
type	nom complet	description
`M`	moveto	déplacement du crayon
`L`	lineto	tire un trait depuis le dernière position
`H`	horizontal lineto	trait horizontal depuis le dernière position
`V`	vertical lineto	trait vertical depuis le dernière position
`C`	curveto	courbe de Bézier cubique
`S`	smooth curveto	idem mais sans angles
`Q`	quadratic Bézier curve	courbe de Bézier quadratique
`T`	smooth quadratic Bézier curveto	idem mais sans angles
`A`	elliptical Arc	arc d'ellipse
`Z`	closepath	fermeture du contour

Transformations géométriques

Les balises de formes acceptent des transformations géométriques qui peuvent être :
- des facteurs d'échelle : scale(ratio_X,ratio_Y),
- des rotations : rotate(angle,centre_X,centre_Y),
- des translations : translate(decal_X,decal_Y),
- des cisaillements : skewX(angle) et skewY(angle),
- des transformations quelconques par matrice : matrix(c1,c2,c3,c4,c5,c6).

Transformations géométriques

L'attribut transform permet d'appliquer une transformation à un élément.
Plusieurs opérations peuvent être transmises par cet attribut, elles seront alors séparées par des espaces.

Exemple :

<rect width="100" height="20" x="10" y="20"
   transform="rotate(45) translate(40,-60)"/>

Image résultante :

L'ordre des transformations est important !

Groupement d'éléments

Beaucoup d'attributs sont présents sur l'ensemble des balises graphiques (style transform, ...)
Afin de permettre des groupement d'éléments il existe une balise container g acceptant des attributs et les propageant à tous ces nœuds enfants.

Exemple :

<g style="fill:#53F;stroke:#999;stroke-width:4"
   transform="rotate(70, 200, 120) scale(0.8)">
  <rect x="100" y="150" width="150" height="200" fill="#8F0"/>
  <ellipse rx="50" ry="100" cx="200" cy="110"/>
</g>

Image résultante :

Le clonage d'objets

Dans beaucoup de circonstances un objet peut être utilisé à plusieurs endroits du document
Il sera alors judicieux de recourir au clonage car celui-ci permettra :
- de minimiser le code à écrire,
- d'en simplifier la maintenance.
Le mécanisme des liens XML est disponible par l'utilisation de d'espace de nommage http://www.w3.org/1999/xlink.
La référence au lien se fera par l'attribut href de cet espace de nommage auquel sera fourni l'identifiant de l'élément référencé préfixé de #.
La balise use permet d'utiliser l'objet à partir de sa référence.
La balise defs ouvre une zone destinée aux déclarations, le contenu déclaré n'apparaîtra pas ici.

On n'est pas obligé de déclarer le contenu à référencer dans un bloc defs, dans ce cas il apparaîtra également lors de sa déclaration.

Lors de l'utilisation d'une référencer par use des attributs peuvent être définis, ceux-ci surchargerons l'objet référencé.

Le clonage d'objets

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs style="stroke-width:1">
    <rect id="r1" style="fill:#F00;stroke:#555"
          width="18" height="18"/>
    <rect id="r2" style="fill:#FCF;stroke:#999"
          width="18" height="18"/>
  </defs>
  <use x="10" y="10" xlink:href="#r1"/>
  <use x="10" y="30" xlink:href="#r2"/>
  <use x="10" y="50" xlink:href="#r1"/>
  <use x="30" y="10" xlink:href="#r2"/>
  <use x="30" y="30" xlink:href="#r1"/>
  <use x="30" y="50" xlink:href="#r2"/>
  <use x="50" y="10" xlink:href="#r1"/>
  <use x="50" y="30" xlink:href="#r2"/>
  <use x="50" y="50" xlink:href="#r1"/>
</svg>

Image résultante :

Chemin en guide

Il est possible de définir un chemin en guide d'un texte
Pour cela le mécanisme des références sera utilisé :
- la balise textpath permet de donner ce comportement au texte qu'elle englobe,
- son attribut xlink:href indiquera l'identifiant du chemin à suivre,
- les attributs dx et dy de la balise tspan permettent de spécifier un décalage.

Chemin en guide

Exemple :

<path d="M 10,60 C 900,0 0,500 990,500" id="p1"
  style="fill:none;stroke:#0F0;stroke-width:10"/>
  <text fill="#333" style="font-size:35px">
    <textPath xlink:href="#p1"><tspan dx="40" dy="-20">Comme
    il est long parfois le chemin séparant
    le début de la fin...</tspan></textPath>
  </text>

Image résultante :

La balise tspan n'est nécessaire que si l'on désire apporter des modifications (décalages) au texte initial. Elle permet également de gérer plusieurs mises en formes au fil d'une même phrase.

Chemin en découpe

Il est possible de définir un chemin en tant que zone de visibilité d'un autre objet
Ce comportement est appelé le clipping.
Un groupe de plusieurs objets peut être choisi pour servir de découpe.
La balise clipPath permet de définir un ensemble d'objets en découpe.
L'attribut clip-path permet de choisir un bloc de découpe dans un objet.

Chemin en découpe

Exemple :

<clipPath id="la-decoupe">
  <path d="M 10,10 T 300,10 200,200 500,200 z"/>
  <circle r="130" cx="150" cy="100"/>
</clipPath>
<circle clip-path="url(#la-decoupe)" clip-rule="evenodd"
        r="145" cx="300" cy="150"
        style="fill:#FF6;stroke:#796;stroke-width:6"/>

Image résultante :

Chemin en masque

Il est possible de définir un chemin en tant que zone de masquage d'un autre objet
Contrairement au clipping le masquage atténue l'opacité de l'objet cible en proportion inverse de sa luminance.
Un groupe de plusieurs objets peut être choisi pour servir de masque.
La balise mask permet de définir un ensemble d'objets en masque.
L'attribut mask permet de choisir un bloc de masque dans un objet.

Chemin en masque

Exemple :

<mask id="le-masque">
  <path d="M 10,10 T 300,10 200,200 500,200 z"
         style="fill:#EEE;stroke:#DDD;stroke-width:10"/>
  <circle r="130" cx="150" cy="100"
         style="fill:#555;stroke:#999;stroke-width:10"/>
</masque>
<circle mask="url(#le-masque)"
        r="145" cx="300" cy="150"
        style="fill:#FF6;stroke:#796;stroke-width:6"/>

Image résultante :

Les gradients linéaires

Il est possible de définir un gradient linéaire
Celui-ci pourra être attribué par la suite en motif de remplissage ou de contour d'un objet.
Un gradient linéaire est défini par :
- un axe caractérisé par les deux points de ses extrémités,
- une ensemble de stop colors et niveau de transparence disposés à des points précis de cet axe.
La balise linearGradient permet de définir un gradient linéaire à partir de son axe par les coordonnées x1,y1 et x2,y2.
Elle contient plusieurs balises stop contenant un position par l'attribut offset et une couleur précisée par l'attribut style.

Les gradients linéaires

Exemple :

<defs>
  <linearGradient id="degrade"
                  x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%"
          style="stop-color:#FF0;stop-opacity:1"/>
    <stop offset="50%"
          style="stop-color:#FFF;stop-opacity:0.5"/>
    <stop offset="100%"
          style="stop-color:#F00;stop-opacity:1"/>
  </linearGradient>
</defs>
<rect x="20" y="20" width="280" height="170"
                    fill="url(#degrade)"/>

Image résultante :

Les gradients radiaux

Il est possible de définir un gradient radial
Un gradient radial est défini par :
- un cercle englobant le gradient et caractérisé par son centre et son rayon,
- un point focal définissant l'origine du gradient,
- un ensemble de stop colors (même principe que pour les gradients linéaires).
La balise radialGradient permet de définir un gradient radial à partir des coordonnées cx,cy de son centre, son rayon r ainsi que son point focal fx,fy.
Elle contient plusieurs balises stop contenant un position par l'attribut offset et un couleur précisée par l'attribut style.

Les gradients radiaux

Exemple :

<defs>
  <radialGradient id="degrade"
                  cx="50%" cy="50%" r="50%" fx="30% fy="30%">
    <stop offset="0%"
          style="stop-color:#FF0;stop-opacity:1"/>
    <stop offset="50%"
          style="stop-color:#FFF;stop-opacity:0.5"/>
    <stop offset="100%"
          style="stop-color:#F00;stop-opacity:1"/>
  </radialGradient>
</defs>
<rect x="20" y="20" width="280" height="170"
                    fill="url(#degrade)"/>

Image résultante :

Documentation

Quelques liens

Cours sur le SVG en français : http://www.gchagnon.fr/cours/xml/svg.html
Les spécifications du W3C : http://www.w3.org/TR/SVG/
Explication détaillée des transformations matricielles http://apike.ca/prog_svg_transform.html"