SVG als CSS-Data-URI
SVG to CSS Data URI
Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.
Verwandelt ein SVG in eine Data-URI, die Sie in ein Stylesheet einfügen können, URL-kodiert statt Base64, weil das sowohl kleiner als auch noch lesbar ist. Es zeigt die drei Größen nebeneinander, rendert die kodierte URI, damit Sie sehen, dass sie funktioniert, und warnt vor der Handvoll Dinge, die ein SVG als gar nichts rendern lassen, sobald es zu einer Data-URI wird.
SVG hier ablegen
Oder bearbeiten Sie das Markup unten.
SVG
Vorschau
Wird aus dem kodierten URI selbst gezeichnet — was hier erscheint, erscheint auch in Ihrem Stylesheet.
Größe
Rohes SVG
165 B
URL-kodiert
198 B
Base64
246 B
Hier ist die URL-Kodierung 19,5 % kleiner als Base64.
Base64 kostet bei jeder Eingabe pauschal 33⅓%. Ein SVG ist Text, und innerhalb eines CSS-url() müssen nur eine Handvoll seiner Zeichen maskiert werden — URL-Kodierung landet daher meist etwa 10 % über der rohen Datei. Sie bleibt im Stylesheet außerdem lesbar, mit grep auffindbar und im Diff vergleichbar, was Base64 nicht ist.
Ausgabe
Maskiert werden nur %, <, >, # und ein paar Klammerzeichen, und die doppelten Anführungszeichen des SVG werden zu einfachen, damit die CSS-Zeichenkette gefahrlos doppelte verwenden kann. Am wichtigsten ist #: unmaskiert in fill="#fff" beginnt es einen Fragmentbezeichner und schneidet die URL ab — gezeichnet wird dann gar nichts, und nirgends erscheint ein Fehler.
Brauchen Sie stattdessen eine Rastergrafik? Der SVG-Rasterisierer rendert in jeder Skalierung nach PNG. Soll das SVG vor dem Kodieren kleiner werden? Der SVG-Optimierer schreibt die Pfaddaten neu.
So funktioniert es
Fügen Sie das SVG ein oder legen Sie es ab
Das Quelltextfeld ist editierbar, Sie können das Markup also hier reparieren, statt zur Datei zurückzugehen. Das Beispiel ist ein Icon mit Kontur, der häufige Fall.
Lesen Sie die Warnungen vor allem anderen
Ein fehlendes `xmlns` ist die, die jeden erwischt: inline in HTML spielt es keine Rolle, aber eine Data-URI wird als eigenständiges XML-Dokument geparst, und ohne es rendert der Browser nichts und meldet nichts. Die anderen Warnungen betreffen externe Bilder, Skripte und Prozentgrößen ohne viewBox.
Prüfen Sie die Vorschau
Sie wird aus der kodierten URI selbst gezeichnet, nicht aus dem Quelltext, wenn das Icon also in diesem Kasten erscheint, erscheint es in Ihrem Stylesheet. Ein leerer Kasten bedeutet, die URI ist kaputt, und die Warnungen darüber sagen gewöhnlich warum.
Wählen Sie die Eigenschaft und kopieren Sie
Die Deklaration wechselt mit der Eigenschaft: `background-image`, `mask-image`, `content` oder ein nacktes `src`. Base64 ist für den seltenen Verbraucher verfügbar, der keine prozentkodierte URI annehmen kann, und es ist immer größer.
Häufige Fragen
Warum nicht Base64? Alle verwenden Base64.
Base64 kostet pauschal 33⅓ % auf jede Eingabe, weil es drei Bytes in vier verwandelt. Ein SVG ist Text, und nur `%`, `<`, `>`, `#` und ein paar Klammern müssen in einem CSS-`url()` tatsächlich maskiert werden, die URL-Kodierung landet also gewöhnlich bei etwa 10 % über der Rohdatei. Sie bleibt im Stylesheet außerdem durchsuchbar und diffbar. Das Panel gibt beide Zahlen für Ihre Datei aus.
Mein Icon ist verschwunden, und nirgends steht ein Fehler.
Fast immer ein nicht maskiertes `#`. In `fill="#fff"` beginnt die Raute einen Fragmentbezeichner, die URL wird also an dieser Stelle abgeschnitten, und der Browser holt etwas, das kein SVG ist – stillschweigend. Dieser Kodierer maskiert sie. Wenn Sie die URI von Hand geschrieben haben, ist das das Erste, was zu prüfen ist.
Kann ich das SVG in der Data-URI animieren oder skripten?
Nicht als CSS-Hintergrund. Ein so geladenes SVG läuft in einem eingeschränkten, statischen Modus: keine Skripte, kein `foreignObject`, keine externen Ressourcen, und CSS der äußeren Seite kann nicht hineingreifen. Deklarative SMIL-Animation läuft manchmal und manchmal nicht, je nach Engine. Wenn Sie irgendetwas davon brauchen, fügen Sie das SVG stattdessen inline ins Dokument ein.
Wann ist eine Data-URI die falsche Wahl?
Wenn das SVG groß ist oder an mehr als ein paar Stellen verwendet wird. Eine Data-URI kann nicht getrennt gecacht werden, jede Seite, die das Stylesheet ausliefert, liefert also das Icon erneut, und eine in CSS eingebettete 30KB-Illustration sind 30KB auf dem kritischen Pfad. Kleine Icons und Muster sind das, wofür das hier ist; alles Größere ist besser als Datei oder als Sprite.
Eingabe aus
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
Bild in Base64 / Data-URI
Image to Base64 / Data URI
Kodiert ein Bild als Base64-Zeichenkette oder als fertige Data-URI für CSS, HTML oder JSON.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
SVG-Editor mit Erklärung
SVG Editor and Explainer
Bearbeitet ein SVG neben seinem Live-Rendering und erklärt die Datei: viewBox und Skalierung, Transformationen, jeden Pfadbefehl, vererbte Füllung, verschwendete Bytes und was in einem <img>, einer Data-URI oder inline bricht.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Bild in Base64 / Data-URI
Image to Base64 / Data URI
Kodiert ein Bild als Base64-Zeichenkette oder als fertige Data-URI für CSS, HTML oder JSON.
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.