Le langage SVG possède un ensemble de formes de base prédéfinies comme les rectangles, les cercles ou encore les lignes. Mais pas seulement. Il existe un élément essentiel et incontournable qui permet de créer toutes les formes imaginables, l'élément path.
En SVG, un rectangle (ou un carré) se présente comme ceci :
<rect x="valeur" y="valeur" width="valeur" height="valeur"/>
Pour l'exemple, nous allons dessiner un carré :
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<rect x=".625em" y=".625em" width="6.25em" height="6.25em"/>
</svg>
Pour dessiner ce carré, on utilise la balise <rect/> dans laquelle on renseigne les attributs tels que :
x : détermine l’abscisse de départy : détermine l’ordonnée de départwidth : détermine la longueurheight : détermine la hauteurDans cet exemple, nous avons donc dessiné un carré de 100px de hauteur et de largeur. Par défaut, il s'agit de l'unité pixel. Mais vous pouvez utiliser d'autres unités :
mmcminpcptemex%A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :
div{
margin: auto;
height: 100px;
background-color: #7A5FFF;
width: 100px
}
Il existe également deux attributs permettant, comme en CSS avec la propriété border-radius, de créer des coins arrondis.
En effet, les attributs rx et ry déterminent respectivement le rayon de coin horizontal et le rayon de coin vertical. A noter que si vous souhaitez donner la même valeur aux deux attributs, vous pouvez ne renseigner que l'un des deux attributs. Un exemple ci-dessous :
width et height ne sont pas renseignés, dans ce cas, ceux-ci seront définis à 100%.rect est "auto-fermant".En SVG, un cercle se présente comme ceci :
<circle cx="valeur" cy="valeur" r="valeur" fill="#7A5FFF"/>
Pour créer un cercle en SVG, nous avons besoin des attributs suivants :
cx : définit la coordonnée suivant l'axe x du centre de l'élément.cy : définit la coordonnée suivant l'axe y du centre de l'élément.r : définit le rayon du cercle.Ce qui donne :
A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :
div{
margin: auto;
height: 100px;
border-radius: 50%;
background-color: #7A5FFF;
width: 100px
}
En SVG, une ellipse se présente comme ceci :
<ellipse cx="valeur" cy="valeur" rx="valeur" ry="valeur" fill="#7A5FFF"/>
Ici, nous avons deux rayons représentant le demi-grand-axe (semi-major) et le demi-petit-axe (semi-minor) de l’ellipse.
A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :
div{
margin: auto;
height: 50px;
border-radius: 50%;
background: #7A5FFF;
width: 100px
}
circle est "auto-fermant".En SVG, une ligne se présente comme ceci :
<line x1="valeur" y1="valeur" x2="valeur" y2="valeur"/>
Une ligne consiste en une portion de droite délimitée par deux points, et chaque point est spécifié par deux coordonnées (x et y).
💡 Contrairement aux autres formes, une ligne est invisible par défaut. Il faut ajouter une couleur pour que celle-ci apparaisse.
Dans l'exemple ci-dessus, il nous faut rajouter la propriété stroke-linecap, sinon l'extrémité des coins sera coupée par le cadre SVG (viewBox).
Un exemple ci-dessous :
<svg width="200" height="300" viewBox="0 0 200 200">
<line x1="0" y1="0" x2="200" y2="200" stroke="#7A5FFF" stroke-width="10" stroke-linecap="square"/>
</svg>
A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :
div{
margin: auto;
height: 5px;
background: #7A5FFF;
width: 300px
}
Une ligne polygonale est tout simplement un ensemble de lignes, ayant pour attribut points, comme ceci :
Le code sans remplissage :
<svg width="400px" height="200px" viewBox="0 0 400 200">
<polyline points="20,60 40,80 60,60 80,80 100,60 120,80 140,60 160,80 180,60 200,80 220,60 240,80 260,60 280,80 300,60 320,80 340,60 360,80 380,60" style="fill:none;stroke:black;stroke-width:2px"/>
</svg>
Le code avec remplissage :
<svg width="400px" height="200px" viewBox="0 0 400 200">
<polyline points="20,60 40,80 60,60 80,80 100,60 120,80 140,60 160,80 180,60 200,80 220,60 240,80 260,60 280,80 300,60 320,80 340,60 360,80 380,60" style="fill:red;stroke:black;stroke-width:2px"/>
</svg>
En SVG, un polygone se présente comme ceci (ici un triangle équilatéral, trois côtés égaux) :
<polygon points="50 15, 100 100, 0 100"/>
A titre de comparaison, en CSS, il suffirait de faire quelque chose comme ceci :
div{
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #7A5FFF transparent
}
polygon est "auto-fermant".x et y, à partir du coin en haut à gauche. Celles-ci fonctionnent par paires, séparées par une virgule.points:0 100, 50 15, 100 100 au lieu de points:50 15, 100 100, 0 100.Voici une liste de polygones
Les chemins en SVG sont représentés par l'élément path. C'est en quelque sorte un élément passe-partout permettant de créer n'importe quelle forme, y compris celles que l'on vient de détailler ci-haut.
L'élément path est plus complexe à appréhender dans le sens où il s'agit d'une succession de points qui n'invite pas à la compréhension de prime abord.
L'élément path n'a besoin que d'un seul attribut pour fonctionner : d (c'est aussi une propriété CSS).
Les données contenues dans cet attribut vont être organisées par commandes. Il en existe dix dont les deux plus utilisées sont Moveto et Lineto (symbolisées respectivement par les lettres M et L). Une troisième commande très importante qui va permettre de fermer un chemin est closepath (symbolisée par la lettre Z).
💡 Cette commande n'est pas à négliger. En effet, on pourrait penser qu'il suffit de fermer le chemin en utilisant un slash (comme avec les autres formes de base). Vous allez comprendre pourquoi avec cet exemple comparatif, vous devez fermer tous vos chemins avec la commande Z.
<svg>
<path d="m32.268 60.913L7.096 46.69l-.268-28.912 24.904-14.69L56.904 17.31l.268 28.913" fill="none" stroke-width=3 stroke="#7A5FFF"/>
<path transform=translate(200) d="m32.268 60.913L7.096 46.69l-.268-28.912 24.904-14.69L56.904 17.31l.268 28.913z" fill="none" stroke-width=3 stroke="#7A5FFF"/>
</svg>
💡 A noter que la commande Lineto possède deux commandes raccourcies, à savoir H et V qui vont permettre de tracer des lignes horizontales (H) et verticales (V).
Un exemple ci-dessous :
<svg width="300" height="300">
<path d="M 100,100 H 200 V 200 H 100 Z"/>
</svg>