SVG przechowuje obraz jako kształty matematyczne które skalują się do dowolnego rozmiaru bez rozmycia, podczas gdy PNG przechowuje stałą siatkę pikseli. Ta pojedyncza różnica decyduje o wyborze: SVG dla logo, ikon i płaskich grafik, które wymagają skalowania, PNG dla zdjęć i skomplikowanych szczegółów. SVG (Scalable Vector Graphics) to format oparty na języku XML, ustandaryzowany przez W3C w 2001 roku; PNG (Portable Network Graphics) to format rastrowy z 1996 r. To porównanie wyjaśnia, w jaki sposób wektor i raster radzą sobie ze skalowaniem i rozmiarem pliku, przezroczystością, edycją, obsługą przeglądarek oraz jasną regułą, gdzie używać.

Żaden format nie jest ogólnie lepszy, ponieważ rozwiązuje różne problemy. SVG jest nie do pobicia w przypadku grafiki wyświetlanej w wielu rozmiarach; PNG to jedyny rozsądny wybór w przypadku zdjęć i szczegółowych obrazów. Wiedza, do której rodziny należy Twój obraz, daje odpowiedź na to pytanie, zanim jeszcze otworzysz konwerter.

Wektor kontra raster

Te dwa formaty opisują obrazy w przeciwny sposób. SVG zawiera instrukcje, takie jak narysuj tutaj okrąg, wypełnij tę ścieżkę tym kolorem, aby przeglądarka wyświetlała ją odświeżoną w dowolnym rozmiarze. PNG przechowuje rzeczywisty kolor każdy piksel w siatce, jak mozaika. Vector pasuje do kształtów o czystych krawędziach; raster pasuje do fotografii, gdzie miliony unikalnych pikseli nie mają kształtów, które można by opisać. To jest źródło wszelkich praktycznych różnic między nimi.

Pomocna jest analogia. Wektor to przepis: postępuj zgodnie z nim w dowolnej skali, a otrzymasz to samo danie. Raster to zdjęcie gotowej potrawy: powiększ je, a zobaczysz większe, bardziej rozmazane piksele. Przepis pozostaje doskonały w każdym rozmiarze; fotografia nie.

Skalowanie: wygrywa SVG

Skalowanie jest zdecydowaną zaletą SVG. Logo SVG pozostaje ostry jak brzytwa od 16-pikselowej favikony do billboardu, ponieważ obliczenia matematyczne są przeliczane przy każdym rozmiarze. PNG rozmazuje się w momencie powiększenia go powyżej jego rozdzielczości, ponieważ oprogramowanie musi wymyślić piksele, które nigdy nie zostały przechwycone. W przypadku wszystkiego, co jest wyświetlane w wielu rozmiarach, SVG udostępnia jeden plik, w przypadku którego PNG wymaga kilku eksportów w różnych rozdzielczościach.

To ma większe znaczenie, niż się wydaje. Nowoczesne ekrany różnią się od małych telefonów po duże monitory 4K, a ich projekt musi wyglądać wyraźnie na każdym z nich. SVG obsługuje każdy ekran z jednego pliku. PNG potrzebuje małej wersji, dużej wersji i często wersji Retina, która zwielokrotnia zarządzane zasoby.

Rozmiar pliku

Rozmiar pliku zależy od złożoności, a nie wymiarów, co jest przeciwieństwem PNG. Proste dwukolorowe logo, jakie może ważyć SVG kilka kilobajtów i pozostaw ten rozmiar w dowolnej skali, często mniejszy niż PNG. Jednak rozmiar SVG rośnie wraz z liczbą kształtów, więc obrysowane zdjęcie staje się wielokrotnie większe niż PNG i renderuje się powoli. Rozmiar PNG rośnie wraz z liczbą pikseli, więc duże zdjęcie jest ciężkie bez względu na wszystko.

Lekcja polega na dopasowaniu formatu do treści. W przypadku płaskiej ikony SVG jest zarówno mniejszy, jak i nieskończenie skalowalny. Aby uzyskać szczegółowe zdjęcie, SVG balonuje w tysiące ścieżek, podczas gdy PNG zachowuje przewidywalny rozmiar. Złożoność, a nie nazwa formatu, decyduje o wadze.

Przejrzystość

Oba formaty obsługują przezroczystość, więc żaden nie wygrywa tutaj. SVG obsługuje to natywnie, ponieważ kształt może po prostu nie mieć wypełnienia, a PNG zawiera plik pełny kanał alfa dla gładkiej, częściowej przezroczystości. Logo pozostaje przezroczyste na dowolnym tle w obu formatach. Różnica polega tylko na tym, że przezroczystość SVG jest częścią opisu kształtu, podczas gdy PNG przechowuje wartość krycia dla każdego piksela.

Edycja i elastyczność

Edycja preferuje SVG w przypadku grafiki. Ponieważ SVG to tekst opisujący kształty, ich ścieżki pokoloruj i animuj za pomocą CSS, a dowolny tekst w środku pozostaje prawdziwym tekstem, który czytnik ekranu może odczytać, a wyszukiwarka może zindeksować. Plik PNG ma stałe piksele, więc zmiana koloru oznacza ponowny eksport ze źródła. W przypadku logo, które chcesz zmienić, nadać mu motyw lub animować, SVG jest znacznie bardziej elastyczny.

Obsługa przeglądarki

Wsparcie jest uniwersalne dla obu, więc nie decyduje o wyborze. Każda przeglądarka czyta SVG i PNG bez wtyczek i obie obsługują to od wielu lat. Praktyczną różnicą jest kontekst: SVG należy do stron internetowych i interfejsów aplikacji, podczas gdy PNG działa również w wiadomościach e-mail, dokumentach i starszym oprogramowaniu, które może nie akceptować SVG. W przypadku witryny internetowej oba są bezpieczne; w przypadku logo e-maila bardziej niezawodnym wyborem jest PNG.

Kiedy używać każdego z nich

Zasada jest prosta i warta zapamiętania:

Użyj SVG w przypadku logo, ikon, wykresów, diagramów i grafik liniowych, które muszą być skalowane i zachować ostrość.
Użyj PNG do zrzutów ekranu, szczegółowej grafiki i dowolnego obrazu z miękkimi krawędziami lub wieloma kolorami.
Nie używaj żadnego do zdjęć na dłuższą metę: JPG lub WebP kompresują zdjęcia znacznie mniejsze niż PNG.

Zachowaj główny plik wektorowy dla zasobów marki i eksportuj kopie PNG tam, gdzie format SVG nie jest akceptowany, na przykład pocztą e-mail lub przesłanymi aplikacjami.

SVG i responsywny projekt

Responsywny projekt to miejsce, w którym SVG na siebie zarabia. Nowoczesna witryna musi wyglądać ostro na telefonie, laptopie i monitorze 4K, a plik SVG obsługuje wszystkie trzy z jeden plik przy dowolnej gęstości pikseli. Nie ma potrzeby oddzielnego eksportowania małych, dużych i siatkówki, a także nie ma rozmycia, gdy przeglądarka skaluje obraz w celu uzyskania ekranu o wysokiej rozdzielczości. Wektor po prostu rysuje się wyraźnie w dowolnym rozmiarze wymaganym przez układ.

PNG nie może się z tym równać. Aby zachować ostrość na wyświetlaczu Retina, plik PNG musi zostać wyeksportowany w podwójnej rozdzielczości, co podwaja jego rozmiar, a nawet wtedy rozmazuje się, jeśli zostanie rozciągnięty poza tę wartość. Zarządzanie wieloma rozmiarami PNG w przypadku układów responsywnych to prawdziwy koszt utrzymania, który eliminuje pojedynczy plik SVG.

Kiedy PNG pokonuje SVG w praktyce

PNG wygrywa w większej liczbie przypadków, niż sugeruje jego reputacja. Dowolny obraz z fotograficzne szczegóły, gradienty, tekstury lub miękkie cienie należy do PNG, ponieważ śledzenie go do SVG powoduje nadęty, brzydki bałagan. Zrzuty ekranu to terytorium PNG, ponieważ mieszają tekst ze szczegółami interfejsu, które nie podlegają wektoryzacji. Złożona ilustracja zawierająca setki kolorów jest mniejsza i czystsza w formacie PNG niż w postaci gigantycznego pliku SVG zawierającego tysiące ścieżek.

Ludzie popełniają błąd, zakładając, że SVG jest zawsze nowoczesnym i lepszym wyborem. Jest lepszy tylko w przypadku płaskiej grafiki o twardych krawędziach. Wciśnij szczegółowy obraz do formatu SVG, a otrzymasz większy plik, który renderuje się powoli, odwrotnie niż chciałeś.

Uwaga na temat SVG i bezpieczeństwa

SVG uwzględnia uwagę, której PNG nie uwzględnia: ponieważ jest to kod, plik SVG może zawierać skrypty. Złośliwy plik SVG przesłany do witryny teoretycznie może uruchamiać JavaScript po wyświetleniu. Z tego powodu wiele platform oczyszcza lub odrzuca pliki SVG przesłane przez użytkowników i dlatego należy ufać plikom SVG wyłącznie ze znanego źródła. PNG, będący czystymi danymi pikselowymi, nie niesie ze sobą takiego ryzyka. W przypadku własnych logo i ikon nie stanowi to problemu, ale wyjaśnia, dlaczego niektóre formularze przesyłania akceptują format PNG, a nie SVG.

Typowe błędy podczas konwersji do formatu SVG

Dwa błędy psują większość konwersji PNG do SVG. Pierwszym jest próbując wektoryzować fotografię, co daje tysiące ścieżek i plik większy niż oryginał. Drugim jest pozostawienie oryginalnej mapy bitowej osadzonej w pliku SVG po automatycznym śledzeniu, dzięki czemu plik jest w rzeczywistości plikiem PNG w opakowaniu SVG i nic nie zyskuje. Trasuj tylko płaską grafikę, a w przypadku logo marki przerysuj je w edytorze wektorowym, zamiast ufać automatycznemu obrysowi, który daje czystą geometrię i najmniejszy plik.

Jak przekonwertować PNG na SVG

Konwersja PNG na SVG oznacza wektoryzację: śledzenie pikseli na ścieżkach. To działa dla płaskie logo, ikony i grafika liniowai zawodzi w przypadku fotografii, które nie mają czystych kształtów do prześledzenia. Nasz Konwerter PNG na SVG śledzi proste grafiki w przeglądarce, więc nic nie jest przesyłane. W przypadku logo marki, które posiadasz, przerysowanie go w edytorze wektorowym daje czystszy wynik niż jakikolwiek automatyczny ślad. Do zdjęć użyj naszego Konwerter PNG na JPG zamiast tego.

Często zadawane pytania

Czy SVG nadaje się do projektowania responsywnego?

Tak, idealny. Jeden plik SVG pozostaje ostry na każdym ekranie i przy każdej gęstości pikseli, eliminując potrzebę oddzielnego eksportu małych, dużych i plików PNG w formacie siatkówki.

Dlaczego niektóre witryny odrzucają przesyłanie plików SVG?

Ponieważ plik SVG może zawierać skryptyw przeciwieństwie do PNG. Platformy dezynfekują lub blokują pliki SVG użytkowników ze względów bezpieczeństwa, dlatego niektóre formularze akceptują tylko format PNG.

Dlaczego mój przekonwertowany plik SVG jest większy niż plik PNG?

Prawdopodobnie odrysował zdjęcie lub pozostawił osadzoną bitmapę. Wektoryzuj tylko płaską grafikę i usuń oryginalny obraz po obrysowaniu, aby plik SVG zawierał ścieżki, a nie piksele.

Czy SVG jest lepszy niż PNG?

W przypadku grafiki tak. Skalowanie SVG bez rozmycia przy niewielkich rozmiarach. W przypadku zdjęć wygrywa format PNG, ponieważ zdjęcia nie mają czystych kształtów, które można przechowywać jako wektory.

Jaka jest różnica między SVG i PNG?

SVG jest skalowalna matematyka; PNG to stała siatka pikseli. SVG pozostaje ostry bez względu na rozmiar, natomiast PNG rozmywa się, gdy jest powiększony powyżej swojej rozdzielczości.

Czy mogę używać formatu SVG do zdjęć?

Nie, nieprzydatnie. Zdjęcia mają miliony kolorów i miękkie krawędzie bez kształtów do narysowania, więc zdjęcie SVG jest duże i niechlujne. Użyj formatu PNG lub JPG.

Co jest mniejsze, SVG czy PNG?

W przypadku prostych grafik SVG. Dwukolorowe logo zajmuje kilka kilobajtów w formacie SVG w dowolnym rozmiarze. W przypadku zdjęć format PNG jest mniejszy, ponieważ śledzone są balony ze zdjęciami.

Czy SVG zachowuje przejrzystość?

Tak. SVG natywnie obsługuje przezroczystość, podobnie jak kanał alfa PNG, dzięki czemu logo pozostaje przezroczyste na każdym tle.

Czy wszystkie przeglądarki obsługują SVG?

Tak. Każda nowoczesna przeglądarka czyta pliki SVG i PNG bez wtyczek. SVG pasuje do stron internetowych, natomiast PNG działa również w poczcie e-mail i starszym oprogramowaniu.

Jak przekonwertować PNG na SVG?

Śledź to. Wektoryzator śledzi płaski plik PNG na ścieżkach SVG, który działa w przypadku logo i ikon, ale nie zdjęć.

Czy mogę edytować plik SVG po jego utworzeniu?

Tak. Ścieżki SVG otwierają się w dowolnym edytorze wektorów i ponownie pokoloruj lub animuj za pomocą CSS, ponieważ plik to tekst opisujący kształty, a nie stałe piksele.

Jakiego formatu powinienem użyć dla logo strony internetowej?

SVG. Skaluje się ostro na każdym ekranie z jednego pliku, a jego tekst pozostaje czytelny dla wyszukiwarek. Zachowaj plik PNG do wiadomości e-mail, jeśli format SVG nie jest akceptowany.

Czy w przypadku ikony lepszy jest format PNG czy SVG?

SVG, do skalowania. Ikona SVG pozostaje wyraźna niezależnie od rozmiaru, podczas gdy ikona PNG wymaga wielokrotnego eksportu i rozmycia po powiększeniu.

SVG i PNG rozwiązują różne problemy: SVG przechowuje skalowalną matematykę, która pozostaje ostra w każdym rozmiarze, podczas gdy PNG przechowuje stałą siatkę pikseli, która rozmywa się po powiększeniu. SVG wygrywa w przypadku logo, ikon i grafiki liniowej, które muszą być skalowane, edytowane i animowane za pomocą CSS oraz obsługują każdy ekran z jednego pliku. PNG wygrywa w przypadku fotografii, zrzutów ekranu i szczegółowych obrazów i działa tam, gdzie format SVG nie jest akceptowany. Dopasuj format do treści i skorzystaj z naszych konwerterów powyżej, aby wektoryzować prostą grafikę lub obsługiwać zdjęcie rastrowe, a wszystko to w przeglądarce.

Skrócona instrukcja: SVG lub PNG

Sięgnij po SVG gdy obraz jest logo, ikoną, wykresem lub rysunkiem linii, który wymaga skalowania, gdy chcesz go ponownie pokolorować lub animować za pomocą CSS, lub gdy jeden plik powinien obsługiwać każdy rozmiar ekranu. Sięgnij po PNG gdy obraz jest zrzutem ekranu, szczegółową grafiką lub czymkolwiek z gradientami, teksturami lub miękkimi krawędziami, a także gdy jest potrzebny do działania w wiadomościach e-mail lub starszym oprogramowaniu, które odrzuca SVG. Linia podziału jest prosta: płaska grafika o ostrych krawędziach jest wektorowa, a wszystko, co szczegółowe, jest rastrowe.

Utrzymanie wzorca wektorowego

W przypadku każdego zasobu marki zachowaj oryginał jako wzorzec wektorowy i w razie potrzeby wyeksportuj kopie rastrowe. Pojedyncze logo SVG może wygenerować favikonę, awatar społecznościowy i plik do druku, a każdy z nich zostanie wyeksportowany na żądanie do odpowiedniego formatu i rozmiaru. Praca w drugą stronę, z rastrowego PNG z powrotem do wektora, oznacza śledzenie, które nigdy nie przywraca w pełni czystej geometrii. Jeśli to możliwe, przechowuj więc plik główny w formacie SVG, a eksporty PNG traktuj jako jednorazowe kopie, które możesz w każdej chwili zregenerować.

Najważniejsze

SVG i PNG to nie tyle rywale, ile specjaliści. Wektory opisują kształty i skalę na zawsze, więc logo i ikony należą do SVG. Piksele rejestrują szczegóły, więc zdjęcia i zrzuty ekranu należą do formatu PNG. Wybierz, zadając jedno pytanie: czy ten obraz ma czyste, płaskie kształty lub drobne fotograficzne szczegóły? Ta odpowiedź decyduje o formacie za każdym razem, a zachowanie wzorca wektorowego oznacza, że zawsze możesz wyeksportować potrzebną kopię rastrową.