SVG-zu-Base64 Konverter: Kodiere SVG-Bilder

SVG in Base64 konvertieren

SVG (Scalable Vector Graphics) ist das einzige Web-Bildformat, das bei jedem Zoomfaktor perfekt scharf bleibt. Dieses Tool kodiert SVG-Dateien in Base64 zur Einbettung als Data URIs in CSS, HTML oder JavaScript.

Wie man es verwendet

1. Ziehe eine SVG-Datei in den Upload-Bereich oder klicke zum Durchsuchen
2. Das Tool liest die Datei und kodiert sie in Base64
3. Wähle dein Ausgabeformat: reines Base64, Data URI oder CSS Background
4. Kopiere das Ergebnis

SVG und Base64: Wann es sinnvoll ist

SVG ist einzigartig unter den Bildformaten, da es bereits Text ist (XML). Das schafft eine Wahl, die es bei binären Formaten wie PNG oder JPEG nicht gibt: Du kannst SVG als Base64, URL-kodierten Text oder inline Markup einbetten.

Base64 Data URI

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0...);

URL-kodierter Data URI (meist besser)

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

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Wann Base64 für SVG verwenden

Obwohl URL-Kodierung in der Regel kleiner ist, sind Base64-Data-URIs für SVG die richtige Wahl, wenn:

• Das SVG in einem Kontext landet, der keine URL-Kodierung unterstützt (einige E-Mail-Clients, bestimmte Template-Engines)
• Du das SVG in einem JSON-Payload speichern musst, wo URL-kodierte Zeichen zusätzliches Escaping erfordern würden
• Das SVG problematische Zeichen für URL-Kodierung enthält (Anführungszeichen, Größer-/Kleiner-Zeichen in Attributwerten)
• Du CSS programmatisch generierst und einen konsistenten Kodierungsansatz für alle Bildtypen haben möchtest

SVGs vor der Kodierung optimieren

SVGO

npx svgo input.svg -o optimized.svg

Checkliste für manuelle Optimierung

• Entferne XML-Deklaration (<?xml ...?>)
• Entferne <title>, <desc> und <metadata> Blöcke
• Minimiere Pfaddaten mit dezimaler Kürzung
• Entferne leere Gruppen <g></g> und Standardattribute
• Ersetze Farben durch kürzere Hex-Werte (#000 statt #000000)
• Verwende viewBox anstelle von width/height wenn möglich