SVG → Base64
Mach aus einem SVG eine Data-URI, die du direkt in HTML oder CSS einfügst — Base64 und die meist kleinere URL-kodierte Form nebeneinander.
oder klicken zum Auswählen — nur SVG
Funktioniert überall dort, wo eine URL funktioniert. Immer etwa ein Drittel größer als die Ausgangsdatei.
Dasselbe Bild, meist kleiner als Base64 — und weiterhin lesbar, was beim Debuggen von CSS hilft.
eine Anfrage weniger
Eine Data-URI legt das Bild direkt in HTML oder CSS ab, der Browser stellt also nie eine zweite Anfrage dafür. Bei kleinen Icons ist das der Unterschied zwischen sofort da und einen Moment zu spät.
Der Preis ist das Caching: Ein eingebettetes Icon wird mit jeder Seite neu geladen, die es enthält, und lässt sich nicht separat cachen. Bette die Handvoll Icons ein, die für den ersten Bildaufbau zählen, und lass den Rest als Dateien.
drei Schritte
Wähle eine .svg-Datei — sie bleibt auf deinem Gerät.
Kopiere die Base64- oder die URL-kodierte Data-URI.
Nimm das fertige img-Tag oder die CSS-Background-Regel.
kurze Antworten
Bei SVG ist URL-kodiert meist kleiner, denn SVG ist Text und Base64 bläht alles um rund 33 % auf. URL-kodiert bleibt außerdem lesbar, du erkennst die gemeinte Form also im Stylesheet wieder. Nimm Base64, wenn irgendein Schritt in der Kette die Rohzeichen zerlegt.
Base64 kodiert drei Bytes als vier Zeichen — ein Drittel Zuwachs ist unvermeidbar. Schick die Datei vorher durch den SVG-Optimierer: Editor-Metadaten und übergenaue Koordinaten machen oft mehr aus als die Kodierung selbst.
Ja — der CSS-Block ist zum Einfügen fertig. Er nutzt die URL-kodierte Form in doppelten Anführungszeichen; deshalb ersetzt der Encoder die doppelten Anführungszeichen im SVG durch einfache.
Fast immer ein nicht kodiertes `#`. Eine Farbe wie `#fff` schneidet die URL an dieser Stelle ab, alles danach gilt als Fragment. Die Ausgabe hier maskiert das bereits — das Problem entsteht meist, wenn eine Data-URI hinterher von Hand bearbeitet wird.
Nein. Die Kodierung ist reine Zeichenkettenarbeit in deinem Browser.