Formes de base
Il existe plusieurs formes de base utilisées pour la plupart des dessins SVG. Le but de ces formes est assez évident d'après leur nom. Certains des paramètres qui déterminent leur position et leur taille sont donnés, mais une référence d'élément contiendrait probablement des descriptions plus précises et complètes ainsi que d'autres propriétés qui ne seront pas abordées ici. Cependant, puisqu'elles sont utilisées dans la plupart des documents SVG, il est nécessaire de les présenter.
Pour insérer une forme, vous créez un élément dans le document. Différents éléments correspondent à différentes formes et prennent des paramètres différents pour décrire la taille et la position de ces formes. Certaines sont légèrement redondantes car elles peuvent être créées à partir d'autres formes, mais elles sont toutes là pour votre commodité et pour que vos documents SVG restent aussi courts et lisibles que possible. Toutes les formes de base sont illustrées dans l'image suivante.
Le code pour générer cette image ressemble à ceci :
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://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" 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>
Note :
Les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.
Rectangle
L'élément <rect> permet de dessiner des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle à l'écran. 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"/>
Cercle
L'élément <circle> permet de dessiner un cercle à l'écran. Seuls 3 attributs peuvent être définis pour cet élément.
<circle cx="25" cy="75" r="20"/>
Ellipse
Un élément <ellipse> est une forme plus générale que l'élément <circle>, où il est possible de modifier séparément le rayon x et le rayon y (appelés respectivement grand axe et petit axe en mathématiques) du cercle.
<ellipse cx="75" cy="75" rx="20" ry="5"/>
Ligne
L'élément SVG <line> correspond à une portion de droite tracée entre 2 points.
<line x1="10" x2="50" y1="110" y2="150"/>
Ligne brisée
Un élément <polyline> est un groupe de lignes droites connectées. Comme la liste des points peut devenir assez longue, tous les points sont inclus dans un seul attribut :
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
points-
Une liste de points. Chaque nombre doit être séparé par un espace, une virgule, un retour à la ligne ou un saut de ligne, des espaces supplémentaires étant autorisés. Chaque point doit contenir deux nombres : une coordonnée x et une coordonnée y. Ainsi, la liste
(0,0),(1,1)et(2,2)peut s'écrire0, 0 1, 1 2, 2.
Polygone
L'élément <polygon> fonctionne de façon semblable à l'élément <polyline>. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée.
Note :
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-
Une liste de points, chaque nombre étant séparé par un espace, une virgule, un retour à la ligne ou un saut de ligne, des espaces supplémentaires étant autorisés. Chaque point doit contenir deux nombres : une coordonnée x et une coordonnée y. Ainsi, la liste
(0,0),(1,1)et(2,2)peut s'écrire0, 0 1, 1 2, 2. Le dessin ferme alors le chemin, donc une dernière ligne droite sera tracée de(2,2)à(0,0).
Chemin
L'élément <path> pour tracer les chemins 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> fera l'objet du prochain chapitre de ce tutoriel, mais pour le moment, nous allons uniquement voir comment définir cet élément.
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
d-
Un ensemble d'informations définissant le chemin à dessiner. Pour en savoir plus, consultez la section sur les chemins.