13: SVG als Iconsystem – Das `use`-Element

SVG hat ein sehr cooles und mächtiges Element namens <use>. Es ist vom Konzept her ziemlich einfach. Es findet ein anderes Stück SVG-Code, auf das per ID verwiesen wird, und klont es in das <use>-Element.

Der grundlegendste Anwendungsfall wäre: Ich habe diese Form(en) bereits einmal auf der Seite gezeichnet und möchte sie woanders erneut zeichnen. Holen Sie sich diese Form(en) und zeichnen Sie sie erneut.

Wir können diese Fähigkeit als grundlegendes Konzept für (Trommelwirbel!) ein ganzes Iconsystem nutzen! Wir können alle Formen, die wir auf der Seite verwenden möchten, in einem großen SVG-Block zusammenfassen. Wir werden sie alle in einen <defs>-Tag einschließen, was eine semantische Möglichkeit ist zu sagen: „Wir definieren hier nur Dinge, die wir später verwenden werden.“ Es stellt auch sicher, dass sie nicht gerendert werden (aber Sie sollten dem <svg> selbst auch display: none; geben).

Es funktioniert so

<svg class="icon-basketball">
  <use xlink:href="#basketball"></use>
</svg>

Das seltsam aussehende Attribut xlink:href verweist auf eine ID an anderer Stelle. Diese ID kann sich auf jedem Formelement befinden, wie einem <rect> oder <path>, oder sie kann sich auf einer Gruppe von Elementen befinden, wie einem <g>.

Am besten eignet sich in diesem Fall für ein Iconsystem das <symbol>-Element. Zusätzlich zur semantischen Korrektheit (ein Icon ist ein Symbol, nicht wahr?) kann das <symbol>-Element sein eigenes viewBox-Attribut und Zugänglichkeitsinformationen wie <title>- und <desc>-Tags enthalten. Dies macht die Implementierung sehr einfach (wie oben gezeigt).

Sie müssen also nur sicherstellen, dass dies irgendwo anders im Dokument definiert ist

<svg style="display: none;">
  <defs>
    <symbol id="basketball" viewBox="0 0 100 100">
      <title>Basketball</title>
      <path d="M28.1,3 ... "/>
    </symbol>
  </defs>
</svg>

Siehe den Pen JoDmd von Chris Coyier (@chriscoyier) auf CodePen.