SVG a un élément très cool et puissant appelé . C'est assez simple dans le concept. Il trouve un autre morceau de code SVG, référencé par ID, et le clone à l'intérieur de l' élément.
Le cas d'utilisation le plus basique serait: j'ai déjà dessiné cette ou ces formes une fois sur la page, et je veux les dessiner à nouveau ailleurs. Allez chercher cette (ces) forme (s) et dessinez-la à nouveau.
Nous pouvons utiliser cette capacité comme concept racine pour (roulement de tambour!) Et tout le système d'icônes! Nous pouvons prendre toutes les formes que nous avons l'intention d'utiliser sur la page dans un seul gros bloc SVG. Nous les envelopperons tous dans une balise qui est une manière sémantique de dire "Nous définissons simplement ces éléments à utiliser plus tard." Cela garantit également qu'ils ne seront pas rendus (mais vous devriez également display: none;le lui - même.
Cela fonctionne comme ceci:
Cet xlink:hrefattribut d' aspect génial fait référence à un identifiant ailleurs. Cet identifiant peut se trouver sur n'importe quel élément de forme, comme un ou , ou sur un groupe d'éléments comme un .
Mieux encore, dans le cas d'un système d'icônes, il peut s'agir d'un élément. En plus d'être correct sémantiquement (une icône est un symbole, non?), L' élément peut porter son propre attribut viewBox et ses propres informations d'accessibilité, comme les balises et . Cela rend la mise en œuvre très facile (comme indiqué ci-dessus).
Il vous suffit donc de vous assurer que cela est défini ailleurs dans le document:
Basketball Voir le Pen JoDmd de Chris Coyier (@chriscoyier) sur CodePen.