SVG in Base64

So wandeln Sie SVG in Base64 um

1. Legen Sie eine .svg-Datei auf dem Feld ab oder wählen Sie sie über die Dateiauswahl.
2. Ausgabe als steht anfangs auf CSS-background-image. Wechseln Sie zu Data-URI, HTML-<img>, Markdown oder Reines Base64, wenn Sie eine andere Form brauchen.
3. Drücken Sie Ausgabe kopieren und fügen Sie die Regel in Ihr Stylesheet ein.

Das SVG wird genau so kodiert, wie es gespeichert ist. Optionen für Größe oder Qualität gibt es hier nicht, weil eine Vektorgrafik sie nicht braucht. Wollen Sie einen kürzeren String, schicken Sie die Datei vorher durch einen SVG-Optimierer; das Entfernen von Editor-Metadaten spart oft mehr als jede Wahl der Kodierung.

Base64 oder URL-kodiertes SVG

SVG ist Text und muss deshalb gar nicht in Base64 vorliegen. Eine Data-URI kann das Markup direkt tragen, wenn ein paar Zeichen prozentkodiert werden. Hier ist dasselbe 104-Byte-Dreieck-Icon auf beide Arten:

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

Die URL-kodierte Version ist kürzer, und nach gzip wird der Abstand größer: Die beiden Regeln oben komprimieren auf 200 bzw. 162 Bytes. Mit 20 kleinen Icons in einem Stylesheet war die Base64-Version 4.421 Bytes groß (801 mit gzip), die URL-kodierte 3.720 Bytes (615 mit gzip). Wiederholtes Markup lässt sich gut komprimieren, und Base64 verwürfelt genau diese Wiederholung.

Base64 braucht keine Regeln zum Maskieren, übersteht jeden Kontext, der eine URL akzeptiert, und ist das, was viele APIs und Build-Tools erwarten. Die URL-kodierte Form bricht, wenn Sie vergessen, # zu maskieren (es leitet ein URL-Fragment ein), oder wenn die Anführungszeichen mit dem umgebenden url("...") kollidieren. SVG in Data-URI erzeugt beide Versionen und zeigt ihre Größen.

Voraussetzungen für eine SVG-Data-URI

• MIME-Typ image/svg+xml. Browser erkennen PNG- und JPEG-Daten selbst unter einem falschen Typ, SVG aber nicht. Mit jedem anderen Typ wird das Bild nicht dargestellt.
• Das Attribut xmlns. Inline-<svg> im HTML funktioniert ohne, als Bild muss das Wurzelelement aber xmlns="http://www.w3.org/2000/svg" deklarieren. Vielen handgeschriebenen Icons fehlt es, und sie scheitern stillschweigend.
• Wohlgeformtes XML. Ein nicht geschlossenes Tag oder ein nicht maskiertes & lässt das ganze Bild scheitern, ohne teilweise Darstellung.

Das Base64 eines SVG beginnt meist mit PHN2Zy (<svg) oder PD94bWwg (<?xml ). Alles andere am Anfang, etwa ein Kommentar oder eine Byte-Order-Mark, ist für Browser in Ordnung, erschwert aber das Erkennen des Formats am Präfix.

Gestaltung und Farben

Ein SVG, das als background-image oder in <img> verwendet wird, ist ein eigenes Dokument. Das CSS Ihrer Seite reicht nicht hinein, Hover-Farben und currentColor funktionieren also nicht. Zwei gängige Auswege:

• Verwenden Sie die Data-URI als Maske und färben Sie sie mit background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Binden Sie das <svg>-Markup inline im HTML ein, wenn sich das Icon mit Zustand oder Theme ändern soll.

Dekodieren und reparieren

Base64 in SVG macht aus einem Base64-String wieder Markup, das Sie lesen und bearbeiten können. Wird ein SVG im Editor angezeigt, aber nicht als Data-URI, dekodieren Sie es dort und prüfen Sie zuerst das Wurzelelement auf xmlns.

Häufige Fragen