Le format SVG permet d'afficher des formes nettes, légères et redimensionnables. Nous allons voir progressivement ce qu'est une image vectorielle, comment l'utiliser avec une balise image classique et comment écrire une balise svg simple.
Qu'est-ce qu'un élément vectoriel ?
Quand vous utilisez un SVG, vous n'affichez pas une image composée d'une grille de petits carrés colorés. Vous affichez un dessin décrit par du code : des lignes, des courbes, des formes et des couleurs.
C'est pour cette raison qu'un SVG peut être agrandi ou réduit sans devenir flou. Le navigateur recalcule simplement les formes à la bonne taille.
Vecteur VS pixel
Une image en pixels, comme un JPG ou un PNG, est composée d'un nombre fixe de points. Si vous l'agrandissez trop, vous finissez par voir les carrés qui la composent.
Un SVG fonctionne autrement. Il stocke des instructions de dessin. Une ligne reste une ligne, un cercle reste un cercle, même si vous changez la taille de l'image.
Voici la même banane affichée en 24x24 pixels puis en 512x512 pixels. Le sujet est identique, mais le comportement n'est pas le même quand on change brutalement d'échelle.
Ici, il n'y a pas de différence entre une image en pixel et en vectoriel.
En revanche, sur la grande version, le SVG garde des contours propres alors que le pixel finit par montrer ses limites.
On peut donc affirmer :
- Une image en pixels est souvent pratique pour une photo.
- Une image vectorielle est souvent plus adaptée pour un logo, une icône ou un schéma.
- Un SVG reste généralement très net sur les écrans haute définition.
Domaines d'utilisation
Le SVG est particulièrement utile quand vous avez besoin d'un visuel simple, propre et redimensionnable.
- les logos,
- les icônes,
- les pictogrammes,
- les schémas,
- les petites illustrations.
En revanche, pour une photo riche en détails, on continue généralement à utiliser des formats comme le JPG ou le WebP.
Importer une image SVG dans une balise <img>
La façon la plus simple d'utiliser un SVG consiste à l'appeler comme n'importe quelle autre image, avec une balise <img>.
<img src="images/banana.svg" alt="Banane">
Ici, le navigateur charge le fichier banana.svg et l'affiche dans la page.
Comme pour les autres images, pensez toujours à renseigner l'attribut alt. Il sert à décrire l'image si elle ne s'affiche pas, et il aide aussi les technologies d'assistance.
Vous pouvez également redimensionner votre SVG avec CSS :
<img class="icone" src="images/banana.svg" alt="Banane">
.icone{
width: 80px;
height: auto;
}
Attention ! Si vous utilisez un SVG via <img>, vous affichez un fichier externe. C'est pratique, mais vous ne pouvez pas manipuler aussi facilement les formes internes du dessin avec votre HTML.
À propos des balises images
Si vous avez besoin de revoir le fonctionnement général de <img>, retournez voir le cours sur les balises images.
La balise <svg>
Une autre solution consiste à écrire directement le SVG dans votre code HTML. Dans ce cas, vous utilisez une balise <svg> qui devient votre zone de dessin.
À l'intérieur, vous placez ensuite des éléments qui dessinent des formes. C'est cette approche qui vous donne le plus de contrôle, parce que le SVG fait vraiment partie de la page.
Introduction au <svg>
Un SVG incorporé dans le HTML peut contenir un cercle, un rectangle, un tracé complexe ou encore des groupes d'éléments. Le navigateur lit ces instructions et construit le dessin à l'écran.
<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="70" r="50" fill="#007890" />
</svg>
Dans cet exemple :
-
widthetheightdéfinissent la taille affichée, -
viewBoxdéfinit la zone de dessin interne, -
la balise
<circle>dessine un cercle.
Attributs width et height
Les attributs width et height définissent la taille affichée du SVG dans la page. Ici, notre dessin occupe 140 pixels de large et 140 pixels de haut.
Ce sont des dimensions d'affichage. Elles ne définissent pas à elles seules la logique interne du dessin.
viewBox
L'attribut viewBox définit la zone de dessin interne. On peut le voir comme un repère invisible dans lequel les formes sont placées.
Dans viewBox="0 0 140 140", les deux premiers nombres indiquent le point de départ, et les deux suivants indiquent la largeur et la hauteur du repère.
C'est grâce à viewBox qu'un même SVG peut être agrandi ou réduit proprement.
Attribut xmlns
L'attribut xmlns indique au navigateur qu'il s'agit bien de code SVG. En pratique, vous le verrez très souvent sous cette forme :
xmlns="http://www.w3.org/2000/svg"
Il vaut mieux le conserver. C'est lui qui aide le navigateur à interpréter correctement le contenu du SVG.
Les éléments qui constituent un SVG
Une fois la balise <svg> en place, vous pouvez y ajouter différents éléments de dessin. Voici les plus utiles pour commencer.
<rect>
La balise <rect> dessine un rectangle. Vous définissez sa position avec x et y, puis sa taille avec width et height.
<svg width="180" height="120" viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="140" height="80" fill="#f6c358" />
</svg>
<circle>
La balise <circle> dessine un cercle. Son centre est défini avec cx et cy, puis son rayon avec r.
<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
<circle cx="70" cy="70" r="50" fill="#007890" />
</svg>
<path>
La balise <path> sert à dessiner des formes libres ou complexes. C'est souvent l'élément le plus puissant d'un SVG, parce qu'il peut représenter presque n'importe quel tracé.
Son fonctionnement repose sur l'attribut d. Cet attribut contient une suite d'instructions qui indiquent au navigateur où commencer, où tracer des lignes, où dessiner des courbes et quand fermer la forme.
<svg width="180" height="120" viewBox="0 0 180 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20 90 L90 20 L160 90 Z" fill="#00a7c0" />
</svg>
Dans cet exemple :
-
M20 90place le point de départ en bas à gauche, -
L90 20trace une ligne jusqu'au sommet, -
L160 90trace une nouvelle ligne vers la droite, -
Zferme automatiquement la forme en revenant au point de départ.
Autrement dit, notre path dessine ici un triangle. Plus vous combinez d'instructions, plus vous pouvez obtenir des formes riches. C'est pour cela que beaucoup de logos ou d'icônes SVG sont construits avec plusieurs balises <path>.
<g>
La balise <g> sert à grouper plusieurs éléments. C'est pratique pour leur appliquer un style commun ou pour mieux organiser votre dessin.
<svg width="220" height="120" viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<g fill="#44c4a1">
<circle cx="60" cy="60" r="24" />
<rect x="110" y="36" width="48" height="48" />
</g>
</svg>
<defs>
La balise <defs> sert à stocker des définitions réutilisables. On y place par exemple un dégradé, un motif ou un symbole que l'on utilisera ensuite ailleurs dans le SVG.
<svg width="220" height="120" viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="degrade-banane" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#fcd462" />
<stop offset="100%" stop-color="#f6c358" />
</linearGradient>
</defs>
<rect x="20" y="20" width="180" height="80" rx="16" fill="url(#degrade-banane)" />
</svg>
La propriété CSS fill
Quand vous travaillez avec des formes SVG, la propriété CSS fill sert à définir la couleur de remplissage. Si vous coloriez l'intérieur d'un cercle ou d'un rectangle, c'est généralement fill qui s'en charge.
Vous pouvez l'écrire directement dans la balise, ou la piloter avec du CSS si le SVG est incorporé dans le HTML.
Attention ! Un SVG chargé via une balise <img> est un fichier image externe. Vous pouvez le redimensionner, mais vous ne pouvez pas cibler ses formes internes avec fill depuis le CSS de la page.
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle class="pastille" cx="60" cy="60" r="40" />
</svg>
.pastille{
fill: #ffb100;
}
Aller plus loin avec le CSS
Puisqu'un SVG incorporé fait partie du HTML, vous pouvez aussi lui appliquer des états CSS. Le cas le plus simple consiste à changer une couleur au survol avec :hover.
<svg class="icone-survol" width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
<circle class="fond" cx="70" cy="70" r="50" />
</svg>
.icone-survol .fond{
fill: #00a7c0;
}
.icone-survol:hover .fond{
fill: #e6266d;
}
Dans cet exemple, le cercle change de couleur au survol. C'est un bon aperçu du potentiel des SVG incorporés : une fois dans le HTML, ils peuvent réagir comme les autres éléments de la page.