SVG Forge

SVG zu CSS background-image

Binde jedes SVG als kodierten Data-URI in dein Stylesheet ein.

oder Datei ablegen / Code unten einfügen
CSS-Regel
Die Ausgabe erscheint hier

So funktioniert es

  1. 1Füge SVG-Code ein oder lege eine .svg-Datei ab.
  2. 2Das Werkzeug kodiert es als URL in eine background-image-Regel.
  3. 3Kopiere den CSS-Schnipsel direkt in dein Stylesheet.

Kostenlos, ohne Registrierung, ohne Wasserzeichen — alles läuft lokal in deinem Browser, deine Dateien verlassen also nie deinen Rechner.

Häufige Fragen

Warum URL-Kodierung statt base64?

URL-kodiertes SVG ist kleiner und bleibt in deinem CSS lesbar; base64 gibt es aber ebenfalls, falls du es bevorzugst.

Wann sollte ich SVG in CSS einbetten?

Bei kleinen dekorativen Icons und Mustern — das spart eine HTTP-Anfrage. Große Grafiken bleiben besser eine eigene Datei.

Verwandte Werkzeuge

SVG zu Data-URI

Kodiere SVG für img src, CSS url() oder überall dort, wo ein URI hinpasst.

SVG-Optimierer

Aufräumen mit SVGO: kleinere Dateien, dieselben Pixel. Die Ersparnis siehst du sofort.

SVG zu React

SVG einfügen, fertige JSX- oder TSX-Komponente zum Importieren erhalten.