Konwerter SVG na PNG

Zamieniaj skalowalne wektory SVG na gotowe do użycia obrazy PNG

Plik SVG to zestaw instrukcji, a nie gotowy obraz. Otwórz go w edytorze tekstu, a znajdziesz XML opisujący ścieżki, kształty, wypełnienia i krzywe — recepturę, którą przeglądarka wykonuje, rysując grafikę od nowa w dowolnym żądanym rozmiarze. PNG to coś przeciwnego: siatka kolorowych pikseli zamrożona przy stałej szerokości i wysokości. Konwersja jednego na drugie nazywa się rasteryzacją i to narzędzie wykonuje ją w całości w Twojej przeglądarce. Wybierasz rozmiar wyjściowy, SVG jest malowany na kanwie HTML i otrzymujesz PNG — żaden plik nigdy nie opuszcza Twojego urządzenia.

Wektor a raster — po ludzku

Kluczowa różnica polega na tym, jak obsługiwana jest rozdzielczość. Ponieważ SVG przechowuje matematykę zamiast pikseli, jest niezależny od rozdzielczości: przeskaluj logo od rozmiaru favikony do billboardu, a każda krawędź jest przeliczana, by pozostać matematycznie ostra. PNG nie ma takiej swobody. Jego piksele są wypieczone na stałe, więc powiększenie poza rozmiar natywny zmusza przeglądarkę do rozciągania istniejących punktów i zaczynają być widoczne rozmycia oraz schodkowanie typowe dla obrazów rastrowych.

Ten kompromis działa w obie strony. Wektory są niezrównane dla logo, ikon i płaskich ilustracji złożonych z czystych kształtów, a pliki są zazwyczaj niewielkie. Formaty rastrowe, takie jak PNG, bardziej naturalnie obsługują gradienty, miękkie cienie i fotograficzne szczegóły, a — co kluczowe — rozumie je niemal wszystko. Rasteryzując, wymieniasz nieskończoną skalowalność SVG na powszechną zgodność PNG przy jednym wybranym rozmiarze.

Po co w ogóle rasteryzować SVG?

Skoro SVG skaluje się tak pięknie, dlaczego go konwertować? Zgodność to zazwyczaj odpowiedź. Wiele miejsc po prostu nie akceptuje SVG: wielu klientów poczty e-mail usuwa go lub odmawia renderowania, edytory dokumentów i oprogramowanie do prezentacji często chcą płaskiego obrazu, giełdy i sieci reklamowe żądają PNG lub JPG, a większość platform społecznościowych całkowicie ignoruje przesyłanie wektorów. Niektóre systemy zarządzania treścią blokują SVG ze względów bezpieczeństwa, ponieważ format może osadzać skrypty.

Drugi powód to to, że niekiedy chcesz mieć zasób o stałym rozmiarze. Ikony aplikacji, miniatury, obrazy podglądu Open Graph i materiały do druku wymagają dokładnych wymiarów w pikselach. PNG blokuje grafikę na tym celu, więc renderuje się identycznie wszędzie, bez niespodzianek od przeglądarki, która inaczej interpretuje wektor. Konwersja źródłowego SVG na precyzyjne rozmiary wymagane przez platformę jest często najczystszą drogą do spójnego wyniku.

Wybór właściwej rozdzielczości eksportu

Ponieważ PNG nie może elegancko się powiększyć, rozmiar eksportu ma tu większe znaczenie niż w przypadku wektora. Eksport zbyt mały sprawia, że obraz wygląda miękko na nowoczesnych ekranach; eksport niepotrzebnie duży marnuje przepustowość. Prosta zasada: zdecyduj o największym rozmiarze, w jakim obraz będzie kiedykolwiek wyświetlany, i renderuj przynajmniej tyle, a najlepiej więcej dla wyświetlaczy o wysokiej gęstości.

Standardowe ekrany są zadowolone z 1x — nominalnego rozmiaru grafiki. Wyświetlacze High-DPI i Retina pakują mniej więcej dwa razy więcej pikseli w tę samą przestrzeń, więc eksport 2x sprawia, że ikony i grafiki pozostają ostre zamiast rozmazane. Do druku, plakatów lub bardzo dużych wyświetlaczy, 3x lub 4x daje zapas. Ponieważ źródłem jest wektor, renderowanie w większym rozmiarze nic Cię nie kosztuje pod względem jakości — krzywe są po prostu przeliczane przy wyższej liczbie pikseli przed spłaszczeniem. W razie wątpliwości renderuj w dużym rozmiarze; zawsze możesz zmniejszyć duży PNG, ale nigdy nie odzyskasz szczegółów przez skalowanie małego w górę.

Przezroczystość przychodzi razem

PNG obsługuje pełny kanał alfa, co oznacza, że przezroczystość przeżywa konwersję. Jeśli Twój SVG nie ma tła, wynikowy PNG zachowuje te obszary jako przeźroczyste, więc logo lub ikona układa się czysto na dowolnym kolorze bez brzydkiego białego pola wokół niej. Jeśli zamiast tego chcesz solidne tło, dodaj je do SVG przed konwersją. Tak czy inaczej, to co widzisz w wektorze, PNG zachowa — i to jest dokładnie powód, dla którego PNG — a nie JPG — jest naturalnym celem dla ikon, odznak i nakładek.

Wszystko pozostaje na Twoim urządzeniu

Ten konwerter działa jako kod lokalny w Twojej przeglądarce, korzystając z canvas API. Twój SVG jest odczytywany, rysowany i eksportowany bez przesyłania na serwer, więc nie ma przesyłania, kolejki ani kopii Twojej grafiki leżącej w cudzym magazynie. Jest to szybsze dla Ciebie i bezpieczniejsze dla wszystkiego, czego wolisz nie oddawać stronie trzeciej — od nieupublicznionej identyfikacji wizualnej po wewnętrzne diagramy. Gdy tu skończysz, odkrywaj resztę naszych narzędzi do obrazów — jeśli tworzysz zasób Windows lub favikony, konwerter PNG na ICO to naturalny następny krok.

Najczęściej zadawane pytania