SVG in Base64

Mach aus SVG-Icons Data URIs für CSS-Hintergründe und HTML. Wähle Base64 oder die kürzere URL-kodierte Form, bei der das SVG lesbar bleibt.

Kostenlos und privat. Alles läuft in deinem Browser, nichts wird hochgeladen.

So funktioniert es

  1. SVG hinzufügenÖffne die Datei oder zieh sie in das Eingabefeld. Du kannst auch direkt Base64 einfügen.
  2. Ausgabe wählenWähle Data URI, Base64, CSS, HTML oder Markdown. Vorschau und Größen ändern sich sofort.
  3. Kopieren oder herunterladenKopiere den Code mit einem Klick oder lade das Bild als Datei herunter.

Base64 oder URL-kodiert?

SVG ist Text und braucht deshalb kein Base64. Schalte die Option URL-Kodierung ein, dann behält das Tool das SVG als Text, kodiert nur die Zeichen, die es kaputt machen würden, und liefert ein Ergebnis, das meist kürzer ist und sich besser komprimieren lässt.

Base64 ist trotzdem nützlich, wenn ein System nur Base64-Data-URIs annimmt. Deshalb sind beide Formen nur einen Klick entfernt.

Über SVG

SVG ist ein textbasiertes Vektorformat. Weil es schon Text ist, lässt es sich auch ohne Base64 einbetten, was oft ein kürzeres Ergebnis ergibt.

Über Base64

Base64 schreibt Binärdaten als reinen Text aus Buchstaben, Ziffern, + und /. Eine Data URI stellt den Dateityp voran, zum Beispiel data:image/png;base64, damit Browser wissen, wie sie die Daten anzeigen sollen.

Häufige Fragen

Kann ich die Farbe des Icons später ändern?

Nicht mit der CSS-Eigenschaft color, weil das SVG zu einem Hintergrundbild wird. Ändere die Füllfarbe im SVG vor dem Umwandeln, oder nimm die URL-kodierte Form und ändere den Farbwert im Text.

Wird mein Bild hochgeladen?

Nein. Das Bild wird in deinem Browser gelesen und umgewandelt und nie an unsere Server gesendet.

Gibt es eine Größenbeschränkung?

Es gibt kein festes Limit, aber Data URIs über etwa 100 KB machen Seiten und Stylesheets schwer. Für große Bilder ist eine normale Bilddatei die bessere Wahl.

Kann ich auch andere Dateien umwandeln, etwa PDFs oder Schriften?

Ja. Jede Datei wird zu einer Data URI oder zu reinem Base64. Die Optionen CSS, HTML und Markdown gibt es nur für Bilder.

Wie wandle ich Base64 wieder in ein Bild um?

Füge den Base64-Text oder die Data URI in das Eingabefeld ein. Das Bild erscheint sofort, und Herunterladen speichert es mit der richtigen Dateiendung.

Funktioniert es offline?

Ja. Nachdem du die Seite einmal geöffnet hast, funktioniert sie auch ohne Internetverbindung.