SVG in Data-URI

So wandeln Sie SVG in eine Data-URI um

1. Fügen Sie das SVG-Markup in das Feld Text ein. Öffnen Sie eine .svg-Datei in einem beliebigen Texteditor, um es zu kopieren. Das Feld enthält anfangs ein Beispiel-Icon.
2. MIME-Typ ist bereits image/svg+xml, und Kodierung steht auf Optimiertes SVG.
3. Sehen Sie sich die Tabelle unter den Optionen an. Sie listet URI-Länge und gzip-Größe für Base64, URL-kodiert und Optimiertes SVG auf, markiert die kleinste Variante und hat für jede eine Schaltfläche Verwenden.
4. Wählen Sie ein Ausgabeformat: reine Data-URI, CSS-url(), HTML-<img>, HTML-<a> oder Markdown. Dann Ausgabe kopieren.

Sie können auch im Modus Aus Datei eine .svg ablegen; dann gibt es Base64 und URL-Kodierung der Datei, so wie sie ist. Die optimierte Variante und die Vergleichstabelle brauchen das Markup im Textfeld.

Größe von SVG als Base64 und URL-kodiert

Für das eingebaute Beispiel, ein 309 Byte großes Icon mit abgerundetem Quadrat, einem Kreis und einer Linie, zeigt die Tabelle:

Einfache URL-Kodierung ist roh die längste, weil jedes Leerzeichen, Anführungszeichen, <, > und jeder Zeilenumbruch zu drei Zeichen wird. Nach gzip schlägt sie Base64 aber deutlich, denn das Markup behält seine sich wiederholende Struktur, während Base64 sie verwürfelt. Stylesheets werden fast immer komprimiert ausgeliefert, also ist die gzip-Spalte diejenige, die bei den Nutzern ankommt.

Optimiertes SVG gewinnt beide Spalten. Bei einem kleinen Dreieck-Icon mit 103 Bytes ist der Abstand derselbe: Base64 166 Zeichen, URL-kodiert 172, optimiert 136. SVG in Base64 enthält einen Vergleich über einen ganzen Satz Icons.

Was „Optimiertes SVG“ macht

Der Optimierer nimmt vier Änderungen am Markup vor:

1. Er fasst jede Folge von Leerraum, auch Zeilenumbrüche, zu einem Leerzeichen zusammen und kürzt die Enden.
2. Er ersetzt " durch ', aber nur, wenn das SVG noch kein ' enthält.
3. Er prozentkodiert mit encodeURIComponent und setzt dann die Zeichen zurück, die in einer URI sicher sind: Leerzeichen, =, :, /, , und ;.
4. Er schreibt die verbleibenden Escapes in Kleinbuchstaben (%3c statt %3C), was sich etwas besser mit gzip komprimieren lässt: 220 statt 222 Bytes beim Beispiel.

Das Ergebnis für das Dreieck-Icon:

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

Das # der Farbe wurde zu %23. Das Escape ist zwingend: Ein nicht maskiertes # leitet ein URL-Fragment ein, und alles danach wird stillschweigend verworfen.

Regeln für Anführungszeichen und Kontext

Die optimierte Ausgabe enthält einfache Anführungszeichen, rohe Leerzeichen und rohe Klammern. Innerhalb doppelter Anführungszeichen ist das in Ordnung, sonst nirgends:

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

Ein url(...) ohne Anführungszeichen bricht an den Leerzeichen, und ein Attribut in einfachen Anführungszeichen endet am ersten '. Wird die URI in JavaScript zusammengesetzt, von einer Template-Engine eingefügt oder in ein System kopiert, das Anführungszeichen umschreibt, ist Base64 die sicherere Wahl: Es enthält nur Buchstaben, Ziffern, +, / und = und übersteht damit jeden Kontext. Mit der Schaltfläche Verwenden in der Tabelle wechseln Sie.

Die übrigen Einschränkungen sind klein. Optimiertes SVG ist immer UTF-8 und ignoriert mit einer Warnung jeden anderen gewählten Zeichensatz. Das Zusammenfassen von Leerraum kann Text in <text>-Elementen verändern, die Leerzeichen erhalten. Und das SVG braucht weiterhin xmlns="http://www.w3.org/2000/svg" am Wurzelelement, wie jedes SVG, das als Bild verwendet wird.

Der Optimierer in JavaScript

Dieselbe Umwandlung passt in ein paar Zeilen, für Build-Skripte oder CSS-in-JS:

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

Sie erzeugt die oben gezeigte Dreieck-URI. Mehr zum Kodieren im Browser und in Node finden Sie unter Base64 in JavaScript. Um eine vorhandene SVG-Data-URI zu lesen, fügen Sie sie in Base64 in SVG oder den Data-URI-Parser ein.

Häufige Fragen