Drei Wege, ein Ziel
SVG ist das flexibelste Bildformat im Web — auch beim Einbinden. Es gibt drei gängige Wege, und die Wahl ist keine Geschmacksfrage, sondern hängt vom Zweck ab:
- Inline — der SVG-Code steht direkt im HTML.
- img-Tag — das SVG wird wie ein Bild geladen.
- CSS-Hintergrund — das SVG als
background-image.
Inline: für Styling und Animation
Beim Inline-Einbinden steht der komplette SVG-Code (<svg>…</svg>) direkt im HTML. Der große Vorteil: Du hast Zugriff auf das Innere des SVG.
- Per CSS stylen: Farben ändern, per
currentColorautomatisch die Textfarbe übernehmen — ideal für Icons, die sich an Hell-/Dunkelmodus anpassen. - Per JavaScript animieren: einzelne Pfade bewegen, auf Interaktionen reagieren.
- Kein zusätzlicher Request: Das SVG ist Teil des HTML.
Die Kehrseite: Inline-SVGs werden nicht separat gecacht und blähen das HTML auf — besonders, wenn dasselbe Icon zwanzigmal auf einer Seite steht. Für interaktive, umfärbbare Icons trotzdem meist die richtige Wahl.
img-Tag: für in sich geschlossene Bilder
Ist das SVG ein fertiges Bild (Logo, Illustration), das nicht umgefärbt werden muss, ist das img-Tag die bessere Wahl:
<img src="/logo.svg" alt="Firmenlogo" width="160" height="40">- Wird gecacht: Bei Wiederholung über mehrere Seiten lädt es aus dem Browser-Cache.
- Schlankes HTML: nur eine Zeile statt hunderter SVG-Code-Zeilen.
- alt-Text: für Barrierefreiheit und Bildersuche.
Der Preis: kein Zugriff aufs Innere per CSS/JS. Für ein Logo, das immer gleich aussieht, ist das kein Verlust.
CSS-Hintergrund: für Deko
Reine Dekoration (Muster, ein Icon im Button-Hintergrund, ein Verlaufsmuster) gehört in den CSS-background-image:
.icon-suche {
background-image: url("/search.svg");
background-size: 20px;
}Es wird gecacht, taucht nicht im HTML-Inhalt auf — und gilt als dekorativ, also ohne alt-Text. Genau deshalb gehören inhaltliche Bilder nicht hierhin (siehe Dekorative Bilder und der leere alt-Text).
Der Entscheidungsleitfaden
| Du willst… | Weg |
|---|---|
| Icon umfärben / an Dark Mode anpassen | inline |
| SVG per JavaScript animieren | inline |
| Logo/Illustration, überall gleich | img-Tag |
| dekoratives Muster / Button-Icon | CSS-Hintergrund |
| inhaltliches Bild mit alt-Text | img-Tag |
Vor jedem Weg: optimieren
Egal welcher Weg — ein SVG aus einem Design-Tool enthält oft unnötigen Ballast, der es aufbläht. Vor dem Einbinden durch den SVG-Optimierer laufen lassen; die Hintergründe stehen im Beitrag SVG-Optimierung. Ein schlankes SVG macht jeden Einbindungsweg schneller.
Häufige Fragen
Wann sollte ich ein SVG inline einbinden?
Wenn du es per CSS stylen (z. B. Farbe per currentColor), per JavaScript animieren oder auf einzelne Teile zugreifen willst. Inline heißt: der SVG-Code steht direkt im HTML. Nachteil: Er wird nicht separat gecacht und bläht das HTML auf, besonders bei Wiederholung desselben Icons.
Wann ist das img-Tag besser für SVG?
Wenn das SVG ein in sich geschlossenes Bild ist (Logo, Illustration), das nicht per CSS umgefärbt werden muss. Als img wird es vom Browser gecacht, lädt bei Wiederholung schnell und hält das HTML schlank. Nachteil: kein Zugriff auf das Innere per CSS/JS.
Kann ich SVG als CSS-Hintergrund nutzen?
Ja, per background-image. Ideal für dekorative Muster, Icons in Buttons oder Verläufe. Der Browser cacht es, und es taucht nicht im HTML-Inhalt auf. Nachteil: rein dekorativ, kein alt-Text — inhaltliche Bilder gehören nicht in den CSS-Hintergrund.
Welcher Weg ist am schnellsten?
Es kommt darauf an: Für ein einzelnes, oft wiederholtes kleines Icon kann inline (ohne Extra-Request) schneller sein; für ein großes Logo, das auf jeder Seite gleich ist, gewinnt das gecachte img. Wichtiger als der Einbindungsweg ist ein optimiertes, schlankes SVG.