English

<path>

Dessiner un tracé libre ou complexe

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<path> — Tracé libre SVG

La balise <path> est la primitive SVG la plus puissante. Elle dessine n'importe quelle forme grâce à l'attribut d qui contient une série de commandes : M (déplacer), L (ligne droite), C (courbe de Bezier cubique), Z (fermer le trace).

Quand l'utiliser

Tu veux dessiner une forme qui n'est pas un simple cercle, rectangle ou polygone : une icône personnalisée, un logo, un trace de graphique, une forme organique. La plupart des icônes SVG sont des <path>.

Ce que tu gagnes

Accessibilité : un <path> seul n'a aucune sémantique. Si la forme transmet de l'information, enveloppe-la dans un <svg> avec <title> et <desc>, ou dans un <g> avec aria-label.

Exemple de code

<svg role="img" aria-labelledby="check-title"
     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title id="check-title">Validated</title>
  <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="currentColor" />
</svg>

Pour aller plus loin