SVG in Base64 - und warum du wahrscheinlich das andere willst
Dieses Werkzeug liefert dir das Base64, wegen dem du gekommen bist, und zeigt dir dann, was die meisten Konverter weglassen: Für SVG ist Base64 die schlechtere der beiden Arten, ein Bild einzubetten. Base64 gibt es, um Binärdaten sicher durch Textkanäle zu schleusen. Eine SVG ist bereits Text, das Kodieren kostet dich also ein Drittel ihrer Größe für ein Problem, das sie nie hatte. Prozentkodierung erledigt dieselbe Aufgabe, indem sie die Handvoll Zeichen maskiert, die eine URL zerbrechen würden, und den Rest der Datei so lässt, wie er ist - kleiner auf der Leitung und weiterhin komprimierbar, was Base64 weitgehend nicht ist. Beide Formen entstehen hier mit lebenden Byte-Zählern daneben, du siehst den Unterschied also an deiner eigenen Datei, statt uns glauben zu müssen. Alles läuft in deinem Browser, und die SVG wird bereinigt, bevor irgendetwas ausgegeben wird.
So verwendest du dieses Tool
SVG hineinziehen
Ziehe eine Datei auf das Feld oben oder klicke zum Auswählen. Sie wird nach ihrem Inhalt geprüft und nicht nach der Endung, und Skripte, Ereignis-Handler oder entfernte Verweise werden vor dem Kodieren entfernt - diese Ausgabe geht in deine Seite, also wird sie zuerst gereinigt.
Die beiden Kodierungen vergleichen
Das Feld zeigt Quellgröße, Größe der Base64-data:-URI und Größe der URL-kodierten data:-URI zusammen, mit dem prozentualen Unterschied. Bei den getesteten Symbolen lag die URL-kodierte Form 14 bis 18 Prozent darunter.
Die passende Form kopieren
Fünf Ausschnitte, jeder mit eigenem Kopierknopf: der rohe Base64-Inhalt, beide data:-URIs, ein fertiges <img>-Tag und eine CSS-background-image-Deklaration. Nimm das, was dein Build-Schritt oder dein CMS-Feld erwartet.
Auf die Größenwarnung achten
Ab etwa 4 KB warnt das Feld. Eingebettete Auszeichnung lässt sich nicht getrennt von der Seite cachen, eine große data:-URI wird also auf jeder Seite neu geladen, die sie enthält - ab dieser Größe ist eine verlinkte Datei fast immer besser.
Häufig gestellte Fragen
Wie viel größer ist Base64 als die ursprüngliche SVG?
Zwischen 36 und 43 Prozent bei den vier gemessenen Dateien. Aus einem 290-Byte-Symbol wurde eine 414 Bytes große Base64-data:-URI, die URL-kodierte Fassung lag bei 339 Bytes. Base64 nutzt konstruktionsbedingt vier Zeichen je drei Bytes, ein Drittel dieses Wachstums ist also strukturell, der Rest ist das Präfix der data:-URI.
Warum ist URL-Kodierung bei SVG kleiner?
Weil nur wenige Zeichen maskiert werden müssen. Prozentkodierung zahlt drei Bytes je Prozentzeichen, Rautenzeichen, spitze Klammer und Zeilenumbruch und lässt alles andere, wie es ist. Base64 zahlt konstante 33 Prozent auf jedes Byte der Datei, egal welches. Bei Text ist die Maskiersteuer weit kleiner als die Pauschalsteuer.
Funktioniert die URL-kodierte Fassung überall?
Ja, in jedem gebräuchlichen Browser. Eine data:-URI ohne base64-Markierung ist einfacher prozentkodierter Text, die ältere und besser unterstützte der beiden Formen. Der einzige Ort, an dem Base64 wirklich Pflicht ist, ist eine Verarbeitungskette, die es voraussetzt, etwa manche CMS-Felder und ältere Build-Plugins.
Warum wurden meine doppelten Anführungszeichen zu Apostrophen?
Um sie nicht maskieren zu müssen. Eine SVG besteht überwiegend aus Attributen, und jedes Trennzeichen als %22 zu kodieren kostet zwei Bytes pro Stück. Attributtrennzeichen werden zu Apostrophen und der CSS-Wert wird in doppelte Anführungszeichen gefasst, keins von beiden muss also maskiert werden. Werte, die bereits einen Apostroph enthalten, bleiben unangetastet.
Sollte ich überhaupt einbetten oder lieber verlinken?
Bette kleine, häufig genutzte Symbole ein und verlinke alles Größere. Einbetten spart eine Anfrage, aber die Bytes leben dann in jeder Seite oder jedem Stylesheet, das das Symbol nutzt, und lassen sich nicht eigenständig cachen. Um 4 KB kippt die Rechnung, deshalb warnt das Feld dort.
Ändert gzip die Antwort?
Es vergrößert den Abstand eher, als ihn zu schließen. Prozentkodierte SVG ist weiterhin erkennbarer Text mit wiederkehrenden Tag- und Attributnamen, ein Kompressor findet also reichlich Material. Base64-Ausgabe wirkt aus Sicht eines Kompressors nahezu zufällig und schrumpft kaum.
Wird meine SVG vor dem Kodieren gereinigt?
Ja, und das zählt hier mehr als bei einem Konverter, der Pixel ausgibt. Skripte, on*-Ereignis-Handler, entfernte Bildverweise und externe Stylesheet-Importe werden entfernt, und das Feld listet auf, was es gefunden hat. Inline eingefügt führt eine ungereinigte SVG alles aus, was in ihr steht.
Kann ich die data:-URI als Favicon oder in einer E-Mail nutzen?
Als Favicon nein - Browser wollen dort eine echte URL. In E-Mails ebenfalls nein: Alle großen Programme blockieren SVG vollständig, data:-URI hin oder her. Data:-URIs sind für deine eigenen Webseiten und Stylesheets. Für E-Mail wandle die SVG erst in PNG um und hänge diese an oder hoste sie.
Warum sieht mein Symbol nach dem Einbetten schwarz aus?
Weil es currentColor genutzt hat. Eine data:-URI ist ein eigenes Dokument und kann die Farbe des verweisenden Elements nicht erben, currentColor fällt also auf seinen Ausgangswert zurück. Unser SVG-zu-CSS-Werkzeug erkennt das und gibt dir einen mask-image-Ausschnitt, der die Form in der Textfarbe des Elements einfärbt.
Wozu das <img>-Tag, wenn ich die data:-URI habe?
Bequemlichkeit, und das alt-Attribut. Der Ausschnitt bringt alt="" bereits mit, der korrekte Wert für ein dekoratives Symbol und der, den alle vergessen - ein Bild ganz ohne alt-Attribut wird von Screenreadern mit seinem Dateinamen angesagt, und der ist bei einer data:-URI eine Zeichenwand.
Werden meine Dateien irgendwo hochgeladen?
Nein. Die Kodierung sind ein paar Zeilen Rechnen, die in deinem Browser laufen, deine Datei wird also nie an einen Server geschickt, nie gespeichert und nie von uns gesehen. Das heißt auch: keine Warteschlange und keine Größengrenze außer dem, was dein Gerät im Speicher halten kann.
Das könnte dich auch interessieren
Funktioniert etwas nicht? Fehler melden