PNG a SVG

Rastrowe a wektorowe

Prawdopodobnie największą różnicą między plikami PNG a SVG jest to, że pierwsze są rastrowe, a drugie — wektorowe.

PNG to rastrowy — czyli oparty na pikselach — format obrazu. Jeśli zbyt mocno zwiększysz skalę obrazu rastrowego, stanie się on ziarnisty, z widocznymi pikselami. Jeśli natomiast obraz będzie zbyt mały, może stać się niewyraźny. Pliki PNG obsługują bardzo duże rozdzielczości, nie można ich jednak rozszerzać w nieskończoność.

Z kolei pliki SVG są wektorowe — zbudowane ze złożonej matematycznej sieci linii, kropek, kształtów i algorytmów. Można je rozszerzać do dowolnych rozmiarów bez utraty rozdzielczości.

Dowiedz się więcej o plikach rastrowych i wektorowych

Rozmiary plików

Pliki PNG często są duże ze względu na obsługę wysokich rozdzielczości. Większy rozmiar oznacza dłuższy czas przetwarzania, udostępniania, zapisywania i otwierania. Może także wydłużyć czas wczytywania stron, dlatego na potrzeby fotografii internetowej częściej używane są pliki JPEG. Istnieje mniejszy, 8-bitowy wariant formatu PNG, ale obsługuje on tylko 256 kolorów.

Pliki SVG mają znacznie mniejsze rozmiary niż pliki PNG i raczej nie spowolnią działania komputera ani witryny internetowej. (Jednak bardzo szczegółowa grafika może spowolnić działanie pliku SVG). Jest to format wektorowy, dlatego pliki SVG można powiększać i zmniejszać bez utraty jakości.

Kompresja

Pliki SVG oferują kompresję bezstratną, co oznacza, że można je skompresować do mniejszych rozmiarów bez wpływu na definicje, szczegóły i jakość.

Pliki PNG również korzystają z kompresji bezstratnej, która zmniejsza rozmiar pliku o około 5–20%. Może to rekompensować duże rozmiary tych plików. Mimo to w porównaniu z plikami SVG nadal są większe.

Fotografia

Pliki PNG nie są zbyt często stosowane do obsługi zdjęć internetowych, jak omówiono powyżej. Jednak dobrze sprawdzają się w przypadku bardzo szczegółowych zdjęć cyfrowych o wysokiej jakości przeznaczonych do druku, edycji i innych celów. Ten format pliku jest często używany w programie Adobe Photoshop.

Z kolei pliki SVG nie używają pikseli, więc trudno jest przy ich użyciu zachować wysoki standard fotografii.

Używanie w Internecie

Zarówno pliki PNG, jak i SVG wyświetlają misterne szczegóły grafiki internetowej, ilustracji, logo, infografik i tabel.

Kluczową zaletą plików SVG jest język programowania XML. Każdy wyświetlany plik SVG jest napisany w postaci tekstu, a nie kodu. Czytniki ekranu i wyszukiwarki mogą analizować te pliki, dzięki czemu pomagają w pozycjonowaniu i oferują wysoki poziom ułatwień dostępu.

Pliki SVG są zazwyczaj mniejsze, przez co szybciej wczytują się na stronach. Czas wczytywania stron to kolejny ważny element klasyfikacji w rankingach wyszukiwarek.

Format PNG również obsługuje niektóre grafiki oparte na tekście

jednak w mniejszym zakresie.

Zgodność i złożoność

Uważa się, że typ pliku SVG jest bardziej zaawansowany niż typ pliku PNG, jednak w rzeczywistości nie jest on zgodny z każdą przeglądarką ani z każdym systemem operacyjnym. Ponadto język programowania i wektorowa kompozycja tych plików mogą być nieznane i onieśmielające dla nowych użytkowników.

PNG to standardowy format internetowy szeroko obsługiwany przez przeglądarki i systemy operacyjne.

Animacja

Pliki PNG nie obsługują animacji, w przeciwieństwie do podobnego typu plików obrazów rastrowych — GIF.

Pliki SVG obsługują animacje, jednak nie tak łatwo jak pliki AI (natywny format programu Adobe Illustrator).

Dowiedz się więcej o plikach AI

Przezroczystość

Pliki PNG i SVG obsługują przezroczystość

obydwa te formaty są więc doskonałym wyborem dla internetowych grafik i logo.

Warto zauważyć, że format PNG to jedna z najlepszych opcji w przypadku przezroczystych plików rastrowych. Jeśli pracujesz z pikselami i przezroczystością, format PNG to lepsza opcja niż format SVG.

1. Otwórz program Adobe Illustrator.
2. Kliknij polecenie Plik > Otwórz i wybierz obraz z komputera.
3. Kliknij przycisk Otwórz.
4. Kliknij opcję Obrys w górnym menu i wybierz opcję Obrys obrazu.
5. Dostosuj konwersję do swoich specyfikacji — możesz na przykład zmienić kolor.
6. Po zakończeniu procesu wybierz obraz obrysu i kliknij opcję Rozgrupuj. Spowoduje to rozdzielenie kształtów kolorów.
7. Kliknij polecenie Plik > Eksportuj.
8. Zapisz plik w formacie SVG.

1. Otwórz program Adobe Photoshop.
2. Kliknij polecenie Plik > Otwórz.
3. Wybierz plik SVG z komputera.
4. Kliknij opcję Eksportuj > Eksportuj jako > PNG.
5. Zapisz plik w formacie PNG.