SVG Symbol

Eine Alternative zu schriftbasierten Icons — SVG-Symbol-Sprites zum direkten Einbetten skalierbarer, mehrfarbiger Icons in HTML.

Was sind SVG-Symbol-Sprites?

SVG-Symbol-Sprites bündeln mehrere SVG-Icons in einer einzigen Datei. Jedes Icon ist in einem <symbol>-Element mit einer eindeutigen id definiert. Um ein Icon zu verwenden, verweisen Sie mit <use href="#icon-id"> darauf. Das Sprite wird einmal geladen — entweder inline oder als externe Datei — und einzelne Icons werden überall auf der Seite gerendert.

Das ist ein grundlegend anderer Ansatz als bei Icon-Fonts. Anstatt Unicode-Codepunkte auf Schriftglyphen abzubilden, verwenden Sie native SVG-Elemente. Jedes Icon behält seine vollständigen SVG-Fähigkeiten: mehrere Farben, Farbverläufe, Filter und detaillierte Barrierefreiheits-Attribute. Der Kompromiss ist ein etwas komplexeres Markup und Styling-Konventionen im Vergleich zum reinen CSS-Ansatz von Font-Icons.

Funktionsweise

Eine Sprite-Datei ist ein reguläres SVG-Dokument mit einem oder mehreren <symbol>-Elementen. Jedes Symbol definiert ein eigenständiges Icon mit seinem eigenen viewBox:

icons.svg (die Sprite-Datei) 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

Das äußere <svg> ist mit style="display:none" ausgeblendet, damit es keinen Platz auf der Seite einnimmt. Die darin enthaltenen Symbole sind unsichtbar, bis sie referenziert werden. Um ein Icon zu rendern, verwenden Sie das <use>-Element:

Symbole in HTML verwenden 
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Gestalten Sie die Icons mit CSS, dabei fill und stroke anstelle der schriftbasierten color-Eigenschaft verwenden:

CSS für SVG-Icons 
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

Die Verwendung von fill: currentColor ermöglicht es dem Icon, die Textfarbe seines übergeordneten Elements zu erben, ähnlich wie Font-Icons mit der color-Eigenschaft funktionieren.

Symbole vs. Font-Icons

    Vorteile von Symbolen
  • Mehrfarb-Unterstützung — jeder Pfad kann seine eigene Füllung und Kontur haben
  • Jedes Icon ist ein echtes SVG-Element mit besserer Barrierefreiheit
  • Kein Unicode-Mapping erforderlich — Icons durch lesbare Namen referenzieren
  • Schärferes Rendering — keine Hinting-Probleme oder Subpixel-Artefakte
  • Einzelne Icon-Teile können unabhängig animiert werden
  • Funktioniert mit allen SVG-Funktionen: Farbverläufe, Filter, Clip-Pfade, Masken
    Nachteile von Symbolen
  • Ausführlicheres Markup (<svg><use> vs. <i class="icon">)
  • Kein einfaches Styling mit CSS color — fill/stroke erforderlich
  • Externe Sprites haben CORS-Implikationen für Cross-Origin-Laden
  • Größere Gesamtdateigröße als komprimierte Schriftformate
  • Mehr HTML-Gewicht pro Icon-Verwendung
  • Kein ::before/::after-Pseudo-Element-Support

Ladestrategien

Es gibt drei Hauptmethoden zum Laden eines SVG-Symbol-Sprites in eine Seite, jede mit anderen Abwägungen:

Inline-Sprite

Fügen Sie das gesamte Sprite-SVG direkt in den HTML-<body> ein. Das ist der einfachste Ansatz — keine CORS-Probleme, keine zusätzliche HTTP-Anfrage. Die Symbole sind sofort für jede <use>-Referenz auf der Seite verfügbar. Funktioniert am besten für Single-Page-Anwendungen oder bei einem kleinen Icon-Set (unter ~50 Icons).

Externes Sprite

Laden Sie das Sprite als externe Datei über <use href="icons.svg#home">. Das hält Ihr HTML sauber und ermöglicht dem Browser, das Sprite separat von der Seite zu cachen. Es hat jedoch CORS-Implikationen: das Sprite muss vom selben Ursprung ausgeliefert werden, oder der Server muss geeignete Access-Control-Allow-Origin-Header setzen. Beachten Sie, dass Internet Explorer keine externen <use>-Referenzen unterstützt — verwenden Sie das svg4everybody-Polyfill, wenn Sie IE-Unterstützung benötigen.

JS-Injektion

Laden Sie die Sprite-Datei über fetch() und injizieren Sie sie zur Laufzeit in das DOM. Das kombiniert die Cachierbarkeit externer Sprites mit der Zuverlässigkeit inline Sprites — das injizierte SVG wird Teil des Dokuments, sodass <use>-Referenzen ohne CORS-Einschränkungen funktionieren. Bobcorn generiert diesen Ansatz: eine JS-Datei, die alle Symbole beim Laden abruft und registriert.

JS-Injektionsansatz (Bobcorn-Ausgabe) 
<!-- Load the generated JS sprite -->
<script src="icons-symbol.js"></script>

<!-- Then use normally: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

Die JS-Datei erstellt ein verstecktes <svg>-Element mit allen <symbol>-Definitionen und fügt es dem Dokument-Body hinzu. Nach dem Laden werden Icons identisch zum Inline-Ansatz referenziert.

Wann SVG-Symbole verwenden

SVG-Symbol-Sprites sind die richtige Wahl, wenn Ihr Projekt Fähigkeiten benötigt, die Font-Icons nicht bieten können:

  • Mehrfarbige Icons — wenn Icons mehr als eine Farbe, Farbverläufe oder komplexe Füllungen verwenden, die eine einzelne Glyphen-Schrift nicht darstellen kann
  • Barrierefreiheit hat höchste Priorität — jedes Icon kann ein <title>-Element und ein aria-label-Attribut enthalten, das Screenreadern aussagekräftige Beschreibungen gibt
  • Animierte Icon-Teile — Sie müssen einzelne Pfade oder Gruppen innerhalb eines Icons animieren (z. B. ein rotierendes Zahnrad in einem Einstellungs-Icon)
  • SVG-intensive Projekte — Ihre Anwendung verwendet bereits umfangreich Inline-SVG, sodass Symbole natürlich in die bestehende Architektur passen
  • Maximale Rendering-Schärfe — Hinting kann bei kleinen Größen Ausrichtungsprobleme verursachen; SVG-Symbole rendern pixelgenau in jeder Dimension

Wann Font-Icons bevorzugen

Font-Icons sind in mehreren gängigen Szenarien die bessere Wahl:

  • Große Icon-Sets (200+) — eine komprimierte WOFF2-Schriftdatei ist deutlich kleiner als ein SVG-Sprite mit der gleichen Anzahl Icons
  • Alle Icons monochrom — wenn jedes Icon eine Farbe hat, bieten Font-Icons die einfachste Integration ohne Abstriche
  • Reine CSS-Integration — Font-Icons benötigen nur einen Stylesheet-Link und CSS-Klassen, kein JavaScript oder zusätzliches Markup
  • Legacy-Systeme — Projekte, die bereits Font-Icons verwenden, gewinnen nicht genug durch den Wechsel zu Symbolen, um den Migrationsaufwand zu rechtfertigen
  • Pseudo-Element-Unterstützung — Sie benötigen Icons in ::before- oder ::after-Pseudo-Elementen, die nur mit Schriftglyphen funktionieren
In Bobcorn
Bobcorn kann Ihre Icons als JS-Symbol-Sprite-Datei neben den Schriftdateien exportieren. Aktivieren Sie die JS-Option im Export-Dialog. Die generierte Datei erstellt ein Inline-SVG-Sprite und registriert alle Symbole beim Laden. Sie können beide Ansätze im selben Projekt verwenden — Schriften für einfache UI-Icons, Symbole für komplexe farbige Illustrationen.
Tipp
Sie müssen sich nicht für einen der beiden Ansätze entscheiden. Viele Design-Systeme verwenden Font-Icons für den Großteil ihrer monochromen UI-Icons (Buttons, Navigation, Formularelemente) und SVG-Symbole für einige wenige mehrfarbige Illustrationen oder animierte Icons. Bobcorns Export-Dialog ermöglicht es Ihnen, beides in einem einzigen Export zu generieren.