SVG als CSS-Hintergrundbild: Data-URIs richtig gemacht

SVG Nexus · Zuletzt aktualisiert: November 2026

Ein CSS-Hintergrund kann nicht auf Inline-Markup zeigen, also muss das SVG als kodierter Data-URI in einer URL reisen. An der Kodierung stolpern alle: #-Zeichen escapen, Anführungszeichen beachten, die viewBox behalten — und das Umfärben mit Masken statt fill lösen.

Wann ein Hintergrund das richtige Werkzeug ist

Hintergründe sind für Dekoration, die sich wiederholt oder hinter Inhalt sitzt: dezente Muster, das Icon in einem Pseudo-Element, ein Häkchen, das in eine eigene Checkbox verschmolzen ist. Sobald ein Bild Bedeutung trägt, gehört es in ein <img> oder inline, wo es Alt-Text haben und direkt gestylt werden kann. Hintergründe haben überhaupt keine Präsenz im Barrierefreiheits-Baum, also halten Sie sie rein visuell und lassen Sie nie einen die einzige Information tragen.

Kodierung: die Regeln, an denen alle scheitern

Ein Data-URI ist die Datei, in eine URL escapes: url("data:image/svg+xml,..."). Drei Regeln entscheiden, ob es rendert. Erstens wird jedes # zu %23 — Farben sind voll von Hex-Werten, und ein rohes # beendet die URL an dieser Stelle und schneidet das Bild still ab. Zweitens Anführungszeichen-Disziplin: die URL in doppelte Anführungszeichen und im SVG einfache, sonst bricht der String. Drittens muss das eingebettete SVG seine viewBox behalten (und explizite width/height), weil ein Hintergrund sonst keine Möglichkeit hat, die inneren Proportionen des Artworks zu kennen. Base64-Kodierung umgeht jedes Escaping um rund ein Drittel mehr Bytes; UTF-8 mit sorgfältigem Escaping ist kleiner und bleibt lesbar. Minimieren Sie das SVG zuerst — Leerzeichen und Kommentare sind hier Nutzlast.

Größe und Position wie bei einem Bild

Einmal kodiert, verhält es sich wie jedes Hintergrundbild: background-size nimmt contain, cover oder exakte Längen (ein quadratisches Icon will meist seine Rendergröße, z. B. 20px), background-position zentriert es, und background-repeat kachelt standardmäßig — setzen Sie no-repeat, es sei denn, die Kachelung ist der Punkt. Weil das SVG seine eigene viewBox trägt, bleibt contain-artiges Verhalten bei jeder Geräte-Pixelratio scharf.

Umfärben: nicht gegen fill kämpfen, Maske nutzen

Ein Hintergrund-SVG kann Ihr Stylesheet nicht hören: Seine Füllungen wurden in die URL eingefroren. Varianten pro Theme bedeuten, die Datei mit anderen Hex-Werten neu zu kodieren — für zwei Themes machbar, für fünf elend. Die moderne Alternative ist, die Farbe gar nicht mitzuliefern: Nutzen Sie das SVG als mask-image über einer schlichten background-color. Das Element malt background: currentColor (oder eine Theme-Variable), und -webkit-mask / mask mit demselben Data-URI schneidet es auf die Form des Icons. Ein Asset, jeder Zustand und jedes Theme, Hover-Übergänge auf der Farbe inklusive. Halten Sie die schlichte Hintergrund-Version als Fallback bereit, wo Masken-Unterstützung ein Thema ist.

Den String erzeugen

Hand-Escaping ist die Geburtsstunde von %23-Bugs; erzeugen Sie die Deklaration. Konverter — darunter das SVG-zu-CSS-Werkzeug dieser Seite — nehmen den Code eines Icons und geben die kodierte Hintergrund- (und Masken-)Form aus. Der Ablauf lautet also: Icon wählen, sein SVG von seiner Seite kopieren, konvertieren, einfügen. Das zugrunde liegende SVG in diesem Katalog behält seine viewBox und namensraumierten IDs, sodass das eingefügte Ergebnis exakt wie das Original skaliert.

.icon-mask {
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("/icon-library-assets/lucide/lucide-search.svg") center / contain no-repeat;
  mask: url("/icon-library-assets/lucide/lucide-search.svg") center / contain no-repeat;
}

← Praktische SVG-Anleitungen und Tutorials