PNG a SVG: który format wybrać?

1. Główna różnica: siatki pikseli a ścieżki matematyczne

PNG to bitmap: obraz jest pocięty na pojedyncze piksele, a kolor każdego zapisany osobno. Powiększenie PNG po prostu rozciąga te piksele, dlatego pojawiają się zniekształcenia i rozmycie. SVG to obraz wektorowy: opisuje kształty poleceniami matematycznymi, takimi jak współrzędne i krzywe Béziera, a przeglądarka rysuje grafikę ponownie w nowym rozmiarze, więc pozostaje ostra w każdej skali. Ten jeden fakt jest źródłem niemal wszystkich różnic między tymi formatami.

Jeśli chodzi o przezroczystość, PNG obsługuje kanał alfa i potrafi przechowywać przezroczyste tło. SVG jest z natury przezroczysty — o ile nie narysujesz prostokąta tła, wszystko poza grafiką pozostaje przezroczyste. Przy okazji: JPG w ogóle nie obsługuje przezroczystości — jego białe tło to prawdziwy kolor wymalowany w obrazie.

2. Rozmiar pliku i szybkość ładowania

Dla prostych grafik, takich jak ikony i logotypy, SVG często waży zaledwie kilka KB, a jeden plik pasuje do każdej gęstości ekranu. PNG zwykle wymaga wersji @2x i @3x, aby pozostać ostry na ekranach Retina, co mnoży rozmiar pliku. W przypadku zdjęć jest odwrotnie: bogate przejścia tonalne po wektoryzacji dają ogromną liczbę ścieżek, więc SVG wychodzi znacznie większy niż JPG czy WEBP — i nie warto.

Powód tkwi w sposobie kompresji. PNG zapisuje piksele bezstratnie, więc im bardziej złożony obraz, tym większy plik. SVG to zwykły tekst, w którym powtarzające się polecenia ścieżek i współrzędne kompresują się wyjątkowo dobrze. Dlatego dwa formaty zwane bezstratnymi potrafią tak bardzo różnić się rozmiarem.

Zastosowanie	Zalecany format	Dlaczego
Ikony / logotypy w witrynach	SVG	Jeden plik dla każdej rozdzielczości, a CSS może go przekolorować
Zdjęcia	JPG / WEBP	Małe pliki z wiernością fotograficzną
Zrzuty ekranu	PNG	Pikselowo dokładne i kompresowane bezstratnie
Wykresy danych	SVG	Ostre po skalowaniu i łatwe do interakcji
Awatary w mediach społecznościowych	PNG / JPG	Większość platform przyjmuje tylko rastry

3. Kiedy używać PNG

• Zdjęcia, złożone oświetlenie i delikatne gradienty;
• Zrzuty ekranu i obrazy interfejsu, które muszą być pikselowo dokładne;
• Miejsca, gdzie platforma przyjmuje wyłącznie rastry, na przykład wysyłanie awatarów w niektórych panelach;
• Awaryjnie dla bardzo starych środowisk, które nie obsługują SVG.

4. Kiedy używać SVG

• Ikony i logotypy w witrynach: jeden plik dla każdej rozdzielczości, wciąż ostry na ekranach Retina;
• Grafiki wymagające zmiany koloru przez CSS lub JavaScript oraz animacji rysowania kreski;
• Wykresy danych: biblioteki wizualizacji, takie jak ECharts, generują domyślnie SVG;
• Druk, grawerowanie laserowe i wycinanie folii, gdzie urządzenie czyta ścieżki wektorowe.

5. Czy PNG i SVG można konwertować w siebie?

Tak. PNG na SVG: skorzystaj z narzędzia PNG na SVG w PolySVG lub narzędzia Obraz na SVG, wgraj plik i kliknij generowanie, aby go zwektoryzować — wynik świetnie sprawdza się przy ikonach i logotypach, a zdjęcia nabierają stylu ilustracji. Konwersja jest darmowa, a przezroczyste PNG zachowuje przezroczyste tło. Powstały SVG można dalej otworzyć w edytorze, aby przekolorować go i usunąć tło, co domyka cały proces. SVG na PNG: otwórz plik w edytorze SVG online i wyeksportuj PNG w wybranej rozdzielczości — idealne do dokumentów i podglądów.

Warto pamiętać o jednej rzeczy: PNG na SVG to nie zwykłe zapisanie jako, lecz wektoryzacja, która przerysowuje kontury. Grafiki dają czyste ścieżki, a zdjęcia są kondensowane do bloków kolorowych. Najpierw sprawdź podgląd w narzędziu i upewnij się, że styl zgadza się z oczekiwaniami, zanim pobierzesz plik.

Reguła jednym zdaniem: ikony, logotypy i wykresy — SVG; zdjęcia i zrzuty ekranu — PNG/JPG/WEBP. W razie wątpliwości wybieraj SVG dla wszystkiego, co jest grafiką. Aby zagłębić się w temat, przeczytaj Czym jest SVG oraz Trzy sposoby na konwersję obrazu do SVG.