Wiederverwenden und verknüpfen: use, symbol, a und image

Teil 2: Koordinaten und Wiederverwendung · Kapitel 7 von 12 · Aktualisiert am 10. Oktober 2026 · 4 Minuten Lesezeit

Vier Elemente, eine gemeinsame Idee: Sie alle verweisen über href auf etwas anderes. Mit use auf Teile derselben Grafik, mit a auf andere Seiten, mit image auf eine Bilddatei.

Einmal zeichnen, oft zeigen

Das Element <use> erzeugt eine Kopie eines anderen Elements. Es verweist mit href="#id" auf das Original und kann es mit x und y verschieben. Ändert sich das Original, ändern sich alle Kopien mit. Für Zeichnungen mit vielen gleichen Teilen, etwa Bäume in einer Landschaft oder Sitze in einem Saalplan, spart das viel Code.

Das Original kann sichtbar irgendwo in der Grafik stehen oder unsichtbar in <defs> liegen. Was in defs steht, wird nur als Vorlage bereitgehalten und nicht gezeichnet.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 120" width="330" height="120">
  <defs>
    <g id="us-baum">
      <rect x="-3" y="-10" width="6" height="20" fill="#7a4a24"/>
      <polygon points="0,-60 -22,-8 22,-8" fill="#2d6a3e"/>
    </g>
  </defs>
  <line x1="0" y1="110" x2="330" y2="110" stroke="#9aa3b2" stroke-width="2"/>
  <use href="#us-baum" x="40" y="100"/>
  <use href="#us-baum" x="100" y="100"/>
  <use href="#us-baum" transform="translate(165 100) scale(1.4)"/>
  <use href="#us-baum" x="230" y="100"/>
  <use href="#us-baum" transform="translate(290 100) scale(0.7)"/>
</svg>

Eine Einschränkung: Die Kopie lässt sich von außen nur begrenzt gestalten. Hat das Original eine feste Füllfarbe, kann eine einzelne Kopie sie nicht überschreiben. Lässt du die Farbe am Original weg und setzt sie am use-Element, erben die Teile sie dagegen. Mit fill="currentColor" im Original übernehmen die Kopien die Textfarbe ihrer Umgebung.

symbol: Vorlagen mit eigener viewBox

Ein <symbol> ist eine Vorlage, die nie direkt gezeichnet wird, sondern nur über use erscheint. Anders als eine Gruppe kann es eine eigene viewBox haben. Dadurch lässt es sich beim Einsetzen mit width und height in jeder Größe darstellen, ohne dass du umrechnen musst.

Daraus ergibt sich das bekannteste Einsatzgebiet: Icon-Sprites. Alle Icons einer Website liegen als Symbole in einer einzigen Datei oder in einem versteckten SVG am Anfang der Seite. Jede Verwendung ist dann eine kurze Zeile.

<svg style="display:none">
  <symbol id="icon-pfeil" viewBox="0 0 24 24">
    <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<a href="/weiter/">Weiter <svg width="20" height="20"><use href="#icon-pfeil"/></svg></a>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 90" width="330" height="90">
  <defs>
    <symbol id="us-pfeil" viewBox="0 0 24 24">
      <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>
  </defs>
  <use href="#us-pfeil" x="20" y="33" width="24" height="24" color="#14171c"/>
  <use href="#us-pfeil" x="80" y="21" width="48" height="48" color="#1f5fd1"/>
  <use href="#us-pfeil" x="170" y="5" width="80" height="80" color="#c2410c"/>
</svg>

Ein Sprite in einer externen Datei, etwa <use href="/icons.svg#icon-pfeil"/>, wird vom Browser einmal geladen und gecacht. Das funktioniert allerdings nur, wenn die Datei von derselben Domain kommt.

Hyperlinks mit a

Innerhalb von SVG verlinkst du mit dem Element <a>, genau wie in HTML. Es umschließt die Formen, die klickbar sein sollen, und trägt das Ziel in href. Klickbar ist dabei nur die tatsächlich gezeichnete Fläche, nicht ein Rechteck darum herum. Ein Kreis reagiert also nur innerhalb des Kreises. Mit Links in SVG entstehen klickbare Karten, Grundrisse oder Diagramme, bei denen jedes Segment auf eine eigene Seite führt.

Damit der Link auch für Screenreader verständlich ist, braucht er einen Namen. Enthält er Text, ist das automatisch der Fall. Besteht er nur aus Formen, hilft ein <title> als erstes Kind oder ein aria-label am Link.

Rasterbilder mit image

Fotos lassen sich mit Vektoren kaum sinnvoll beschreiben. Deshalb kann SVG Rasterbilder einbinden: <image href="foto.jpg" x="0" y="0" width="200" height="150"/>. Unterstützt werden mindestens JPEG und PNG sowie andere SVG-Dateien, moderne Browser zeigen auch WebP und AVIF. Das Bild verhält sich wie jedes andere Element: Es kann transformiert, beschnitten und maskiert werden.

Wie das Bild in seinen Rahmen passt, regelt auch hier preserveAspectRatio, das im Kapitel viewBox und Koordinaten erklärt ist. Ein beliebter Einsatz ist ein Foto, das per Clip-Pfad in eine runde oder unregelmäßige Form geschnitten wird. Das zeigt das Kapitel Beschneiden und Maskieren.