Konwerter SVG na PNG

To narzędzie zamienia grafikę wektorową SVG na rastrowy obraz PNG. Wrzuć plik SVG albo wklej jego kod, wybierz skalę (lub wpisz własną szerokość) i pobierz PNG.

Jak narzędzie ustala właściwy rozmiar?

Najpierw sprawdza atrybuty width i height samego SVG, jeśli oba są podane jako wartości bezwzględne, na przykład 120px albo 48. Gdy któregoś brakuje albo jest podany w procentach, narzędzie sięga po atrybut viewBox, wyliczając brakujący wymiar z proporcji, jeśli tylko jeden z nich da się wykorzystać. Jeśli plik nie ma żadnej z tych informacji, używana jest domyślna wartość 300x150, ta sama, którą przeglądarki stosują dla <img> bez podanego rozmiaru. Od tego momentu wybór skali 1x, 2x lub 4x po prostu mnoży ten bazowy rozmiar, albo można wpisać własną szerokość, a wysokość dopasuje się automatycznie zgodnie z tymi samymi proporcjami.

Czy plik SVG jest gdzieś wysyłany?

Nie, wszystko dzieje się na Twoim urządzeniu. Przeglądarka rysuje SVG na ukrytym elemencie canvas, a potem odczytuje z niego piksele, żeby zbudować PNG, więc plik nigdy nie trafia na serwer. Oznacza to też, że SVG jest traktowany wyłącznie jako obraz: żadne osadzone w nim znaczniki <script> ani obsługa zdarzeń się nie uruchamiają, bo renderowanie na canvasie nie wykonuje dokumentu tak, jak zrobiłoby to dodanie go bezpośrednio do strony.

Co może pójść nie tak przy błędnym SVG?

Konwerter wymaga kodu, który zawiera przynajmniej rozpoznawalny znacznik otwierający <svg>; tekst, który w ogóle nie przypomina SVG, jest odrzucany, zanim cokolwiek zostanie narysowane. Poza tym renderowanie zostaje w gestii silnika SVG przeglądarki, więc większość poprawnie zbudowanego SVG, łącznie z zagnieżdżonymi grupami, gradientami czy osadzonymi czcionkami lub obrazami, wyświetla się tak samo, jak gdyby otworzyć plik bezpośrednio. Naprawdę uszkodzony XML, w odróżnieniu od brakującej szerokości czy wysokości, i tak nie wyrenderuje się, bo przeglądarka nie jest w stanie w ogóle przetworzyć go na dokument.

Kiedy się to przyda?

Użyj tego narzędzia, żeby zamienić logo lub ikonę na PNG dla miejsca, które nie przyjmuje SVG, na przykład starego CMS-a, podpisu w mailu albo silnika gry. Można też wyeksportować tę samą ikonę w skali 1x, 2x i 4x dla różnych gęstości ekranu, co przydaje się przy ikonach aplikacji czy faviconach, które muszą istnieć w kilku ustalonych rozmiarach. O tym, czym różnią się oba formaty obrazów i kiedy który wybrać, przeczytasz w przewodniku po formatach plików graficznych MDN.