0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG zu CSS
Konvertiere SVG-Code in einen Data URI als CSS-Eigenschaft: background-image, mask-image oder CSS-Variable. Unterstützt URL- und Base64-Kodierung.
Format
CSS-Eigenschaft
Optionen
SVG-Code
Linien:0Charaktere:0

So funktioniert es

Es wandelt den Code eines SVG in einen Data-URI um, der in CSS einsatzbereit ist, sodass du das Icon direkt in das Stylesheet einbetten kannst, ohne eine separate Datei oder eine zusätzliche HTTP-Anfrage.

Es bietet zwei Codierungen: URL-encoded (Percent-Encoding), kürzer und lesbarer, empfohlen für SVG; und Base64, etwas länger, aber universell kompatibel.

Das Ergebnis kann als background-image, als mask-image (um das Icon mit CSS einzufärben) oder als wiederverwendbare CSS-Variable erzeugt werden. Das SVG vorher zu minifizieren reduziert die Größe noch weiter.

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");Die URL-Codierung hält das SVG fast lesbar und ist meist kürzer als Base64.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");Als mask-image wird die Farbe des Icons über die Eigenschaft background-color des Elements gesteuert.

Anwendungsfälle

  • SVG-Icons als background-image einbetten, ohne der Seite HTTP-Anfragen hinzuzufügen.
  • Ein SVG als Maske (mask-image) verwenden, um es je nach Theme oder Zustand über CSS umzufärben.
  • Ein Icon in einer CSS-Variable speichern und über mehrere Selektoren wiederverwenden.
  • Das Gewicht von Inline-Icons reduzieren, indem das SVG vor dem Einbetten minifiziert wird.

Häufige Fragen

Ist URL-encoded oder Base64 besser?

Für SVG ist URL-encoded meist die beste Option: Es erzeugt einen kürzeren und lesbareren Data-URI, weil SVG Text ist. Base64 bietet maximale Kompatibilität, fügt aber rund 33 % Größe hinzu.

Warum mask-image statt background-image verwenden?

Mit background-image behält das Icon seine Originalfarben. Mit mask-image definiert das SVG nur die Form und CSS liefert die Farbe, ideal für einfarbige Icons, die sich mit dem Theme ändern.

Was macht die Minifizierungs-Option?

Es entfernt Kommentare und reduziert die Leerzeichen des SVG vor der Codierung, sodass der finale Data-URI kleiner ist, ohne die Zeichnung zu ändern.

Wird mein SVG auf einen Server hochgeladen?

Nein. Die Umwandlung erfolgt vollständig in deinem Browser; das SVG verlässt deinen Computer nie.

Siehe auch