Dekoder Base64 na SVG

Wklej SVG zakodowany w Base64, aby zobaczyć podgląd i zapisać oryginalny plik wektorowy. Grafikę można też zrasteryzować do PNG, JPG lub WebP albo umieścić obraz bitmapowy w opakowaniu SVG.

Działa w całości w przeglądarce. Nic nie jest wysyłane.

Jak używać

  1. Wklej ciąg Base64 lub URI data:image/svg+xml;base64.
  2. Sprawdź podgląd oraz wykryty format i wymiary.
  3. W polu „Pobierz jako” pozostaw SVG. Dane wejściowe w formacie SVG są zapisywane jako tekst SVG.
  4. Pobierz plik .svg i otwórz go w edytorze, jeśli chcesz przeczytać lub zmienić znaczniki.

Jak rozpoznać SVG w Base64

W przeciwieństwie do innych formatów graficznych SVG to zwykły tekst XML. Plik zaczynający się od <svg koduje się do Base64 rozpoczynającego się od PHN2Zy, a plik zaczynający się od deklaracji XML (<?xml) daje Base64 rozpoczynający się od PD94bWwg. SVG w Base64 często występuje w obrazach tła CSS, zestawach ikon, eksportach z narzędzi projektowych i szablonach wiadomości e-mail. Typ MIME to image/svg+xml.

Wiele data URI z SVG w ogóle nie zawiera Base64, tylko tekst z kodowaniem procentowym, na przykład data:image/svg+xml,%3Csvg.... To narzędzie oczekuje Base64, więc takie ciągi przeanalizuj za pomocą generatora data URI.

Odczytywanie kodu SVG

Podgląd pokazuje, jak grafika jest renderowana, ale często najciekawsze są same znaczniki: dane ścieżek, kolory, atrybut viewBox czy osadzone czcionki. Pobierz plik jako „Oryginał” lub SVG i otwórz go w dowolnym edytorze tekstu albo wklej ten sam ciąg Base64 do narzędzia Dekodowanie Base64, aby od razu zobaczyć XML w postaci tekstu.

Raster na SVG to opakowanie, a nie wektoryzacja

Jeśli dane Base64 to PNG, JPEG lub inna bitmapa, wybranie SVG tworzy plik SVG, który zawiera oryginalne piksele w elemencie <image>. Przydaje się to, gdy narzędzie przyjmuje wyłącznie pliki SVG, ale obraz nie zostaje przekształcony w kształty: nadal rozmywa się po powiększeniu, a plik jest większy niż bitmapa, ponieważ piksele są w nim zapisane jako Base64. Aby uzyskać prawdziwe ścieżki wektorowe, użyj oprogramowania do wektoryzacji, takiego jak Potrace, lub funkcji Wektoryzuj bitmapę (Trace Bitmap) w programie Inkscape.

Bezpieczna obsługa niezaufanych plików SVG

SVG może zawierać elementy <script>, atrybuty obsługi zdarzeń i odwołania do zasobów zewnętrznych. Przeglądarki blokują je wszystkie, gdy SVG jest wyświetlany jako obraz, czyli przez znacznik <img> lub jako tło CSS. Skrypty mogą się jednak uruchomić, a zasoby zewnętrzne wczytać, gdy plik zostanie otwarty bezpośrednio w karcie przeglądarki lub gdy jego kod zostanie wklejony bezpośrednio do strony. Przed takim użyciem sprawdź lub oczyść SVG pochodzący z nieznanych źródeł.

Najczęściej zadawane pytania

Czy to narzędzie zamieni PNG w prawdziwy wektorowy SVG?

Nie. Konwersja bitmapy na SVG jedynie osadza obraz w pliku SVG. Wynik skaluje się jak oryginalna bitmapa, a nie jak rysunek wektorowy.

Dlaczego data URI z SVG nie daje się zdekodować?
Sprawdź, czy zawiera ;base64,. Jeśli nie, SVG jest zapisany z kodowaniem procentowym lub jako surowy tekst i nie jest to Base64. Taki ciąg można przeanalizować w generatorze data URI.
Czy dekodowanie SVG z nieznanego źródła jest bezpieczne?

Dekodowanie i zapisanie pliku jest nieszkodliwe, ponieważ wynik to zwykły tekst. Skrypty w SVG mogą się uruchomić dopiero wtedy, gdy plik zostanie otwarty jako dokument lub wstawiony bezpośrednio do kodu strony internetowej.

Dlaczego po konwersji SVG na PNG brakuje czcionek lub zewnętrznych obrazów?

Aby zrasteryzować SVG, przeglądarka wczytuje go jako obraz, a w tym trybie SVG nie może pobierać plików zewnętrznych. Czcionki internetowe i obrazy dołączone przez odnośniki są pomijane, a zamiast nich używane są czcionki domyślne. Osadź czcionki i obrazy w pliku SVG, aby był samowystarczalny.