So nutzt du: SVG zu CSS Konverter
- Füge deinen SVG-Code ein, öffne eine
.svg-Datei oder lade das Beispiel. - Lass SVG bereinigen aktiviert, um Kommentare, Metadaten und Editor-Attribute zu entfernen, und wähle URL-kodiert oder Base64.
- Prüfe beide Vorschauen: das normale Hintergrundbild und die einfarbige Masken-Version.
- Kopiere die Data URI oder die komplette CSS-Regel und füge sie in dein Stylesheet ein.
Was ist ein SVG Data URI?
Ein Data URI bettet eine Datei direkt in dein CSS ein, statt auf sie zu verlinken: background-image: url("data:image/svg+xml,…"). Bei kleinen Icons, Trennlinien, Mustern und eigenen Checkboxen spart das einen HTTP-Request, verhindert kurzes Aufblitzen fehlender Bilder und hält die Grafik nah bei den Styles, die sie nutzen.
URL-Kodierung vs. Base64
SVG ist Text, deshalb braucht es kein Base64. Base64 vergrößert jede Datei um rund 33 % und macht sie zu einem unlesbaren Block, der sich mit gzip oder Brotli schlecht komprimieren lässt. Ein URL-kodiertes SVG bleibt nahe an der Originalgröße und lesbar. Nur wenige Zeichen müssen escaped werden:
| Zeichen | Kodiert | Warum |
|---|---|---|
# | %23 | Sonst beginnt ein URL-Fragment – Farben wie #fff zerstören das Bild. |
% | %25 | Das Escape-Zeichen selbst. |
< > | %3C %3E | Empfohlen für die Kompatibilität mit strikten Parsern. |
" | ' oder %22 | Attribut-Anführungszeichen werden zu einfachen umgestellt, damit das CSS den URI in doppelte Anführungszeichen setzen kann. |
Base64 nur verwenden, wenn ein Tool oder Framework nichts anderes akzeptiert. Die Größenkarten unter der Vorschau zeigen beide Ergebnisse zum Vergleich.
Einfärbbare Icons mit mask-image
Ein als Hintergrundbild genutztes SVG wird isoliert gerendert: CSS der Seite kann seine Füllungen nicht ändern, und currentColor darin folgt nicht deiner Textfarbe. Das mask-image-Snippet löst das, indem es das SVG nur als Schablone verwendet und mit background-color: currentColor einfärbt. So funktioniert ein Icon in jeder Farbe, jedem Hover-Zustand und im Dark Mode. Die Zeile -webkit-mask wird für manche Browser weiterhin benötigt.
Bereinigung und Grenzen
Die Bereinigung entfernt die XML-Deklaration, Kommentare, <metadata>, <title> (in einem Hintergrund bedeutungslos), Inkscape-/Sodipodi-/Sketch-Attribute und überflüssige Leerzeichen und ergänzt das nötige xmlns, falls es fehlt – ohne dieses rendert der Browser das Bild nicht. Bette nur kleine SVGs ein (ein paar KB): große Data URIs blähen jeden CSS-Download auf und lassen sich nicht separat cachen. Bei komplexer Grafik verlinke die Datei besser. Brauchst du eine React-Komponente statt CSS? Nutze SVG zu JSX; für Rastergrafiken siehe Bild zu Base64.
Verwendung in Webflow
Das Hintergrund-Panel von Webflow erwartet ein hochgeladenes Bild. Füge die erzeugte Regel deshalb in ein <style>-Tag in einem Embed-Element oder im individuellen Code der Seite/Website ein und gib deinem Element die passende Klasse (z. B. icon).
Auch gesucht als: svg zu css, svg data uri, svg zu data url, svg url kodieren, svg hintergrundbild css, svg zu base64, mask-image, inline svg css.
Passende Tools zu: SVG zu CSS Konverter
- URL kodieren / dekodieren — Kodiere Text für die sichere Verwendung in URLs, dekodiere kodierte Strings zurück in lesbaren Text und zerlege jede URL in ihre Bestandteile und Query-Parameter.
- Base64-Kodierung / -Dekodierung — Konvertiere Text in Base64 und zurück – mit vollständiger UTF-8-Unterstützung (Akzente, Emojis), wechsle zu URL-sicheren Base64-Werten oder zieh eine Datei per Drag & Drop hinein, um deren Base64-Zeichenkette oder Daten-URI zu erhalten.
- CSS Minifier — Füge ein Stylesheet ein, um es sofort zu verkleinern.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
Häufige Fragen
Warum wird mein SVG Data URI nicht angezeigt?
# (in Farben wie #fff), einem fehlenden Attribut xmlns="http://www.w3.org/2000/svg" oder ungleichen Anführungszeichen zwischen dem CSS url("…") und den SVG-Attributen. Dieses Tool behebt alle drei.Ist URL-Kodierung oder Base64 für SVG in CSS besser?
Kann ich die Farbe eines SVG-Hintergrundbilds mit CSS ändern?
mask-image-Snippet und setzt background-color, was du beim Hover oder im Dark Mode ändern kannst.Muss ich charset=utf-8 in den Data URI aufnehmen?
data:image/svg+xml, genügt also.