SVG vs PNG: kiedy uzywac grafiki wektorowej, a kiedy rastrowej

SVG i PNG rozwiazuja zupelnie rozne problemy. SVG przechowuje obrazy jako matematyczne ksztalty, ktore skaluja sie w nieskonczonosc bez utraty jakosci. PNG przechowuje obrazy jako siatke kolorowych pikseli. Wybranie zlego formatu kosztuje Cie wydajnosc albo jakosc wizualna.

Co sprawia, ze SVG i PNG sa fundamentalnie rozne

Roznica miedzy SVG a PNG odzwierciedla szersze rozroznienie miedzy grafika wektorowa a rastrowa.

SVG (Scalable Vector Graphics) to format oparty na XML, ktory opisuje obrazy za pomoca matematycznych definicji ksztaltow, linii, krzywych i kolorow. Kiedy powiekszasz SVG, przegladarka przelicza i przerysowuje kazdy ksztalt w nowym rozmiarze. Wynik jest zawsze ostry — niezaleznie od tego, czy wyswietlasz go jako favicone o wymiarach 16 px, czy billboard o wymiarach 16 000 px.

PNG (Portable Network Graphics) to format rastrowy przechowujacy obrazy jako siatke pikseli, z ktorych kazdy ma okreslona wartosc koloru. Obraz ma stala rozdzielczosc. Powiekszysz go ponad natywne wymiary — stanie sie rozmazany i pikselowaty. Zmniejszysz — pobierasz wiecej danych niz to konieczne.

To rozroznienie determinuje wszystko: rozmiar pliku, skalowalnosc, przebieg edycji i typy obrazow, z ktorymi kazdy format radzi sobie dobrze.

Kiedy SVG jest lepszym wyborem

SVG doskonale sprawdza sie w przypadku kazdej grafiki, ktora pierwotnie powstala jako praca wektorowa. Uzywaj SVG do:

• Logotypow — logotyp musi wygladac ostro w kazdym rozmiarze, od 32-pikselowej ikony karty przegladarki po pelnoszerokosciowy baner. SVG obsluguje to jednym plikiem. W PNG potrzebowalbys wielu rozdzielczosci.
• Ikon — ikony interfejsu, nawigacji, mediow spolecznosciowych. Praktyczny przyklad: sklep internetowy z 50 ikonami kategorii o lacznej wadze 1,2 MB jako PNG zmniejszyl je do zaledwie 95 KB po przejsciu na SVG.
• Ilustracji i diagramow — diagramy techniczne, schematy, mapy i infografiki z czystymi liniami i plaskimi kolorami. SVG utrzymuje tekst zaznaczalny i wyszukiwalny.
• Animacji — elementy SVG mozna animowac za pomoca CSS lub JavaScriptu, co umozliwia lekkie spinnerki ladowania, mikrointerakcje i interaktywne wykresy bez plikow wideo.
• Favikon — nowoczesne przegladarki obsluguja favicony SVG, ktore wygladaja ostro na kazdej gestosci ekranu. Mozesz wygenerowac favicony z dowolnego obrazu za pomoca naszego Generatora favicon.

Wedlug W3Techs 65,5% wszystkich stron internetowych uzywa teraz SVG, co czyni go trzecim najpopularniejszym formatem obrazu po PNG i JPEG. Jego adopcja rosla o okolo 8% rocznie, napedzana potrzebami responsywnego projektowania i korzysciami wydajnosciowymi.

Kiedy PNG jest lepszym wyborem

PNG to wlasciwy wybor, gdy liczy sie szczegolowsc na poziomie pikseli lub gdy zawartosc obrazu jest z natury rastrowa:

• Zdjecia z przezroczystoscia — wycinki produktow na przezroczystych tlach, warstwowe kompozycje. PNG obsluguje pelna przezroczystosc alfa, zachowujac szczegoly fotograficzne. (Dla zdjec bez przezroczystosci JPEG jest zwykle lepszy.)
• Zrzuty ekranu — przechwycenia ekranu zawieraja elementy UI z dokladnoscia pikselowa, wygladzony tekst i subtelne gradienty, ktore sa z natury rastrowe. PNG zachowuje je dokladnie.
• Zlozode grafiki z wieloma kolorami — szczegolowe obrazy cyfrowe, tekstury i fotorealistyczne ilustracje, ktore nie upraszczaja sie do czystych ksztaltow wektorowych.
• Grafiki rastrowe z nakladkami tekstu — gdy potrzebujesz pikselowo-dokladnego renderowania polaczonych zdjec i tresci tekstowych, PNG zapewnia brak artefaktow kompresji wokol krawedzi tekstu.

Rozmiar pliku i wydajnosc

Dla typow grafik, z ktorymi SVG radzi sobie dobrze (ikony, logotypy, proste ilustracje), oszczednosci rozmiaru pliku sa dramatyczne:

Pliki SVG kompresuja sie rowniez wyjatkowo dobrze za pomoca Gzip lub Brotli (standardowo na wiekszosci serwerow), czesto kurczac sie o dodatkowe 50-70% podczas transferu. SVG o wadze 20 KB moze byc przesylany jako zaledwie 6-8 KB.

Korzyści wydajnosciowe wychodza poza rozmiar pliku. SVG mozna osadzac bezposrednio w HTML, eliminujac zadanie HTTP. Renderuja sie w natywnej rozdzielczosci urzadzenia bez potrzeby atrybutu srcset. A poniewaz sa oparte na tekscie, sa przyjazne dla cache'owania i kontroli wersji.

Dla zlozonych obrazow — zdjec, szczegolowych tekstur, obrazow z tysiacami unikalnych kolorow — SVG nie oferuje zadnych korzysci. Zdjecie „przekonwertowane" do SVG albo osadza dane rastrowe jako base64 (co robi go wiekszym), albo trasuje obraz w uproszczone ksztalty (tracac szczegoly). Dla takich obrazow PNG, JPEG lub nowsze formaty jak WebP i AVIF to odpowiednie narzedzia.

SVG vs PNG: szybkie porownanie

Praktyczny scenariusz

Wyobraz sobie, ze przeprojektowujesz firmowa strone. Marka ma logotyp, zestaw 30 ikon nawigacyjnych i funkcyjnych, zdjecie glowne (hero) i kilka zrzutow ekranu produktu. Oto jak przypisalbys formaty:

• Logotyp → SVG. Pojawia sie w naglowku (maly), stopce (sredni) i na stronie „O nas" (duzy). Jeden plik SVG obsluguje wszystkie trzy rozmiary, jest ostry na wyswietlaczach retina i wazy okolo 5 KB.
• 30 ikon → SVG sprite. Wszystkie 30 ikon w jednym pliku, okolo 40-60 KB lacznie. To mniej niz dwie czy trzy ikony PNG. CSS kontroluje ich kolor i rozmiar.
• Zdjecie glowne (hero) → Nie SVG, nie PNG. Uzywaj JPEG lub WebP dla najmniejszego pliku przy akceptowalnej jakosci. Zobacz nasz poradnik optymalizacji obrazow, zeby poznac najlepsze praktyki.
• Zrzuty ekranu produktu → PNG. Zrzuty ekranu zawieraja tekst interfejsu i precyzyjne renderowanie pikselowe, ktore wymagaja bezstratnego zachowania.

Jak konwertowac miedzy SVG a PNG

Mozesz konwertowac miedzy tymi formatami bezposrednio w przegladarce — bez przesylania na serwer, bez instalowania oprogramowania. Vizua przetwarza kazdy plik lokalnie na Twoim urzadzeniu:

• SVG na PNG — rasteryzuj pliki SVG w dowolnej potrzebnej rozdzielczosci
• Wektoryzuj obraz — konwertuj obrazy rastrowe (PNG, JPEG) na format wektorowy SVG
• Generator favicon — tworzenie plikow favicon z dowolnego obrazu, wlacznie z wyjsciem SVG dla nowoczesnych przegladarek

Szersze spojrzenie na wybor odpowiedniego formatu dla kazdego obrazu na stronie znajdziesz w naszym poradniku o rozmiarach plikow graficznych z zalecanymi wymiarami i formatami wedlug zastosowania.

Najczesciej zadawane pytania