Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre SVG » Les formes SVG

Sommaire
  1. Les rectangles et les carrés
  2. Les cercles et les ellipses
  3. Les lignes simples et multiples
  4. Les lignes polygonales et les polygones
  5. Les chemins
Télécharger ce cours en pdf

👉 Les rectangles et les carrés :

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é :

Exemple svg 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épart
  • y : détermine l’ordonnée de départ
  • width : détermine la longueur
  • height : détermine la hauteur

Dans 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 :

  • Le millimètre : mm
  • Le centimètre : cm
  • Le pouce : in
  • Le pica : pc
  • Le point : pt
  • em
  • ex
  • Le pourcentage %

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 :

Exemple svg carré border radius

💡 A retenir à propos des rectangles et des carrés en SVG

  1. Si les attributs width et height ne sont pas renseignés, dans ce cas, ceux-ci seront définis à 100%.
  2. Les rectangles sont dessinés à partir de leur coin supérieur gauche (en haut à gauche).
  3. Par défaut, les rectangles sont noirs si aucun remplissage n’est indiqué.
  4. L’élément rect est "auto-fermant".
  5. Les rectangles qui apparaissent après dans le code seront positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.

👉 Les cercles et les ellipses :

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 :

Exemple svg cercle

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.

Exemple svg 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

}


💡 A retenir à propos des cercles et des ellipses en SVG

  1. L’élément circle est "auto-fermant".
  2. Le cercle est positionné à partir de son centre.
  3. La position du centre se calcule à partir du coin en haut à gauche.
  4. Comme chaque forme en SVG, la couleur par défaut est noire.
  5. Si l’un des attributs n’est pas renseigné, par défaut il équivaut à zéro.

👉 Les lignes simples et multiples :

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 :

Exemple ligne svg


<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 

}

👉 Les lignes polygonales et les polygones :

Une ligne polygonale est tout simplement un ensemble de lignes, ayant pour attribut points, comme ceci :

Exemple ligne svg

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"/>


Exemple ligne svg

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

} 

💡 A retenir à propos des lignes polygonales et des polygones en SVG

  1. L’élément polygon est "auto-fermant".
  2. On construit un polygone en utilisant les coordonnées x et y, à partir du coin en haut à gauche. Celles-ci fonctionnent par paires, séparées par une virgule.
  3. Il n'y a pas de direction établie dans l'ordre des points. Par exemple, concernant le triangle plus haut, on aurait pu écrire points:0 100, 50 15, 100 100 au lieu de points:50 15, 100 100, 0 100.
  4. Vous pouvez vous passer de reprendre la première paire de coordonnées, la fermeture de la forme se fait automatiquement.

Voici une liste de polygones

👉 Les chemins :

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.

Exemple 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 :

Exemple commandes H et V


<svg width="300" height="300"> 
<path d="M 100,100 H 200 V 200 H 100 Z"/> 
</svg>