Kategorie: Entwicklung
SVG zu CSS-Hintergrund
Inline-SVG-Markup in eine background-image-Data-URI umwandeln
Fügen Sie SVG-Markup ein und erhalten Sie eine CSS-background-image-Data-URI samt background-repeat-, background-size- und background-position-Zeilen, mit Live-Vorschau, damit Sie sie vor dem Kopieren prüfen können.
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;Das SVG verlässt niemals den Browser; es wird direkt in den CSS-Wert codiert.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Ein kleines SVG-Icon oder -Muster ist als eingebettete CSS-Data-URI oft leichter als eine separate Bildanfrage, aber das Markup von Hand so zu codieren, dass es innerhalb eines url(...)-Werts erhalten bleibt, ist fehleranfällig: Anführungszeichen, spitze Klammern und Zeilenumbrüche müssen alle sorgfältig maskiert werden. Dieses Werkzeug übernimmt diese Codierung für Sie, hält das Ergebnis kurz und lesbar, statt auf Base64 auszuweichen, und zeigt eine Live-Hintergrundvorschau bei den gewählten Einstellungen für Wiederholung und Größe.
So funktioniert es
- Fügen Sie das SVG-Markup ein, das Sie als Hintergrund verwenden möchten.
- Wählen Sie, wie es sich wiederholen und skalieren soll.
- Kopieren Sie die CSS-Deklaration und fügen Sie sie in Ihr Stylesheet ein.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Ist das dasselbe wie eine Base64-Codierung des SVGs?
- Nein. Es maskiert nur die wenigen Zeichen, die andernfalls einen CSS-Wert zerstören würden, wodurch die Data-URI spürbar kürzer und weiterhin für Menschen lesbar bleibt, anders als ein Base64-Block.
- Wird das SVG hochgeladen?
- Nein. Die Codierung erfolgt mit einfachem String-Ersetzen in Ihrem Browser-Tab; das eingefügte Markup verlässt die Seite nie.
- Kann ich currentColor oder CSS-Variablen im SVG verwenden?
- currentColor funktioniert, da es vom Browser erst zur Darstellungszeit aufgelöst wird, aber CSS-Custom-Properties, auf die innerhalb der eigenen Attribute des SVGs verwiesen wird, funktionieren nicht, da eine background-image-Data-URI statisches Markup ist und kein lebendes Stylesheet.