Kostenloser SVG-zu-CSS-Background-Konverter
SVG-Code in CSS background-image mit Data-URIs umwandeln. Wählen Sie zwischen URL-kodiertem oder Base64-Format mit Live-SVG-Vorschau. Perfekt für Inline-Hintergründe ohne zusätzliche HTTP-Anfragen. Keine Anmeldung erforderlich.
100% kostenlos — kein Konto erforderlich
Funktionen von Kostenloser SVG-zu-CSS-Background-Konverter
SVGs direkt in Ihr CSS einbetten
Data-URI-Ausgabe
SVG in eine CSS-background-image-Eigenschaft mit Data-URIs umwandeln.
CSS kopieren
Das generierte CSS-Property kopieren, fertig zum Einfügen in Ihr Stylesheet.
URL-kodiert & Base64
Wählen Sie zwischen URL-kodierter (kleiner) oder Base64-Ausgabe (kompatibler).
Live-Vorschau
Sehen Sie Ihr SVG live gerendert, während Sie den Code einfügen oder bearbeiten.
FAQ
Warum SVGs als Data-URIs einbetten?
Data-URIs eliminieren eine HTTP-Anfrage und reduzieren die Seitenladezeit. Sie sind ideal für kleine dekorative SVGs, Icons und Muster in CSS-Hintergründen.
URL-kodiert vs. Base64 — was ist besser?
URL-kodiert ist typischerweise 20-30% kleiner. Base64 bietet breitere Kompatibilität mit älteren Tools. Für moderne Browser wird URL-kodiert empfohlen.
Gibt es eine Größenbeschränkung?
Keine feste Grenze, aber Data-URIs über 128KB können das CSS-Parsing verlangsamen. Halten Sie SVGs optimiert und verwenden Sie dies für kleine Grafiken (Icons, Muster), nicht für große Illustrationen.
Mehr Entwickler-Werkzeuge
CSS-Gradient-Generator, Pixel-zu-REM-Konverter und mehr.