SVG na PNG — kiedy naprawdę potrzebujesz pikseli (i kiedy nie)

Jest szczególny rodzaj frustracji w tym, że masz idealne logo i nigdzie go położyć. SVG jest ostry przy każdym rozmiarze, waży prawie nic i wygląda nieskazitelnie w przeglądarce — a potem próbujesz upuścić go do maila, ustawić jako obrazek podglądu w mediach społecznościowych albo wkleić do odrobinę zbyt starego programu, i po prostu się nie pokazuje. Pusto. Plik jest w porządku. Miejsce, w które go wkładasz, po prostu nie mówi wektorem.

To cały powód, dla którego SVG na PNG istnieje jako zadanie. Nie dlatego, że PNG jest lepszy — zwykle nie jest — ale dlatego, że spory kawał świata umie czytać tylko piksele.

Wektor i raster, na szybko

SVG to nie obraz. To zestaw instrukcji — narysuj tu okrąg, tę ścieżkę tam, wypełnij ją tym kolorem. Przeglądarka wykonuje instrukcje i renderuje je świeżo w dowolnym rozmiarze, o jaki poprosisz, więc jest ostry jak brzytwa przy 16 pikselach czy 16 000, a plik zostaje maleńki, bo to sama matematyka.

PNG jest przeciwieństwem. To ustalona siatka kolorowych pikseli, zdecydowana raz, w jednej rozdzielczości. Powiększ ją ponad rodzimy rozmiar, a robi się miękka i blokowa, bo nie ma już więcej pikseli do narysowania — tylko te wpieczone. Zaletą jest to, że wszystko umie czytać siatkę pikseli. To uniwersalna waluta obrazów.

Konwersja SVG na PNG to więc wymiana nieskończonej skalowalności na uniwersalną zgodność. Czy to dobry interes, zależy całkowicie od tego, dokąd obraz zmierza.

Kiedy naprawdę potrzebujesz PNG

Trzy przypadki, w których rasteryzuję bez wahania, bo wektor po prostu nie zadziała:

Mail. Klienci poczty nie renderują SVG — Gmail, Outlook, Apple Mail, właściwie wszyscy odmawiają go ze względów bezpieczeństwa. Logo w stopce maila albo newsletterze musi być formatem rastrowym. PNG, bo chcesz przezroczystości.

Obrazki do mediów społecznościowych i podglądu OG. Ta mała karta, która pojawia się, gdy udostępniasz link — obraz Open Graph — musi być rastrem o ustalonym rozmiarze, zwykle 1200x630. Platformy nie wyrenderują tam SVG. Jeśli grafika źródłowa jest wektorowa, eksportujesz PNG dokładnie w tym rozmiarze.

Starsze lub offline'owe oprogramowanie. Mnóstwo aplikacji desktopowych, narzędzi do prezentacji, edytorów dokumentów i procesów drukarskich albo nie umie zaimportować SVG, albo robi z niego bałagan. Podanie im PNG w hojnej rozdzielczości działa po prostu za każdym razem, bez niespodzianek.

We wszystkich trzech czynnik rozstrzygający jest ten sam: cel fizycznie nie umie czytać wektora, więc skalowalność jest nieistotna. Format, który się renderuje, zawsze bije format, który się nie renderuje.

Jedyna rzecz do zrobienia dobrze: rozdzielczość

Oto błąd, który widzę najczęściej i sam wcześnie popełniłem. Ponieważ PNG jest ustalony w rozmiarze, w jakim go wyeksportujesz, musisz wyeksportować go dostatecznie duży — a najlepiej dokładnie w rozmiarze, w jakim będziesz go wyświetlać.

Wyeksportuj logo jako PNG 100x100, a potem pokaż je przy 300 pikselach na ekranie o wysokiej gęstości, a będzie wyglądać miękko i poszarpanie. Pikseli, które wypełniłyby tę przestrzeń, nie ma. Lekarstwo jest proste: eksportuj w rozmiarze, którego faktycznie użyjesz, albo większym, szczególnie dla ekranów Retina i 4K, gdzie często chcesz 2x rozmiaru nominalnego. To jedyna realna przewaga, z której rezygnujesz, zostawiając wektor, więc poświęć chwilę na trafne ustawienie rozdzielczości docelowej.

Kiedy NIE rasteryzować

Jeśli cel umie czytać SVG, zostaw SVG. Kropka.

Na własnej stronie ikona albo logo powinny zostać wektorem. Będą ostre na każdym ekranie przy każdym poziomie powiększenia, będą mniejsze niż odpowiednik PNG, i nigdy nie będziesz musiał eksportować większej wersji, gdy pojawi się nowy wyświetlacz o wyższej gęstości. Rasteryzacja tam to czysta strata — wyrzuciłbyś najlepszą cechę formatu, żeby zyskać zgodność, którą już masz.

I nie rasteryzuj swojego wzorca. SVG jest źródłem prawdy; może wygenerować PNG w dowolnym rozmiarze, o dowolnej porze. PNG nie może pójść w drugą stronę — nie odzyskasz czystych ścieżek wektorowych z siatki pikseli. Zatrzymaj więc SVG, a każdy PNG traktuj jako jednorazowy eksport na jedno konkretne miejsce. Ta sama zasada co wszędzie: konwertuj kopię, którą wysyłasz, oryginał zatrzymaj do edycji.

Jak robię to naprawdę

Gdy potrzebuję pikseli z wektora, używam konwertera SVG na PNG tutaj. Renderuje SVG w Twojej przeglądarce i wręcza Ci PNG, więc nic nigdzie się nie wgrywa — całość dzieje się na Twojej maszynie. Wybierz rozmiar pasujący tam, dokąd zmierza, odbierz czysty PNG z zachowaną przezroczystością.

Ale prawdziwa umiejętność to nie konwersja. To pytanie, które zadajesz najpierw: czy to miejsce czyta wektor? Jeśli tak, zostaw SVG w spokoju i ciesz się najostrzejszą, najmniejszą opcją, jaka istnieje. Jeśli nie — mail, karta OG, jakiś uparty stary program — to rasteryzuj, w odpowiednim rozmiarze, i zachowaj SVG na następny raz. Trafnie odpowiedz na to pytanie, a już nigdy nie zobaczysz pustego pola tam, gdzie powinno być Twoje logo.