SVG in CSS-Hintergrund umwandeln

Nein. Die Umwandlung läuft vollständig in deinem Browser. Die Datei verlässt dein Gerät nicht – es gibt keinen Server, der sie sehen könnte. Sobald die Seite geladen ist, funktioniert das Werkzeug sogar offline.

Eine Regel: .deine-klasse { width; height; background-image: url("data:image/svg+xml,…"); background-repeat: no-repeat; background-size: contain; }. width und height sind die eigene Grösse des SVG in Pixeln – ändere oder lösche sie nach Belieben; mit background-size: contain skaliert das Icon in jede Box, die du ihm gibst.

Für einfarbige Icons, die der Textfarbe folgen sollen. Die Regel setzt background-color: currentColor und nutzt das SVG als mask-image (mit -webkit--Präfix für älteres Safari), sodass das Icon in der color des Elements gezeichnet wird und sich bei Hover oder im Dunkelmodus mit einer einzigen CSS-Eigenschaft ändert. Es zählt nur die Form des SVG – seine eigenen Füllungen werden ignoriert. Mehrfarbige Grafiken brauchen die normale Hintergrund-Variante.

Aus dem Dateinamen, ausser du gibst einen ein: «Pfeil Links.svg» wird zu .pfeil-links. Namen werden kleingeschrieben, unzulässige Zeichen werden zu Bindestrichen, und eine führende Ziffer bekommt das Präfix «svg-», damit der Selektor immer gültig ist.

Skripte und externe Verweise werden immer entfernt, XML-Prolog und Kommentare entfallen, und ausser du schaltest «Zuerst optimieren» aus, wird das SVG minifiziert. Die Zeichnung selbst bleibt gleich.