SVG XML:Éléments graphiques de base
Un article de WikiTuto.
Sommaire |
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 poli-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 ex. 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.
Mécanismes principaux
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). Par contre pour certains il existe de véritables sous-grammaires (voir Formes arbitraires avec <path> par exemple)
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.
Transformations
Chaque objet peut être translaté, orienté et changé de taille. Il hérite des transformations de l'objet parent.
Le rendu
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.
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" />
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.
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 svgstrokecap.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 offset de démarrage des pointillés avec la propriété dashoffset.
Figures géométriques
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
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.
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.
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 fichierpolygones.svg.
Exercice 1. Éléments géométriques de base
Exercice 2. Rendu visuel
Formes arbitraires avec path
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).
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.
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.
Texte
La balise text
La balise <text> est considérée comme un objet graphique, et est donc gérée comme telle. Elle 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éments d'ajustement
A 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.
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
Sources
Voir aussi
- Introduction
- SVG de base
- Éléments graphiques de base
- Structuration: éléments de groupage et références
- Transformations
- Autres fonctionnalités
