SVG-zu-CSS-Konverter
Mach aus SVG-Code einen CSS-Hintergrund mit kompakter, URL-kodierter Data-URI.
Eingabe
Du kannst auch eine Datei ins Feld ziehen.
Ergebnis
Vorschau
Hier erscheint die Vorschau.
Alles passiert in deinem Browser. Deine Daten verlassen dein Gerät nicht.
Worum geht’s?
Eine Data-URI bettet das SVG direkt in dein Stylesheet ein, der Browser braucht also keine zusätzliche Anfrage. Die URL-Kodierung hält den Code kürzer und lesbarer als Base64. Das ist ideal für Icons, Muster und Hintergründe in CSS.
So geht’s
Füge dein SVG ein oder zieh eine SVG-Datei ins Feld. Wähle das Ausgabeformat, prüfe die Vorschau und kopiere das Ergebnis in dein CSS.
Häufige Fragen
- Warum URL-Kodierung statt Base64?
- SVG ist Text. Bei der URL-Kodierung werden nur wenige Zeichen umschrieben, darum ist das Ergebnis meist rund ein Drittel kleiner als mit Base64 und lässt sich mit gzip besser komprimieren.
- Warum wird mein SVG nicht angezeigt?
- Ein SVG als Bild braucht das Attribut xmlns="http://www.w3.org/2000/svg" im Wurzelelement. Fehlt es, ergänzt der Konverter es automatisch. Externe Bilder und Schriften im SVG lädt der Browser in CSS-Hintergründen nicht.
- Wird mein SVG hochgeladen?
- Nein. Die Umwandlung läuft komplett in deinem Browser, es wird nichts an einen Server geschickt.