Base64-SVG wird nicht angezeigt? So beheben Sie es sauber

Base64-SVG wird nicht angezeigt? So beheben Sie es sauber

Dieses Problem taucht in realen Projekten ständig auf:

• Ihr img src="data:image/svg+xml;base64,..." sieht gültig aus, aber es wird nichts gerendert.
• Derselbe SVG-String funktioniert an einer Stelle, bricht aber in einem CSS-Hintergrund zusammen.
• Der Fehler ist im Code-Review schwer zu erkennen, aber teuer zu debuggen.

Wenn Ihnen das bekannt vorkommt, zeigt Ihnen dieser Leitfaden einen klaren und wiederholbaren Weg zur Lösung.

Warum das so schwer zu debuggen ist

Das Problem steckt selten in einer einzigen kaputten Zeile. Meist handelt es sich um eine Kette von Fehlerquellen:

1. Die SVG-Quelle ist möglicherweise bereits ungültig.
2. Die Encodierung passt möglicherweise nicht zum Zielkontext.
3. HTML, CSS und JSON erfordern jeweils unterschiedliches Escaping.
4. Sicherheitsbereinigung und Rendering-Regeln unterscheiden sich je nach Umgebung.

Deshalb kann ein SVG in einem Kontext funktionieren und in einem anderen fehlschlagen.

Die häufigsten Ursachen (nach Priorität)

1. Falsches MIME-Präfix
   Verwenden Sie data:image/svg+xml;base64, oder data:image/svg+xml,.

2. Falscher Base64-Encoding-Ablauf
   Direktes btoa(svg) kann fehlschlagen, wenn das SVG Nicht-ASCII-Zeichen enthält.

3. Escaping-Konflikte zwischen Kontexten
   Besonders in CSS können Zeichen wie # und Anführungszeichen das Laden verhindern.

4. Riskanter oder blockierter SVG-Inhalt
   Skripte, Event-Handler und externe Referenzen können entfernt oder blockiert werden.

5. Kaputte SVG-Struktur
   Eine fehlende viewBox, fehlerhaftes XML oder ungültige Tags können das Rendering verhindern.

Wie wir das in SVGView lösen

Anstatt Nutzer raten zu lassen, behandeln wir das Problem in drei klaren Schichten.

1) Eingabeschicht: vor dem Import validieren

In src/lib/svg/import-handler.ts:

• erzwingen wir Dateityp und -größe (bis zu 10 MB)
• parsen und validieren wir XML mit einem erforderlichen <svg>-Root
• geben wir Parse-Fehler für eine schnellere Diagnose zurück

So werden ungültige Eingaben früh aussortiert.

2) Sicherheitsschicht: vor der Vorschau bereinigen

In src/lib/svg/sanitizer.ts entfernen wir:

• <script>
• on*-Event-Handler-Attribute
• <foreignObject>
• externe Referenzen (href, xlink:href, src)

Das verbessert die Sicherheit und reduziert Inkonsistenzen beim Rendering.

3) Ausgabeschicht: sowohl Base64- als auch URL-encodierte Data-URI bereitstellen

In src/lib/svg/exporter.ts:

export function exportToDataUri(svg: string): string {
  const encoded = btoa(unescape(encodeURIComponent(svg)));
  return `data:image/svg+xml;base64,${encoded}`;
}

export function exportToDataUriEncoded(svg: string): string {
  const encoded = encodeURIComponent(svg);
  return `data:image/svg+xml,${encoded}`;
}

So können Sie:

• Base64 für robustere Kompatibilität wählen
• URL-Encoding für kürzere, lesbare Ausgaben wählen
• immer den korrekten MIME-Typ image/svg+xml erhalten

Welche Encodierung sollten Sie verwenden?

1. Unbekannte Zielumgebung: zuerst Base64 wählen
2. Kürzere und lesbare Strings erforderlich: URL-Encoding wählen
3. Verwendung als CSS-Hintergrund: URL-Encoding mit korrektem Escaping bevorzugen

Verwenden Sie diese Tools direkt:

• SVG to Data URI
• SVG to CSS Background
• SVG Optimizer

Eine wiederholbare Troubleshooting-Checkliste

1. Präfix prüfen: data:image/svg+xml;base64, oder data:image/svg+xml,
2. Gültigen <svg>-Root und viewBox prüfen
3. UTF-8-sicheren Encoding-Ablauf prüfen
4. Escaping für CSS-/JSON-Kontexte prüfen
5. Vor dem Export bereinigen
6. Schnell zwischen Base64 und URL-Encoding wechseln, um gegenzuprüfen

FAQ

Warum funktioniert es in <img>, aber nicht in CSS?

Weil das String-Parsing in CSS strengere Escaping-Anforderungen hat. URL-Encoding ist dort meist sicherer.

Reicht es immer aus, auf image/svg+xml umzustellen?

Nein. MIME ist nur ein Teil des Problems. Encodierung, Escaping und SVG-Gültigkeit spielen weiterhin eine Rolle.

Ist Data URI immer besser als externe SVG-Dateien?

Nein. Data URI eignet sich hervorragend für kleine Inline-Assets. Große oder stark wiederverwendete Assets sind als externe Dateien oft besser geeignet.

Zusammenfassung

„Base64-SVG wird nicht angezeigt“ ist kein einzelner Fehler. Es ist ein Pipeline-Problem.

Sobald Sie den Ablauf als validieren -> bereinigen -> doppelt encodieren -> an den Kontext anpassen standardisieren, wird das Problem vorhersehbar und beherrschbar.