SVG vs PNG: kiedy używać grafiki wektorowej, a kiedy rastrowej
SVG i PNG rozwiązują różne problemy. SVG opisuje geometrię wektorową i może osadzać raster; PNG zapisuje stałą siatkę pikseli. Wybór zależy od źródła, granicy bezpieczeństwa, dostępności, ścieżki edycji, renderowania i zmierzonego rozmiaru.
Główna różnica między SVG i PNG
Różnica SVG-PNG odpowiada grafice wektorowej i rastrowej.
SVG opiera się na XML i opisuje kształty, ścieżki, tekst, filtry, style i zasoby. Części wektorowe są rysowane w rozmiarze docelowym, ale ostrość zależy od geometrii, obrysów, efektów, wyrównania i osadzonych rastrów.
PNG zapisuje stałą siatkę pikseli. Powiększenie wymaga resamplingu i może wyglądać miękko lub pikselowo. Dostarczenie źródła znacznie większego od miejsca dodaje transfer i dekodowanie, chyba że warianty responsywne pozwalają wybrać właściwy.
Ta różnica wpływa na rozmiar, skalowanie, edycję i rodzaje obrazów dobrze obsługiwane przez każdy format.
Kiedy używać SVG
SVG jest dobrym kandydatem dla przejrzanej grafiki wektorowej, gdy znane są wymagania bezpieczeństwa, dostępności, renderowania i osadzania:
- Logo — czysty SVG obejmuje wiele rozmiarów bez powiększania rastra; bardzo małe znaki mogą wymagać uproszczenia, korekty obrysu lub wariantu.
- Ikony — UI, nawigacja i social mogą współdzielić geometrię i styl. SVG bywa mniejszy od wielu rastrów, lecz złożone ścieżki lub powtórzenie inline mogą odwrócić wynik.
- Ilustracje i diagramy — czyste linie i płaskie kolory. Tekst SVG może pozostać zaznaczalny, ale dostępność i indeksowanie wymagają poprawnych znaczników i osadzania.
- Animacje — SVG można animować przez CSS, JavaScript lub mechanizmy SVG. Preferencje ruchu, CPU, CSP, dostępność i interakcje trzeba sprawdzić.
- Ikony witryny — obecne główne przeglądarki używają SVG, lecz pełny zestaw może wymagać rastra lub ICO. Utwórz typowe wyniki w generatorze favicon.
SVG jest szeroko obsługiwany przez obecne przeglądarki i narzędzia. Popularność nie oznacza, że zasób powinien być wektorem; porównaj złożoność, bezpieczeństwo, cache, dostępność i renderowanie.
Kiedy używać PNG
PNG jest dobrym kandydatem, gdy liczą się bezstratne piksele rastrowe lub alfa, a rozmiar mieści się w budżecie:
- Zdjęcia przezroczyste — PNG daje alfa i bezstratne piksele, lecz szczegółowe zdjęcie może być duże. Porównaj WebP/AVIF z alfa; bez przezroczystości testuj JPEG i nowoczesne formaty zdjęć.
- Zrzuty ekranu — PNG może zachować zakodowane piksele; profile, metadane, skalowanie i paleta to osobne kwestie.
- Złożona sztuka z wieloma kolorami — obrazy, tekstury i fotorealistyczne ilustracje, których nie da się uprościć do czystych kształtów.
- Raster z tekstem — gdy krawędzie muszą być dokładne pikselowo, PNG unika artefaktów formatów stratnych.
Rozmiar pliku i wydajność
Dla ikon, logo i prostych ilustracji SVG lub raster może być mniejszy, zależnie od geometrii, wymiarów, powtórzeń, kompresji i cache:
| Typ grafiki | Rozmiar PNG | Rozmiar SVG | Oszczędność |
|---|---|---|---|
| Prosta ikona | Jeden rozmiar rastra na wariant | Często zwarta geometria wektorowa | Zmierz oba |
| Logo | Może wymagać kilku rozdzielczości | Często dobry wybór, gdy istnieje źródło wektorowe | Zmierz oba |
| Zestaw ikon | Osobne pliki dodają żądania i bajty | Sprite, plik zewnętrzny i inline mają inne koszty cache | Zmierz całą stronę |
| Prosta ilustracja | Rośnie z wymiarami i detalem | Rośnie ze ścieżkami, stylami i filtrami | Zależy od treści |
Kompresja tekstu Brotli lub gzip może zmniejszyć transfer SVG zależnie od znaczników i serwera. Porównuj skompresowane bajty transferu, nie tylko plik na dysku.
SVG inline oszczędza żądanie, lecz zwiększa HTML i nie ma osobnego cache. Zewnętrzny SVG może być buforowany. Wektor zwykle nie potrzebuje wariantów gęstości, a złożony lub rastrowy SVG może wymagać obsługi responsywnej. Mierz stronę.
Dla zdjęć i tekstur trasowanie tworzy nadmiar geometrii lub usuwa szczegóły. Osadzenie rastra w SVG dodaje kontener i często base64, nie zmieniając go w wektor. Użyj PNG, JPEG, WebP lub AVIF.
SVG vs PNG: szybkie porównanie
| Cecha | SVG | PNG |
|---|---|---|
| Typ obrazu | Wektor (kształty i ścieżki) | Raster (siatka pikseli) |
| Skalowanie | Części wektorowe są rysowane ponownie; rendering nadal ma znaczenie | Stała siatka; powiększenie może zmiękczać |
| Przezroczystość | Tak | Tak (alfa) |
| Treść fotograficzna | Zwykle źle pasuje poza osadzonym rastrem | Bezstratna opcja alfa; porównaj rozmiar |
| Ikony/logo | Mocny przy czystym przejrzanym źródle wektorowym | Działa w przygotowanych wymiarach |
| Animacja | Tak (SVG/CSS/JS) | Rozszerzenie APNG |
| Edytowalny kodem | Tak (XML) | Nie |
| Tekst i dostępność | Możliwe z poprawnym markupem i osadzaniem | Wymaga tekstu lub odpowiednika alt |
| Przeglądarki | Obecne główne; reguły osadzania się różnią | Bardzo szeroko |
| Rozmiar | Zależy od geometrii i markupu | Zależy od wymiarów i treści |
Praktyczny przykład: przebudowa strony firmy
Wyobraź sobie stronę z logo, 30 ikonami nawigacji i funkcji, zdjęciem głównym i zrzutami produktu. Przypisz formaty tak:
- Logo → SVG przy czystym źródle wektorowym; testuj obrysy i czytelność w małym rozmiarze.
- Zestaw ikon → sprite lub komponenty SVG współdzielą geometrię; waliduj dostępność, cache, CSP i przesyłany markup.
- Zdjęcie główne → testuj JPEG, WebP i AVIF przy zgodnych wymiarach i jakości, z wymaganymi zapasami. Zobacz poradnik optymalizacji.
- Zrzuty produktu → zacznij od PNG, gdy trzeba zachować piksele, potem porównaj inne opcje bezstratne i akceptowalną wersję stratną.
Jak konwertować między SVG a PNG
Konwertuj obsługiwane pliki w przeglądarce bez instalacji. Vizua przetwarza plik w przeglądarce i nie wysyła go na serwer obrazów; usługi strony mogą korzystać z sieci:
- SVG na PNG — rasteryzuj obsługiwany SVG w dostępnej skali i sprawdź wynik
- Wektoryzuj obraz — trasuj raster do przybliżonych ścieżek; nie odzyskuje oryginalnej geometrii
- Generator favicon — twórz typowe wyniki z obsługiwanego źródła
Wymiary i budżety bajtów opisuje poradnik rozmiarów plików.
Najczęściej zadawane pytania
Czy SVG może całkowicie zastąpić PNG?
Nie. SVG świetnie pasuje do grafiki, ikon i ilustracji, ale nie przedstawia zdjęć wydajnie. Zdjęcie w SVG byłoby ogromne jako osadzony raster albo straciłoby szczegóły po trasowaniu. Używaj SVG do treści wektorowej, a PNG, JPEG lub WebP do złożonych rastrów.
Czy SVG jest bezpieczny w witrynie?
SVG jest aktywnym XML i może zawierać skrypty, zdarzenia, odwołania zewnętrzne, linki, CSS, filtry i inne funkcje. Traktuj niezaufany SVG jak kod: waliduj według listy dozwolonej, oczyszczaj utrzymywanym narzędziem, podawaj z właściwym typem i izolacją oraz stosuj CSP. Zaufane pochodzenie nie zastępuje przeglądu.
Dlaczego SVG wygląda nieostro?
Geometria wektorowa jest rysowana ponownie bez powiększania rastra, ale ułamkowe wyrównanie, obrysy, filtry, transformacje, antyaliasing, osadzony raster lub ekran mogą ją zmiękczyć. Sprawdź viewBox, wymiary, obrysy i raster.
SVG czy font ikon?
SVG często pasuje, bo każda ikona może mieć nazwę dostępną lub być ukryta jako dekoracyjna, a styl ograniczony. Nie jest automatycznie szybszy ani dostępny: inline zwiększa HTML, zewnętrzne sprite’y są buforowane, a ARIA musi być poprawna. Porównaj potrzeby systemu.
Czy można przekonwertować PNG na SVG?
Tak. Wektoryzacja Vizua trasuje PNG lub JPEG do przybliżonych ścieżek SVG. Najlepiej działa z logo, ikonami i prostymi ilustracjami o małej liczbie kolorów i czystych krawędziach, nie ze złożonymi zdjęciami.
Konwertuj obrazy
Bez konta. Wybrany plik jest przetwarzany w przeglądarce i nie trafia na serwer obrazów.