SVG-zu-CSS-Konverter

SVG-Code in eine CSS-Data-URL für background-image umwandeln – URL-kodiert oder Base64, fertig zum Einfügen ins Stylesheet.

Der SVG-zu-CSS-Konverter macht aus SVG-Code eine Data-URL für die CSS-Eigenschaft background-image. Du fügst den Code ein oder lädst eine SVG-Datei, wählst URL-kodiert oder Base64 und kopierst fertiges CSS, eine Mask-Variante für einfärbbare Icons oder eine Tailwind-Klasse. Das SVG verlässt dabei nie den Browser.

SVG-Code SVG-Datei laden oder hierher ziehen

Vorschau

Kodierung

Zentriert und eingepasst (contain)

Data-URL: 340 Byte

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

SVG als CSS-Hintergrund einsetzen

Mit einer Data-URL wird ein SVG Teil des Stylesheets. Du schreibst background-image: url("data:image/svg+xml,…") und brauchst keine separate Datei. Damit das funktioniert, müssen Sonderzeichen wie #, < und > kodiert sein. Genau das übernimmt der Konverter.

Wann lohnt sich das?

Kleine Icons und Pfeile an Formularfeldern und Listen.
Wiederholbare Muster und Trennlinien.
Komponenten, die ohne zusätzliche Dateien ausgeliefert werden.

So gehst du vor

SVG einfügen. Vorher lässt es sich mit dem SVG-Optimierer verkleinern.
Kodierung wählen und die Vorschau prüfen.
Code kopieren. Die Farbe ändern kannst du mit SVG-Farben ändern.

Beispiel

Ein Häkchen-Icon soll als Aufzählungszeichen dienen. Du fügst das SVG ein, wählst die Mask-Variante und kopierst das CSS. Über background-color steuerst du danach die Farbe des Häkchens.

Häufige Fragen

Warum SVG als Data-URL in CSS einbinden?

Das SVG steckt direkt im Stylesheet, es entfällt eine zusätzliche Anfrage. Das ist praktisch für kleine Icons, Muster und Hintergründe. Für große Grafiken bleibt eine separate Datei besser, weil sie sich cachen lässt.

URL-kodiert oder Base64?

URL-kodiert ist meist deutlich kürzer und komprimiert im Stylesheet besser. Base64 vergrößert Daten um etwa ein Drittel, ist aber robust gegenüber Sonderzeichen.

Kann ich die Farbe eines SVG-Hintergrunds per CSS ändern?

Nicht bei background-image, denn die Farben stecken im SVG. Mit der Mask-Variante färbst du Icons über background-color oder currentColor um. Alternativ ersetzt du die Farben vorher im SVG.

Warum fehlt manchmal das xmlns-Attribut?

Als Bild in CSS braucht ein SVG den Namespace xmlns="http://www.w3.org/2000/svg". Der Konverter ergänzt ihn automatisch, wenn er fehlt.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.