Tuto SVG 06 - Groupes, defs et use

Public visé: dev lambda.

Objectif

• Réutiliser des formes et organiser le dessin.

Références W3C

• SVG 2 - Structuring: https://www.w3.org/TR/SVG2/struct.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120">
  <defs>
    <g id="badge">
      <circle cx="20" cy="20" r="16" fill="#3a6ea5"/>
      <text x="20" y="25" text-anchor="middle" font-size="10" fill="white">SVG</text>
    </g>
  </defs>
  <use href="#badge" x="10" y="10"/>
  <use href="#badge" x="80" y="10"/>
  <use href="#badge" x="150" y="10"/>
</svg>

tutos-svg-06-groupes-defs-use.svg

À retenir

• defs stocke des éléments réutilisables.
• use instancie un élément par référence (href="#id").
• g permet d'appliquer un style ou une transformation à un groupe.

Exercice

• Ajoute un transform="scale(1.2)" au deuxième use.