Jak używać
- Przeciągnij plik .svg na pole upuszczania, kliknij, aby go wybrać, lub wklej obraz.
- Pozostaw opcję „Zachowaj oryginał”, aby zakodować sam kod SVG, albo wybierz PNG, JPEG lub WebP, aby zamienić go na piksele.
- Przy rasteryzacji ustaw „Maks. szerokość”, aby określić rozmiar w pikselach.
- Skopiuj CSS background-image do arkusza stylów albo data URI, czysty Base64, znacznik img lub wersję Markdown.
SVG jako data URI
SVG (Scalable Vector Graphics, typ MIME image/svg+xml) opisuje kształty jako tekst XML, dzięki czemu pozostaje ostry w każdym rozmiarze. Jego Base64 zwykle zaczyna się od PHN2Zy (zakodowane <svg) lub od PD94bWw, gdy plik zaczyna się deklaracją XML.
Gdy SVG jest używany jako obraz, element główny musi mieć atrybut xmlns="http://www.w3.org/2000/svg". Wiele fragmentów skopiowanych z kodu HTML go pomija, a wtedy data URI nic nie wyświetla. W trybie obrazu blokowane są też zasoby zewnętrzne, więc czcionki internetowe i podlinkowane obrazy wewnątrz SVG się nie wczytają; najpierw zamień tekst na ścieżki lub osadź te zasoby.
Base64 czy kodowanie procentowe?
Ponieważ SVG jest już tekstem, data URI może przenosić kod bezpośrednio, a w kodowaniu procentowym trzeba zapisać tylko kilka znaków (<, >, #, % i cudzysłowy). W przypadku typowej ikony w CSS taki zapis jest krótszy niż Base64 i lepiej kompresuje się za pomocą gzip. Base64 jest bezpieczniejszym wyborem, gdy ciąg przechodzi przez systemy zniekształcające cudzysłowy lub znaki specjalne albo gdy API oczekuje Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Kodowanie procentowe */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Aby utworzyć wersję w kodowaniu procentowym, użyj narzędzia Generator data URI i wybierz opcję „Kodowanie procentowe”.
Oczyszczaj niezaufane pliki SVG
SVG może zawierać elementy <script>, atrybuty obsługi zdarzeń, takie jak onload, oraz linki do innych dokumentów. Przeglądarki nie uruchamiają skryptów w pliku SVG wyświetlanym przez <img> lub jako tło CSS, ale ten sam plik osadzony bezpośrednio w HTML lub otwarty samodzielnie może je uruchomić. Jeśli użytkownicy mogą przesyłać pliki SVG do aplikacji, oczyść je przed zapisaniem lub osadzeniem, np. za pomocą DOMPurify. Base64 jedynie ukrywa kod przed pobieżnym spojrzeniem; nie czyni go bezpiecznym.
Najczęściej zadawane pytania
Co jest lepsze dla SVG: Base64 czy kodowanie procentowe?
W przypadku SVG w CSS kodowanie procentowe zwykle daje krótszy wynik i pozostaje czytelne. Base64 jest bardziej niezawodny, gdy ciąg przechodzi przez inne systemy lub gdy API wymaga Base64.
Dlaczego data URI z SVG się nie wyświetla?
xmlns w elemencie głównym, niezakodowany znak # w URI z kodowaniem procentowym oraz czcionki lub obrazy, które SVG wczytuje z innych plików.Czy można przekonwertować SVG na ciąg Base64 w formacie PNG?
Tak. Wybierz PNG w polu „Konwertuj na”. Przeglądarka wyrenderuje SVG do pikseli, a opcja „Maks. szerokość” pozwala zmniejszyć wynik.