Zum Hauptinhalt springen

SVG zu Data-URI

Konvertieren Sie SVG in einen Daten-URI für CSS oder HTML

Erstellen Sie eine URL-kodierte oder Base64-SVG-Daten-URI sowie fertige Snippets für CSS background-image, CSS mask-image und HTML img. Optimieren Sie das Markup, prüfen Sie die Vorschau und kopieren Sie das benötigte Format, ohne die SVG-Datei hochzuladen.

Dateien hier ablegen

Standardwerte für neue Dateien werden bearbeitet

Kodierung

Die URL-Kodierung maskiert nur die Zeichen, die eine URL nicht transportieren kann, und liegt bei Dateien in Icon-Größe deshalb meist 20-30 % unter Base64, bei lesbarem Markup. Base64 wählen, wenn ein Build-Schritt oder ein CMS Prozentzeichen umschreibt.

Kodiert zusätzlich Leerzeichen, Apostrophe und Klammern, damit die URI in einem url(...) ohne Anführungszeichen sowie in Sass- oder Less-Strings sicher ist. Kostet ein paar Bytes. Base64 braucht das nicht.

Optimierung

Wendet die sichere Optimierungsvorgabe an, bevor die Ausgabe erzeugt wird.

Styling

Ersetzt Füllungen und Konturen, damit das Icon die umgebende Textfarbe übernimmt. Nur bei einfarbigen Grafiken sinnvoll: Eine mehrfarbige Grafik wird auf eine Farbe reduziert.

Keine Vorschau. Dateien hinzufügen und auswählen, um Ergebnisse zu sehen.

Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.

Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektor-Bildformat. Anstelle von Pixeln beschreibt eine SVG-Datei Formen, Pfade, Füllungen und Konturen mathematisch und kann daher in jeder Größe ohne Qualitätsverlust gerendert werden.

SVG ist das Standard-Vektorformat für das Web. Es wird von allen modernen Browsern nativ unterstützt und lässt sich mit CSS gestalten oder mit JavaScript beziehungsweise SMIL animieren. Für Logos, Icons und Illustrationen ist es oft kompakt; komplexe SVG-Dateien können jedoch groß werden.

Wann sollte man eine SVG als Data-URI einbetten

Ein Daten-URI fügt den gesamten SVG in das Stylesheet oder das Markup ein, sodass der Browser keine zweite Anfrage zum Zeichnen benötigt. Das lohnt sich für kleine, dekorative Kunstwerke: Aufzählungszeichen, Pfeile, Winkel, Kontrollkästchen oder eine Markierung in einer Fußzeile. Die URL-Kodierung ist für SVG-Text normalerweise kompakter, während Base64 nützlich sein kann, wenn ein anderes Tool dies erwartet. Eine CSS-Maske behandelt SVG als Schablone für die eigene Hintergrundfarbe des Elements, sodass ein monochromes Symbol pro Status, pro Thema oder pro Komponente mit einer einzigen CSS-Deklaration neu eingefärbt werden kann.

So wandeln Sie eine SVG online in eine Data-URI um

  1. 1

    SVG-Dateien ablegen oder DATEIEN AUSWÄHLEN klicken, um sie der Warteschlange hinzuzufügen. Bis zu 40 auf einmal.

  2. 2

    URL-kodiert oder Base64 wählen und entscheiden, ob das Markup vorher optimiert wird. Alle fünf Ausgaben samt ihren Bytegrößen aktualisieren sich mit.

  3. 3

    Das benötigte Snippet kopieren oder auf ALLE SPEICHERN klicken, um pro SVG eine .css-Datei mit der background- und der mask-Regel herunterzuladen.

Datenschutz: Ihre Dateien verlassen den Browser nicht

Die Konvertierung erfolgt lokal in Ihrem Browser mit JavaScript und WebAssembly. Es erfolgt kein Datei-Upload oder eine serverseitige Konvertierung, sodass die von Ihnen hinzugefügten Dateien auf Ihrem Gerät verbleiben.

Die lokale Verarbeitung trägt zum Schutz vertraulicher Logos, interner Dokumente und unveröffentlichter Kundengrafiken bei. Seiten und Konvertierungscode werden zwischengespeichert, während Sie sie verwenden, sodass bereits geöffnete Tools ohne Netzwerkverbindung weiterarbeiten können.

Häufige Fragen

Ist eine URL-kodierte Data-URI kleiner als Base64?

Normalerweise. Base64 erhöht den Codierungsaufwand für die Rohbytes, während die URL-Codierung nur die Zeichen erweitert, die maskiert werden müssen. Der genaue Unterschied hängt vom SVG-Markup ab, daher zeigt das Tool beide Größen an und ermöglicht Ihnen den Vergleich für die Datei vor Ihnen.

Wie färbt die CSS-Maskenregel ein Icon um?

mask-image nutzt die SVG als Schablone: Das Element malt seine eigene background-color, und die Maske entscheidet, welche Pixel übrig bleiben. Weil die Farbe aus dem CSS kommt, kann eine einzige Data-URI jede Farbe annehmen, und eine Hover- oder Dark-Mode-Variante ist nur eine andere background-color. Das funktioniert nur bei einfarbigen Grafiken, denn eine Maske behält den Alphakanal und verwirft die eigenen Farben der SVG. Safari braucht weiterhin das Präfix -webkit-mask-image, das die erzeugte Regel enthält.

Wann sollte ich eine SVG nicht als Data-URI einbetten?

Wenn die Datei groß oder freigegeben ist. Ein Daten-URI wird in jedes Stylesheet oder jede Seite kopiert, die ihn verwendet, sodass er nicht einzeln zwischengespeichert werden kann und bei jeder Änderung dieser Datei erneut heruntergeladen wird. Für größere Grafiken oder Assets, die auf vielen Seiten wiederverwendet werden, ist eine separate SVG-Datei mit eigenen Cache-Headern oft die bessere Wahl. Ein Daten-URI kann auch nicht von außen gestylt werden, weshalb die generierte Maskenregel für monochrome Symbole nützlich ist.