Ikony SVG a ikony PNG w nowoczesnych witrynach internetowych

91

Zastanawiam się, dlaczego tak niewiele nowoczesnych witryn internetowych nadal używa tylko plików PNG jako ikon (ale to założenie jest tylko oparte na moich obserwacjach). Jak dotąd wiem, główne powody używania PNG zamiast SVG to IE8 i to, że SVG zużywa więcej mocy procesora (ale nie sądzę, że jest to problem w przypadku prostych ikon 1K). Widzę (i obecnie używamy) wiele zalet korzystania z plików SVG, zarówno gdy są używane jako sprite, jako obrazy, jak i jako wbudowane SVG.

(Pytanie szukające informacji: czcionki PNG Sprite vs SVG Sprite vs Icon koncentrują się na wydajności i nie mają odpowiedniej odpowiedzi, Icon Font vs SVG cache, a problem sieciowy koncentruje się na ruchu sieciowym, ale można to łatwo rozwiązać, np. Za pomocą szablonów).

Jeśli nowa witryna internetowa obsługuje tylko nowoczesne przeglądarki, czy jest jakiś powód, aby nie używać plików SVG (lub - czy jest jakiś powód, aby używać plików PNG jako ikon)? Jeśli nie obchodzi nas IE8, a użycie SVG jest wspierane przez szablony i / lub buforowanie, czy jest jakiś haczyk polegający tylko na SVG?

html  svg  icons 
— Robert Goldwein
źródło
12
Szanowni wyborcy, czy mógłbyś mi powiedzieć, jakie konkretnie opinie są oparte na tym pytaniu, w którym zapytałem o konkretne - techniczne - powody? Byłbym wdzięczny za taką opinię, abym mógł poprawić swoje dalsze pytania.
— Robert Goldwein
27
Robercie, to nie wydaje się być oparte na opiniach, ale ludzie czasami wchodzą w tryb zombie i po prostu przeglądają pytania, nie czytając ich.
— Brigand
Wolę png ze względu na prostotę i czystszy DOM. Jedną kwestią do dodania do poniższych odpowiedzi jest to, że za pomocą svg możesz dynamicznie zmieniać kolor. Jeśli ikona ma trzy kolory: zwykły, aktywny i po najechaniu, to jest to 3 obrazy png, ale tylko jeden svg.
— CodeToad
@Robert [ZOMBIE MODE] to wspaniały człowiek :): D
— QMaster

Odpowiedzi:

105

Powody, dla których SVG może być dobrym wyborem:

  • bezproblemowo obsługuje przeglądarki o dowolnym rozmiarze, zwłaszcza z CSS background-size
  • możesz skalować je w górę / w dół, na przykład do efektu zawisu
  • możesz osadzać SVG i modyfikować je w czasie rzeczywistym za pomocą JavaScript i DOM
  • możesz stylizować pliki SVG i części SVG za pomocą CSS (zmiana kolorów, konturów itp.)
  • można dynamicznie generować pliki SVG, na kliencie lub serwerze. Ze względu na ich tekstową naturę, do ich tworzenia nie są potrzebne biblioteki niskiego poziomu ani wydajne serwery.

Powody, dla których PNG może być dobrym wyborem:

  • obsługa przeglądarki
  • istniejące narzędzia do tworzenia arkuszy sprite w formacie PNG
  • większość ludzi ma na swoim komputerze edytor kompatybilny z PNG
  • Twoja grafika to zdjęcia lub inne trudne do wektoryzacji obrazy

Inne obawy:

  • niektóre edytory SVG mogą przechowywać metadane w plikach SVG, zwiększając rozmiar pliku i prawdopodobnie nieumyślnie ujawniając dane
    • np. kiedy eksportujesz PNG w Inkscape, zapisuje / zapamiętuje bezwzględną ścieżkę do tego katalogu w SVG podczas zapisywania
    • Kompresory SVG mogą to usunąć, ale nie testowałem tego (możesz edytować, jeśli masz)
— Bandyta
źródło
Dzięki, nasi graficy tworzą pliki SVG w programie Illustrator, a następnie edytują je ręcznie, więc zwykle jest to <svg> z kilkoma elementami i atrybutami, więc te obawy są wyciszone - martwiłem się, że przeoczyłem coś poważnego, ponieważ widzę prawie same korzyści nad klasycznymi plikami PNG - ale prawdopodobnie sprowadza się to do <= IE8 lub> IE8. Np. Standardowa ikona z kółkiem ze znakiem plus jest jeszcze bardziej zwarta w SVG niż w PNG.
— Robert Goldwein
Tak, niektórzy ludzie uzyskują swoje pliki SVG od stron trzecich i nie otwierają ich w edytorze tekstu ani nie upewniają się, że są skompresowane. Po prostu nie chciałem tego pomijać. Teraz, gdy o tym myślę, są te same problemy z PNG; często są w nich przechowywane dane bezużyteczne (w kontekście sieci). Te dane są używane przez edytory, przeglądarki plików i inne programy. Jest to jednak bardziej powszechne w przypadku plików JPEG (marka, model, obiektyw, ustawienia itp.).
— Brigand
1
Dzięki, więc wydaje mi się, że korzystanie z plików SVG w naszych projektach nie ma żadnych wad i zintegrujemy je jeszcze głębiej. Dziękuję za spostrzeżenia.
— Robert Goldwein
Właściwy sposób na ikony wektorowe to czcionki ikon. Dla mnie największą wadą ikon SVG jest to, że atrybut danych w CSS nie działa dla IE10 / 11.
— Gerfried
Czcionki @Gerfried Icon mają jednak wiele problemów z dostępnością. Gdy tylko użytkownik zdecyduje się zablokować czcionki internetowe lub zastąpić wszystkie czcionki swoimi własnymi (z jakiegokolwiek powodu), wszystkie te ładne ikony natychmiast się psują. Istnieją błędy, ale ja sam nie widziałem jeszcze w 100% działającego rozwiązania. Nie dotyczy to obrazów SVG.
— tomasz86
12

O ile nie pokazujesz bardzo prostych kształtów / projektów lub nie musisz specjalnie modyfikować części grafiki za pomocą aplikacji, nie ma zbyt wiele zachęty do korzystania z SVG. Możesz utworzyć plik PNG w rozmiarze dwukrotnie większym niż oryginalny (w przypadku wyświetlaczy Retina) i nadal mieć rozmiar pliku mniejszy o rząd wielkości - nie wspominając o lepszym pokryciu w starszych przeglądarkach (nie ma potrzeby używania javascript lub polyfill).

Mówię to jako ktoś, kto buduje interfejsy użytkownika z grafiką wektorową. To niesamowite narzędzie do projektowania, ale w przypadku dostawy / przepustowości / zasięgu trudno jest przebić PNG. Ostatniej nocy przetestowałem dobrze znane logo. CocaCola.svg miała prawie 20 tys. Ponieważ był to jednolity / płaski kolor, wyeksportowałem jako PNG-8 z kompresją 12-kolorowej palety i zmniejszyłem ją do 1,6K (!!!) W przypadku kilku logo to nic wielkiego, ale kiedy trzeba pokazać 40 z nich… cóż, masz obraz.

Najlepsze jest to, że możesz przekształcić PNG w URI danych base64 i osadzić je bezpośrednio w swoim arkuszu stylów. Nie jest to zalecane w przypadku SVG - formatu, który jest już znany z problemów z wydajnością i zgodnością, zwłaszcza w przeglądarkach mobilnych.

Na zakończenie muszę powiedzieć, że są mocne strony i zastosowania obu, ale PNG przetarł o wiele więcej szlaków i napotykasz mniejszy opór, gdy płyniesz z prądem. W tych dziwnych przypadkach, w których SVG lepiej pasuje, bardzo polecam ten artykuł i to źródło wiedzy

Miłego projektowania!

— Steven Garcia
źródło
IMO, to najlepsza odpowiedź.
— Marco Demaio
Powinieneś określić, z którym logo Coca Cola pracowałeś. Obecne logo z 2007 roku jest bardzo proste i ma około 8 KB . To wciąż nic w porównaniu do PNG-8, ale znacznie lepsze niż 20 KB.
— Caleb Taylor
11

SVG jest fajny (jak ładnie opisuje FakeRainBrigand) i pięknie się renderuje, ale może być dość złożony. Przeglądarka ma więcej do zrobienia, gdy ma do czynienia z danymi wektorowymi zamiast obrazów opartych na pikselach. Obraz jest jednym z elementów, SVG może mieć wiele elementów potomnych, które można nawet dodać do DOM, gdy są używane w tekście.

Nie wykonałem żadnych wartościowych testów wydajnościowych, ale z logicznego punktu widzenia SVG powinno być używane ostrożnie, jeśli chodzi o wydajność, szczególnie w przypadku przeglądarek mobilnych w średnim wieku (obciążenie procesora). Byłoby bardzo przydatne mieć wykres, na którym można zobaczyć moc procesora zużywaną przez 100 obrazów SVG w porównaniu ze 100 obrazami PNG na różnych urządzeniach z Androidem i IOS ...

Kolejną wadą SVG jest to, że Tag wymaga atrybutu szerokości i wysokości dla niektórych przeglądarek Android / Samsung, niezależnie od przeglądarek i naszego starego dobrego IE. Większość nowoczesnych edytorów SVG, takich jak A *** e Illustrator, po prostu dodaje atrybut „viewBox”.

Najfajniejszą rzeczą w SVG jest to, że renderuje ładnie i ostro przy dowolnej gęstości pikseli.

— corpirate
źródło
3

To prawda, png jest używany prawie wszędzie. Myślę, że dzieje się tak dlatego, że SVG w większości przypadków jest dość bezużyteczne, obraz powinien być większy (tak mi się wydaje), a komputer musi regenerować obraz za każdym razem, gdy go powiększasz (ponieważ zawsze powiększasz obrazy, prawda ?) Myślę, że to jest najważniejszy powód.

— barbaanto
źródło
26
Pliki SVG są BARDZO przydatne w przypadku ikon, które są wszechobecne w nowoczesnych (mobilnych) witrynach internetowych. Oferują skalowanie i stylizację css bez kar za jakość, dwie ważne funkcje, których nie ma w png.
— user1884155
Z punktu widzenia użytkownika jest to bezcelowe, ale jako twórca multimediów świetnie jest używać tylko jednego pliku, który można wykorzystać na dowolnym ekranie i zawsze zachowuje tę samą jakość.
— sebastian romero
2

Zwróćmy uwagę, że wydajność SVG może stać się okropna. Nawet w nowoczesnych przeglądarkach, takich jak Chrome (pisząc to w 2019 roku!), Strona podobna do CMS z kilkoma setkami (praktycznie 3-800) ikon svg dosłownie zawiesza przeglądarkę na ponad 5 sekund, aby zakończyć renderowanie. W międzyczasie maksymalne wykorzystanie procesora.

Jak zauważono w innym miejscu, liczba plików SVG osadzonych na stronie wykładniczo zwiększa obciążenie przeglądarki, więc jeśli zdarzy się taka sytuacja

Opcja nr 1: przekonwertuj pliki SVG na czcionkę internetową (zobacz tabelę wydajności tutaj: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Opcja nr 2: wróć do zwykłych starych plików PNG

W takich sytuacjach, w których ~ nigdy nie chcesz robić niczego wymyślnego, jak modyfikacja kolorów w locie, a masz WIELE wystąpień SVG, stary plik PNG spełnia swoje zadanie i oszczędza dzień!

— Joe7
źródło
nie sądzę, SVG ma lepszą wydajność. poleciłbym przeczytać to: vecta.io/blog/comparing-svg-and-png-file-sizes
— Harry Sarshogh
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.