Base64 SVG się nie wyświetla? Praktyczny sposób naprawy

Base64 SVG się nie wyświetla? Praktyczny sposób naprawy

Ten problem pojawia się cały czas w prawdziwych projektach:

• Twój img src="data:image/svg+xml;base64,..." wygląda na prawidłowy, ale nic się nie renderuje.
• Ten sam ciąg SVG działa w jednym miejscu i przerywa w tle CSS.
• Błąd jest trudny do wykrycia podczas przeglądu kodu, ale debugowanie jest kosztowne.

Jeśli brzmi to znajomo, w tym przewodniku znajdziesz powtarzalną ścieżkę naprawy.

Dlaczego jest to trudne do debugowania

Problemem rzadko jest jedna przerwana linia. Zwykle jest to problem z łańcuchem:

1. Źródło SVG może już być nieprawidłowe.
2. Kodowanie może nie odpowiadać kontekstowi docelowemu.
3. HTML, CSS i JSON wymagają innego zachowania podczas ucieczki.
4. Reguły czyszczenia zabezpieczeń i renderowania różnią się w zależności od środowiska.

Dlatego jeden SVG może renderować w jednym kontekście i zawieść w innym.

Najczęstsze przyczyny źródłowe (w kolejności priorytetów)

1. Zły prefiks MIME Użyj data:image/svg+xml;base64, lub data:image/svg+xml,.

2. Nieprawidłowe kodowanie Base64 Bezpośrednie btoa(svg) może zostać przerwane, gdy SVG zawiera znaki inne niż ASCII.

3. Problemy z escapowaniem w różnych kontekstach Szczególnie w CSS znaki takie jak # i cudzysłowy mogą zakłócać ładowanie.

4. Ryzykowna lub zablokowana zawartość SVG Skrypty, procedury obsługi zdarzeń i odniesienia zewnętrzne mogą zostać usunięte lub zablokowane.

5. Zepsuta struktura SVG Brakujący viewBox, zniekształcony kod XML lub nieprawidłowe tagi mogą uniemożliwić renderowanie.

Jak rozwiązać ten problem w SVGView

Zamiast zostawiać użytkownika z domysłami, rozkładamy problem na trzy warstwy.

1) Warstwa wejściowa: Sprawdź przed importem

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

• Wymuszanie typu i rozmiaru pliku (do 10 MB)
• Parsowanie i sprawdzanie poprawności XML z wymaganym rootem <svg>
• Zwracanie błędów parsowania, aby szybciej postawić diagnozę

Dzięki temu nieprawidłowe dane wejściowe odpadają już na starcie.

2) Warstwa bezpieczeństwa: Oczyść przed podglądem

W src/lib/svg/sanitizer.ts usuwamy:

• <script>
• Atrybuty obsługi zdarzeń on*
• <foreignObject>
• Referencje zewnętrzne (href, xlink:href, src)

Poprawia to bezpieczeństwo i zmniejsza niespójność renderowania.

3) Warstwa wyjściowa: udostępnij Data URI w Base64 i w wersji URL-encoded

W 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}`;
}

Możesz więc:

• Wybrać Base64 dla szerszej kompatybilności
• Wybrać URL encoding, gdy zależy Ci na krótszym i czytelniejszym ciągu
• Zawsze zwrócić poprawny typ MIME image/svg+xml

Którego kodowania należy użyć?

1. Nieznane środowisko docelowe: najpierw wybierz Base64
2. Potrzebujesz krótszych i czytelnych ciągów: wybierz kodowanie adresu URL
3. Użycie CSS w tle: preferuj kodowanie URL z odpowiednią zmianą znaczenia

Użyj tych narzędzi bezpośrednio:

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

Powtarzalna lista kontrolna rozwiązywania problemów

1. Potwierdź prefiks: data:image/svg+xml;base64, lub data:image/svg+xml,
2. Potwierdź prawidłowy root <svg> i viewBox
3. Potwierdź przebieg kodowania bezpiecznego UTF-8
4. Potwierdź ucieczkę dla kontekstów CSS/JSON
5. Oczyść SVG przed eksportem
6. Przełączaj się między Base64 i URL encodingiem, aby szybko porównać wynik

Często zadawane pytania

Dlaczego to działa w <img>, ale nie działa w CSS?

Ponieważ analizowanie ciągów CSS ma bardziej rygorystyczne wymagania dotyczące ucieczki. Kodowanie adresów URL jest tam zwykle bezpieczniejsze.

Czy zmiana na image/svg+xml zawsze wystarczy?

Nie. MIME to tylko jedna część. Kodowanie, ucieczka i ważność SVG nadal mają znaczenie.

Czy identyfikator URI danych jest zawsze lepszy niż zewnętrzne pliki SVG?

Nie. URI danych doskonale sprawdza się w przypadku małych zasobów wbudowanych. Duże lub często ponownie wykorzystywane zasoby są często lepsze jako pliki zewnętrzne.

Streszczenie

„Base64 SVG się nie wyświetla” rzadko oznacza jeden konkretny błąd. Zwykle problem dotyczy całego łańcucha przetwarzania.

Gdy uporządkujesz walidację, czyszczenie, podwójne kodowanie i dopasowanie do kontekstu użycia, problem staje się przewidywalny i znacznie łatwiejszy do rozwiązania.