# Découvrir le SVG/Éléments graphiques

Les éléments graphiques sont les instructions qui vont créer le dessin.

## Syntaxe générale et aspect des objets

La syntaxe générale pour les éléments graphiques est :
    <élément attribut1="valeur1" attribut2="valeur2" … />
où
* élément est le nom de l'élément : rect pour un rectangle, circle pour un cercle, line pour un segment de droite ;
* attributn désigne le paramètre n de l'élément : couleur, coordonnée d'un point, rayon d'un arc de cercle…
* valeurn désigne la valeur attribuée à l'attribut n.
Certains attributs définissent la mise en forme de l'objet, appelée « coloriage » (painting), et sont communs à tous les éléments présenté ici. Les principaux sont :
* fill : indique la couleur de remplissage ;
* stroke : indique la couleur du trait de contour ;
* stroke-width : indique l'épaisseur du trait de contour.
Les valeurs des attributs fill et stroke sont une couleur. Une couleur peut être exprimée par un mot-clef ou bien par une valeur numérique selon la norme RVB (rouge-vert-bleu). On dénombre environ 150 mots-clefs, par exemple :
* none : aucune couleur, invisible ;
* des couleurs classiques (noms en anglais) : black, blue, brown, cyan, gray ou grey, green, magenta, orange, pink, red, violet, white, yellow ;
* d'autres couleurs : aqua, aquamarine, crimson, fuschia, gold, indigo, ivory, khaki, lavander, lime, limegreen, linen, maroon, mintcream, navy, olive, orangered, orchid, peru, plum, purple, royalblue, salmon, silver, skyblue, turquoise, yellowgreen… ;
* des variantes : plus sombres — darkcyan, darkblue, darkgray ou darkgrey… darkviolet —, ou plus plus claires — lightcyan, lightblue, lightgray ou lightgrey… lightviolet.
La valeur numérique de la couleur est sous la forme #rrvvbb où rr, vv et bb désigne la composante au format hexadécimal (entre 00 et ff) de rouge, de vert et de bleu.
La valeur de l'attribut stroke-width est une dimension. On utilise en général l'unité par défaut px.
Par exemple, pour dessiner un rectangle rempli de jaune et au contour bleu épais d'un pixel :
ou bien
Un dernier attribut, transform, permet notamment de faire tourner l'objet. La valeur est transform="rotate(angle)", où l'angle est en degrés ; la rotation se fait alors autour de l'origine du repère (le coin en haut à gauche du dessin). Un angle positif correspond à une rotation dans le sens des aiguilles d'une montre. On peut indiquer le centre de rotation sous la forme transform="rotate(angle cx cy)" ou bien transform="rotate(angle, cx, cy)".
Voici un exemple complet. Le second rectangle est tourné autour de son centre (cx = 60 px, cy = 40 px) :

## Rectangles

Un rectangle se dessine avec un élément rect. La syntaxe est <rect … />, les attributs étant :
* x : coordonnée en x du point en haut à gauche du rectangle ; la valeur par défaut est x="0" ;
* y : coordonnée en y du point en haut à gauche du rectangle ; la valeur par défaut est y="0" ;
* width : largeur du rectangle, valeur nécessairement positive ;
* height : hauteur du rectangle, valeur nécessairement positive ;
* rx : pour un rectangle aux angles arrondis, rayon de l'ellipse selon l'axe x ;
* ry : pour un rectangle aux angles arrondis, rayon de l'ellipse selon l'axe y.
Par exemple, le code suivant place un rectangle de 60 px de large et de 128 px de haut au point (40 px, 80 px) avec des angles arrondis d'un rayon de 8 px :

## Cercles et ellipses

Un cercle se trace avec l'élément circle. Les attributs sont les coordonnées du centre cx et cy, et le rayon r.
Un cercle se trace avec l'élément ellipse. Les attributs sont les coordonnées du centre cx et cy, le rayon horizontal rx et le rayon vertical ry.
Par exemple :

## Lignes et polygones

Pour tracer un segment de droite [M$_1$M$_2$], on utilise l'élément line. Les quatre attributs spécifiques sont simplement x1, y1, x2 et y2 : les coordonnées des deux extrémités M$_1$(x$_1$, y$_1$) et M$_2$(x$_2$, y$_2$).
On peut tracer une ligne brisée avec l'élément polyline. L'argument spécifique est points qui contient la liste des cordonnées. Les cordonnées peuvent être séparées par un espace, une virgule ou un retour à la ligne ; par exemple, pour relier les points M$_1$(0, 0), M$_2$(50, 50), M$_3$(100, 0) et M$_4$(150, 100), on peut écrire :
ou bien
ou encore
Les coordonnées sont exprimées en px.
L'élément polygon a la même syntaxe, la différence est que la ligne est fermée. On obtient donc un polygone.
Exemple :

## Texte

Un texte est inclus entre des balises <text … > … </text>. Dans sa forme la plus simple, on écrit simplement
L'attribut y="1em" permet de s'assurer que le texte est écrit dans la zone affichée, sinon, il est écrit au dessus de la ligne y = 0 qui est le haut de la zone d'affichage.
Les attributs spécifiques de l'élément text sont :
* x, y : coordonnées à laquelle le texte est écrit ;
* font-family : nom de la police, par exemple pour les polices par défaut sans, serif et monospace, ou bien de spolices spécifiques comme Arial, Times, Courier…
* font-size : le corps (taille des lettres) ;
* font-weight : graisse,
* dx, dy : décalages par rapport au « curseur » (pour dx) et à la ligne de base (pour dy) ;
* rotate : rotation des caractères (mais ils restent sur une ligne horizontale) ;
* textLength : indique la longueur que le texte doit occuper ; si l'on met cet attribut, alors le texte est étiré ou compressé pour que la ligne ait exactement cette longueur ;
* lengthAdjust : si l'on utilise l'attribut textLength, la valeur de cet attribut indique si seuls les espaces sont modifiés (valeur spacing) ou bien si les caractères sont également déformés (valeur spacingAndGlyphs) ;
* text-anchor : indique l'alignement horizontal du texte et peut prendre les valeurs : start (commence au point indiqué, équivalent d'un alignement à gauche), middle (est centré sur le point indiqué) ou end (se termine sur le point indiqué, équivalent à un alignement à droite).
Notes que les valeurs des attributs peuvent être des suites de valeurs. Par exemple
affiche le mot « Bonjour » mais :
* la lettre « o » est élevée d'un demi cadratin (donc est en exposant), puisque le texte est décalé de –0,5 em au deuxième caractère puis décalé à nouveau de 0,5 em au troisième ;
* la lettre « n » est tournée de 45° dans le sens des aiguilles d'une montre, puisque le texte est tourné de 45° au troisième caractère puis remis à 0 au quatrième.
Le texte peut être découpé en zones (span), en élément tspan, chaque élément ayant des propriétés différentes. Par exemple
le mot « Bonjour » utilise est écrit en noir et graisse maigre, le mot « le » est écrit en gras et en rouge, le mot « monde. » est écrit en bleu et graisse maigre.
On peut mettre du HTML dans le document SVG et donc bénéficier de toutes ses possibilités. Comme le code HTML est un « Objet étranger », il doit être dans un élément foreignObject qui définit les dimensions de la zone d'inclusion. Par exemple :

## Image externe

On peut inclure une images extérieure, par exemple un fichier SVG, PNG ou JPEG. Pour cela, il faut déclarer un nouvel espace de nom XML, xlink, pour pouvoir accéder à une ressource extérieure ; on utilise alors l'élément image. Les attributs spécifiques sont :
* x, y : emplacement du coin en haut à gauche de l'image ;
* width, height : largeur et hauteur de l'image (les deux sont obligatoires) ;
* preserveAspectRatio : indique si les proportions de l'image sont respectées ou si l'image est déformée pour rentrer dans le rectangle (width, height), et comment l'image est alignée par rapport au rectangle ;
* xlink:href : indique l'adresse où aller chercher l'image (adresse réticulaire de type IRI).
Par exemple :

## Groupement d'éléments

Il est possible de grouper des éléments avec l'élément g. Cela permet d'appliquer des attributs à plusieurs éléments en même temps.
L'usage de groupe est très important lorsque l'on travaille avec plusieurs éléments : la balise de description permet une meilleure accessibilité aux déficients visuels (puisqu'elle peut être transcrite en braille ou lue en audio-description) et cela permet d'organiser le document. Ainsi, dès qu'un document comprend plusieurs éléments, il est important que chaque élément soit dans un groupe, même si un groupe ne contient qu'un seul élément.
Dans l'exemple suivant, le groupage est utilisé pour tourner deux éléments graphiques ensemble.

## Exemple complet

Voici un exemple comprenant plusieurs objets graphiques.
Nous avons défini les attributs font-familiy et font-size afin qu'il s'appliquent à tous les éléments du document, ce qui évite d'avoir à les redéfinir pour chaque élément text.

## Notes

* ↑ (en) « Recognized color keyword names », sur W3C (consulté le 30 mars 2017)
* ↑ Pour plus de précisions, voir Structure d'un fichier SVG > Les attributs de l'élément svg.
Structure d'un fichier SVG < ↑ > Chemins