SVG in CSS-Hintergrund umwandeln

Fügen Sie eine SVG ein und erhalten Sie direkt eine CSS-Regel background-image, die Sie in Ihr Stylesheet einfügen können – ohne eine separate Bilddatei hosten zu müssen.

Beispiel:

Warum eine SVG als CSS-Hintergrund statt als Bilddatei verwenden?

Wird eine SVG direkt als Data-URI im Stylesheet kodiert, entfällt eine zusätzliche HTTP-Anfrage zum Laden einer separaten Bilddatei. Das kann den Seitenaufbau bei kleinen Icons leicht beschleunigen. Es ist auch praktisch für eigenständige Komponenten (eine einzige CSS-Datei enthält bereits ihr Icon).

Warum wird die SVG URL-kodiert statt als Base64?

Die URL-Kodierung (mit einigen maskierten Zeichen wie #, < und >) erzeugt bei Text wie SVG in der Regel eine kürzere und besser lesbare Data-URI als Base64, was die endgültige CSS-Größe leicht verringert.

Kann ich die Farbe des Icons ändern, nachdem ich es als CSS-Hintergrund eingebunden habe?

Nein, einmal als background-image kodiert, ist die Farbe der SVG in der Data-URI festgelegt: Um die Farbe zu ändern, passen Sie die Farbe in der Quell-SVG an, bevor Sie das CSS neu erzeugen (zum Beispiel mit unserem Werkzeug zum Ersetzen von SVG-Farben).

100% lokale Verarbeitung: Die Kodierung läuft vollständig in Ihrem Browser ab, Ihre SVG wird nie an einen Server gesendet.