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?
Odpowiedzi:
Powody, dla których SVG może być dobrym wyborem:
background-sizePowody, dla których PNG może być dobrym wyborem:
Inne obawy:
źródło
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!
źródło
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.
źródło
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.
źródło
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ń!
źródło