Formes de base

Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à la page des références SVG. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.

Ajout de formes

Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :

<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="https://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

Figures de bases

Rectangles

L'élément rect, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.

 <rect x="10" y="10" width="30" height="30"/>
 <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x

Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.

y

Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.

width

Largeur du rectangle.

height

Hauteur du rectangle.

rx

Rayon x des coins du rectangle.

ry

Rayon y des coins du rectangle.

Cercles

De la même manière, il est facile de deviner la fonction de l'élément circle. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

 <circle cx="25" cy="75" r="20"/>

r

Rayon du cercle.

cx

Position x du centre du cercle.

cy

Position y du centre du cercle.

Ellipses

Les ellipses sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).

 <ellipse cx="75" cy="75" rx="20" ry="5"/>

rx

Rayon x de l'ellipse.

ry

Rayon y de l'ellipse.

cx

Position x du centre de l'ellipse.

cy

Position y du centre de l'ellipse.

Figures complexes

Lignes

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément line en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

 <line x1="10" x2="50" y1="110" y2="150"/>

x1

Position x du premier point.

x2

Position x du deuxième point.

y1

Position y du premier point.

y2

Position y du deuxième point.

Lignes brisées

Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément polyline en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :

 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

points

Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.

Polygones

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément polygon.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

points

Idem que l'attribut points de l'élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.

Chemins

L'élément pour tracer les chemins, très logiquement nommé path, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément path, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément path en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.

 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>

d

Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.

Interwiki Languages Links