Jak przekonwertować SVG na PNG (i kiedy warto)

SVG jest idealny do użytku webowego, ale wiele miejsc go nie obsłuży: platformy społecznościowe, klienci poczty e-mail i wiele usług drukarskich preferuje format rastrowy. Konwersja SVG na PNG zajmuje chwilę, a przy wyborze odpowiedniego rozmiaru będzie tak samo ostra jak oryginał. Jedna uwaga: PNG nie da się bezstratnie zamienić z powrotem na SVG, więc zachowaj swój plik źródłowy. Jeśli już wiesz, czego potrzebujesz, przejdź od razu do konwertera SVG na PNG; w przeciwnym razie ten poradnik wyjaśni, kiedy przeprowadzić konwersję, jaki rozmiar pikseli wybrać dla sieci, Retiny i druku oraz jak zachować nienaruszone przezroczyste tło.

SVG vs PNG w minucie

SVG to format wektorowy: zbiór instrukcji rysowania (ścieżek i kształtów), który renderuje się ostro w dowolnym rozmiarze, od 16px do 16 000px, i pozostaje małym plikiem, co czyni go idealnym do logo, ikon i grafiki geometrycznej. Edytowalny w edytorze tekstu, a nawet obsługujący animacje.

PNG to format rastrowy: stała siatka pikseli. Ostry w natywnym rozmiarze, rozmyty przy powiększaniu. Doskonale radzi sobie z gradientami, cieniami i detalem fotograficznym oraz przewidywalnie renderuje się wszędzie.

Najczęstszy błąd: konwersja SVG na PNG nie „traci” jakości w momencie eksportu. Piksele generowane są na podstawie matematyki wektorowej, więc prawidłowo dobrany rozmiar eksportu jest idealny co do piksela. Rzeczywisty koszt polega na tym, że PNG jest na zawsze przypisany do jednej rozdzielczości.

Złota zasada: traktuj SVG jako swoje źródło prawdy, a PNG eksportuj tylko wtedy, gdy miejsce docelowe tego wymaga.

Kiedy warto przekonwertować SVG na PNG

Przeprowadzasz konwersję, gdy miejsce docelowe nie obsługuje SVG, a nie dlatego, że PNG jest „lepszy”. W praktyce sytuacje te pojawiają się regularnie:

• Media społecznościowe. Instagram, X/Twitter, Facebook i LinkedIn nie akceptują przesyłania plików SVG. Przed opublikowaniem przekonwertuj obraz na PNG lub JPG.
• E-mail. Większość klientów poczty e-mail ma ograniczone wsparcie dla SVG lub go w ogóle nie posiada. Używaj PNG do obrazów w newsletterach i podpisów e-mail.
• Favicony i ikony aplikacji. Nowoczesne przeglądarki akceptują favicony SVG, ale Apple touch icons i starsze przeglądarki nadal wymagają wersji PNG. Nasz poradnik dotyczący tworzenia favicony z logo pokazuje ten proces od początku do końca.
• Usługi drukarskie. Wiele firm drukujących produkty fotograficzne (naklejki, wizytówki, merch) akceptuje PNG, ale nie SVG.
• Starsze oprogramowanie i niektóre CMS-y. Starsze narzędzia i przepływy pracy z dokumentami mogą niepoprawnie renderować SVG lub wcale; PNG jest bezpieczniejszym wyborem. Niektóre wersje Office'a i starsze przepływy pracy z dokumentami obsługują SVG niejednolicie.

A kiedy nie konwertować: na stronach internetowych. Tam SVG pozostaje ostry w każdym rozmiarze, można go stylizować i animować za pomocą CSS, a często waży mniej niż duży plik PNG. Jeśli Twoim jedynym miejscem docelowym jest własna strona, pomiń konwersję całkowicie.

Źródło informacji o obsłudze platform powyżej: ConverterUp.

Jak przekonwertować SVG na PNG w Tool Cloud (krok po kroku)

1. Otwórz stronę konwertera SVG na PNG.
2. Prześlij swój plik SVG. Możesz przesłać kilka plików naraz, jeśli konwertujesz cały zestaw.
3. Przekonwertuj i pobierz plik PNG. Aby uzyskać dokładny rozmiar w pikselach, ustaw pola szerokości i wysokości (lub użyj opcji rozdzielczości, która wynosi od 72 do 1200) przed rozpoczęciem konwersji; dostępna jest również opcja zachowania proporcji. Przesłane pliki są automatycznie usuwane po przetworzeniu.

Ponieważ konwerter przyjmuje jawną szerokość i wysokość, nie musisz dotykać widoku (viewport) swojego SVG ani niczego zmieniać w edytorze graficznym: po prostu zdecyduj o rozmiarze wyjściowym (patrz następna sekcja) i wpisz go ręcznie.

Konwersja SVG na PNG bez użycia narzędzi online

Nie potrzebujesz konwertera online do tego zadania. Każde narzędzie graficzne eksportuje PNG bezpośrednio:

• Figma, Illustrator, Affinity, Inkscape: użyj okna dialogowego eksportu, wybierz PNG i ustaw rozmiar eksportu w pikselach (tu stosujesz współczynnik skali opisany poniżej). Jest to najlepsza opcja, jeśli masz plik źródłowy, ponieważ możesz przekonwertować tekst na krzywe i usunąć niechciane prostokąty tła w jednym kroku.
• Ze strony internetowej: kliknij prawym przyciskiem myszy plik SVG (lub sam plik SVG otwarty w karcie przeglądarki) i wybierz „Zapisz obraz jako” – zwykle otrzymasz plik SVG, więc wyeksportuj lub przekonwertuj go stamtąd.
• Ostateczność, brak narzędzi: otwórz SVG w przeglądarce, przybliż widok tak bardzo, jak to możliwe, zachowując ostrość, i zrób zrzut ekranu. Stracisz przezroczystość, chyba że użyjesz narzędzia do przechwytywania ekranu, które ją obsługuje, a krawędzie nie będą tak czyste jak przy prawdziwym eksporcie. Wystarczy na szybką makietę, ale nie do produkcji.

Jaki rozmiar pikseli wybrać przy eksporcie? (Przewodnik po współczynniku skali)

Wybierz rozmiar eksportu, mnożąc wymiary widoku (viewport) SVG przez współczynnik skali: SVG o widoku 200×200 wyeksportowany w skali 1x daje plik PNG 200×200px, w skali 2x daje 400×400px, a w skali 3x daje 600×600px. W konwerterze ta sama matematyka sprowadza się do wpisania szerokości i wysokości. Dopasuj następnie skalę do miejsca docelowego:

Dla codziennych ikon i logo w internecie 2x to praktyczny kompromis: jeden plik w skali 2x obsłuże zarówno zwykłe, jak i ekran Retina, ponieważ na standardowych wyświetlaczach skaluje się on płynnie. Jeśli specyfikacja wymaga jednego, stałego rozmiaru, odpowiedzią jest 1x odpowiadający temu konkretnemu obszarowi widoku (viewport). W przypadku druku wybierz 3x–4x; daje to wystarczająco dużo pikseli dla małych wydruków, takich jak naklejki czy wizytówki, podczas gdy duże formaty wymagają proporcjonalnie więcej.

Nie ma straty jakości przy eksporcie większym niż konieczne, ponieważ piksele pochodzą z matematyki wektorowej, a nie z rozciągania. Jedyną wadą jest rozmiar pliku, który rośnie kwadratowo wraz ze skalą: PNG w skali 4x ma szesnaście razy więcej pikseli niż w skali 1x. Wybieraj więc rozmiar na podstawie miejsca przeznaczenia pliku, a nie zasady „większe = bezpieczniejsze”.

Zachowanie przezroczystości (i kiedy użyć białego tła)

Kanał alfa PNG natywnie zachowuje przezroczystość SVG, co jest dokładnie tym, czego chcesz dla logo i ikon, które mają znajdować się na różnych tłach. Wyeksportuj w dowolnej skali, a przezroczystość przeniesie się bez zmian.

Występuje tu jednak klasyczny haczyk. SVG może wyglądać na posiadanie białego tła w przeglądarce, gdy tak naprawdę widzisz tło strony. Przed konwersją przetestuj go na ciemnym tle. Jeśli kształt nadal jest poprawnie widoczny, masz prawdziwą przezroczystość; jeśli widzisz biały prostokąt, Twój SVG zawiera wbudowany prostokąt tła.

Kiedy wypełnić tło zamiast tego: niektóre platformy i starsze narzędzia nie radzą sobie dobrze z przezroczystością. Przy przesyłaniu do nich pełne tło (zwykle białe) jest bezpieczniejszym wyborem.

A jeśli Twój SVG zawiera niechciany prostokąt tła, usuń go w pliku projektowym przed eksportem. To rozwiązanie problemu w pliku projektowym, a nie w ustawieniach konwersji.

Pułapki, które psują eksport SVG

Większość konwersji SVG do PNG przebiega bez problemów. Te, które się nie udają, zwykle kończą się jednym z trzech błędów:

• Czcionki. Tekst w formacie SVG jest renderowany za pomocą czcionek dostępnych na maszynie wykonującej renderowanie, zgodnie ze specyfikacją SVG 1.1. Jeśli rasterizer nie posiada Twojej czcionki, nastąpi podmiana tekstu lub uszkodzenie układu. Rozwiązanie jest proste: przed eksportem do SVG zamień tekst na ścieżki/kontury w swoim narzędziu graficznym. To najczęstsza przyczyna pytania „dlaczego moje logo wygląda źle po konwersji do PNG?”.
• Przycinanie. Niektóre konwertery obcinają wynik do zadeklarowanego widoku (viewport) pliku SVG, a zawartość SVG może wykraczać poza ten obszar, więc wszystko spoza niego może zostać utracone. Przed eksportem upewnij się, że nic ważnego nie znajduje się poza obszarem roboczym.
• Zaawansowane filtry. Renderowanie filtrów i gradientów SVG może różnić się w zależności od silnika. Serwerowe rasterizatory obsługują je inaczej niż przeglądarki; na przykład ImageMagick deleguje zadanie do librsvg, jeśli jest dostępne, w przeciwnym razie używa słabszego wbudowanego rendereru. Same gradienty rasteryzują się czysto w dowolnej skali (MDN), ale złożone łańcuchy filtrów mogą wyglądać inaczej niż podgląd w przeglądarce. Jeśli tak się stanie, uprość efekty lub pre-rasteryzuj je w swoim narzędziu graficznym.

Masowa konwersja zestawu ikon

Zestawy ikon rozchodzą się albo upadają ze względu na spójność. Mieszanka rozmiarów lub ikony z przezroczystym tłem obok innych z białym tłem wyglądają na zepsute w interfejsie produktu lub aplikacji, nawet jeśli każdy pojedynczy plik jest poprawny.

Dlatego od początku zdecyduj o dwóch rzeczach:

1. Jedna skala. 2x dla sieci to zwykle dobry wybór.
2. Jedna polityka tła. Zazwyczaj przezroczyste, chyba że miejsce docelowe nie obsługuje kanału alfa.

Następnie zastosuj oba ustawienia do każdego pliku. Praktyczne podejście: prześlij kilka plików SVG naraz do konwertera i wyeksportuj cały wsad jednocześnie na tę samą szerokość i wysokość, zamiast konwertować pliki jeden po drugim i tracić spójność.

Jeśli później potrzebujesz kilku rozmiarów z jednego źródłowego SVG (np. 16, 32 i 512 pikseli), wyeksportuj ponownie z SVG w każdym rozmiarze lub przetwórz PNG za pomocą narzędzia do zmiany rozmiaru obrazu — nie powiększaj małego PNG, bo tylko go rozmyjesz.

Najczęściej zadawane pytania, odpowiedzi w jednym miejscu

Czy konwersja SVG do PNG spowoduje utratę jakości?

Nie, o ile wyeksportujesz w odpowiednim rozmiarze. Piksele PNG są generowane na podstawie matematyki wektorowej, więc wynik jest dokładnie tak ostry jak SVG w tej rozdzielczości. Jedyną prawdziwą stratą jest elastyczność: PNG jest na zawsze sztywno przypisany do jednej wielkości w pikselach.

Czy mogę przekonwertować PNG z powrotem na SVG?

Nie w sposób idealny. Śledzenie (tracing) przybliża siatkę pikseli, a nie przywraca oryginalne ścieżki, więc nigdy nie jest to proces bezstratny — logotypy płasko kolorowane można śledzić zadowalająco, podczas gdy zdjęcia i gradienty śledzą się słabo. Traktuj oryginalny SVG jako plik główny i nie będziesz potrzebować śledzenia.

Jakie tło powinienem wybrać?

Przezroczyste dla elementów umieszczanych na zróżnicowanych tłach — kanał alfa PNG obsługuje to natywnie. Pełne tło (zazwyczaj białe) stosuj tylko wtedy, gdy miejsce docelowe nie obsługuje przezroczystości.