Balise HTML svg - Apprendre HTML

La balise <svg> est utilisée comme conteneur pour les graphiques SVG.

SVG (Scalable Vector Graphics) est un langage pour les graphiques bidimensionnels basé sur XML. Contrairement aux formats raster tels que PNG ou JPEG, une image SVG est décrite par des formes et des coordonnées plutôt que par une grille fixe de pixels, ce qui lui permet de rester nette à n'importe quelle taille et de s'adapter sans perte de qualité. SVG prend également en charge l'interactivité, l'animation et un accès complet à chaque élément via le DOM.

Cette page explique comment intégrer du SVG directement en HTML, le système de coordonnées viewBox (concept fondamental), les formes de dessin de base, comment rendre le SVG accessible, les attributs de l'élément <svg>, et comment SVG se compare à <canvas>.

Syntaxe `<svg>`

La balise <svg> fonctionne par paires. Les formes que vous souhaitez dessiner s'écrivent entre les balises ouvrante (<svg>) et fermante (</svg>).

Exemple de la balise HTML `<svg>` :

Balise HTML <svg>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Essayez vous-même »

Danger

L'attribut xmlns n'est requis que pour l'élément <svg> extérieur des documents SVG autonomes (un fichier .svg). Il n'est pas nécessaire pour les éléments <svg> internes ni lorsque vous intégrez du SVG directement dans un document HTML.

Exemple de la balise HTML `<svg>` dessinant une ellipse :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Essayez vous-même »

Le viewBox et le système de coordonnées SVG

Le viewBox est le concept le plus important en SVG. Il définit le système de coordonnées dans lequel toutes vos formes sont dessinées, et c'est ce qui rend un SVG véritablement évolutif.

Les attributs width et height définissent la taille de la zone SVG sur la page (en pixels CSS). L'attribut viewBox, en revanche, définit le système de coordonnées interne à l'aide de quatre nombres :

viewBox="min-x min-y width height"

min-x, min-y — les coordonnées du coin supérieur gauche de la zone de visualisation.
width, height — la largeur et la hauteur de la zone de visualisation en unités utilisateur.

Le navigateur mappe ensuite cette zone de visualisation interne sur les dimensions width/height à l'écran, en effectuant une mise à l'échelle si nécessaire. Ainsi, un cercle dessiné à cx="50" cy="50" avec viewBox="0 0 100 100" se trouve toujours au centre, quelle que soit la taille du rendu SVG.

L'exemple ci-dessous dessine le même cercle dans deux SVG. Le premier s'appuie uniquement sur width/height, donc les coordonnées sont des coordonnées en pixels et le cercle est lié à cette taille. Le second ajoute un viewBox, de sorte que le dessin s'adapte pour remplir une zone beaucoup plus grande tandis que le code reste identique :

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Comme le second SVG sépare le système de coordonnées (viewBox) de la taille rendue (width/height), vous pouvez le redimensionner — même avec CSS — et chaque forme s'adapte proportionnellement. C'est pourquoi viewBox est essentiel pour les icônes et illustrations responsives.

Les formes SVG

Vous construisez des dessins SVG à partir d'un petit ensemble d'éléments de formes de base placés à l'intérieur de <svg>. Chacun utilise ses propres attributs de coordonnées et de dimensionnement :

<rect> — un rectangle, positionné avec x/y et dimensionné avec width/height ; rx/ry arrondit les coins. Voir Rectangle SVG.
<circle> — un cercle défini par son centre cx/cy et son rayon r. Voir Cercle SVG.
<ellipse> — comme un cercle mais avec deux rayons, rx et ry. Voir Ellipse SVG.
<line> — une ligne droite de (x1,y1) à (x2,y2). Voir Ligne SVG.
<polygon> — une forme fermée définie par une liste de points. Voir Polygone SVG.
<path> — la forme la plus puissante ; son attribut d encode des lignes, des courbes et des arcs pour dessiner presque n'importe quoi. Voir Chemin SVG.

La plupart des formes partagent les attributs de présentation fill (couleur intérieure), stroke (couleur du contour) et stroke-width (épaisseur du contour). Pour la liste complète des éléments et attributs, voir la Référence SVG.

Accessibilité

Le SVG en ligne fait partie du DOM de la page, donc les lecteurs d'écran peuvent le lire — mais seulement si vous lui fournissez du texte accessible. Une forme décorative sans étiquette ne sera annoncée d'aucune manière utile.

Pour un SVG significatif (icônes, graphiques, logos), procédez comme suit :

Ajoutez un élément <title> comme premier enfant — il sert de nom accessible (et s'affiche comme infobulle).
Ajoutez optionnellement un élément <desc> pour une description plus longue.
Ajoutez role="img" à l'élément <svg> afin que les technologies d'assistance le traitent comme une seule image.
Référencez le texte avec aria-labelledby, ou utilisez directement aria-label.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Si un SVG est purement décoratif et n'apporte aucune information, masquez-le aux technologies d'assistance avec aria-hidden="true" à la place.

Différences entre SVG et Canvas

À première vue, SVG et Canvas font la même chose : dessiner des éléments graphiques vectoriels à l'aide de points de coordonnées. Cependant, il existe des différences entre eux. Examinons-les.

SVG est un langage pour décrire des graphiques 2D en XML, tandis que Canvas est utilisé pour dessiner des graphiques 2D à la volée (avec JavaScript).

SVG ressemble à un programme de "dessin". Le dessin est une instruction de dessin pour chaque forme, et n'importe quelle partie de n'importe quelle forme peut être modifiée. Les dessins sont orientés forme.

Canvas ressemble à un programme de "peinture". Lorsque les pixels atteignent l'écran, c'est votre dessin. Vous ne pouvez modifier les formes qu'en les écrasant avec d'autres pixels. Les peintures sont orientées pixel.

SVG est basé sur XML, ce qui signifie que chaque élément est disponible dans le DOM SVG. En SVG, la forme dessinée est mémorisée en tant qu'objet. En Canvas, le navigateur oublie la forme dessinée immédiatement après qu'elle a été dessinée. Si vous devez apporter des modifications au dessin, vous devez le redessiner depuis le début.

Attributs

Attribut	Valeur	Description
height	longueur, pourcentage	Définit la hauteur de l'élément SVG sur la page.
width	longueur, pourcentage	Définit la largeur de l'élément SVG sur la page.
viewBox	min-x min-y width height	Définit la position et la taille du système de coordonnées interne (le viewport SVG).
preserveAspectRatio	alignement + meetOrSlice (voir ci-dessous)	Contrôle la façon dont le `viewBox` est mis à l'échelle et aligné lorsque son ratio d'aspect diffère de la zone SVG.
x	longueur, pourcentage	Définit la coordonnée x d'un conteneur SVG imbriqué. N'a aucun effet sur l'élément `<svg>` le plus extérieur.
y	longueur, pourcentage	Définit la coordonnée y d'un conteneur SVG imbriqué. N'a aucun effet sur l'élément `<svg>` le plus extérieur.

Valeurs de preserveAspectRatio

Lorsque le ratio d'aspect du viewBox ne correspond pas à la zone SVG, preserveAspectRatio détermine comment l'ajuster. Il prend une valeur d'alignement optionnellement suivie d'une valeur meetOrSlice :

Alignement (bord/centre d'ancrage) :

none — étirer pour remplir, en ignorant le ratio d'aspect.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (par défaut), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet ou slice (méthode de mise à l'échelle) :

meet (par défaut) — mise à l'échelle jusqu'à ce que l'ensemble du viewBox tienne dans la zone.
slice — mise à l'échelle jusqu'à ce que le viewBox couvre toute la zone, en rognant le débordement.

Attributs supprimés

Les attributs version, baseProfile, contentScriptType et contentStyleType étaient utilisés dans SVG 1.1 mais sont dépréciés/supprimés dans SVG 2 et ne sont plus nécessaires. SVG 2 est la révision actuelle de la spécification SVG, plus étroitement intégrée avec HTML et CSS ; les navigateurs modernes restituent le SVG sans ces attributs.

Pratique

Quelles affirmations concernant la balise SVG sont correctes ? (Sélectionnez toutes les réponses applicables)

La balise SVG est un conteneur pour les graphiques vectoriels en HTML.Les graphiques SVG ne perdent PAS de qualité lors d'un zoom ou d'un redimensionnement.Les graphiques SVG sont basés sur des pixels, comme PNG ou JPEG.L'attribut viewBox définit le système de coordonnées interne du SVG.L'attribut xmlns est requis pour le SVG en ligne dans un document HTML.

Syntaxe <svg>

Exemple de la balise HTML <svg> :

Exemple de la balise HTML <svg> dessinant une ellipse :