Піктограми SVG проти піктограм PNG на сучасних веб-сайтах

Мені цікаво, чому так мало сучасних веб-сайтів все ще використовують лише PNG для піктограм (але це припущення лише базується на моєму спостереженні). Наразі я знаю, що основними причинами використання PNG над SVG є IE8 і те, що SVG використовує більше потужності центрального процесора (але я не вірю, що це проблема для простих піктограм 1К). Я бачу (і ми зараз використовуємо) багато переваг у використанні SVG, або коли він використовується як спрайт, як зображення, або як вбудований SVG.

(Запитання Шукаємо дослідження: PNG Sprite проти SVG спрайт проти шрифтів Icon фокусується на продуктивності та не має відповідної відповіді, Icon Font проти SVG кешування та мережевий інтерес зосереджується на мережевому трафіку, але його легко вирішити, наприклад, шляхом шаблонування.)

Якщо новий веб-сайт підтримує лише сучасні браузери, чи є причина не використовувати SVG (або - чи є якась причина для використання PNG для піктограм)? Якщо нас не хвилює IE8, а використання SVG підтримується шаблонами та / або кешуванням, чи є якийсь улов, який можна покласти лише на SVG?

Причини SVG може бути хорошим вибором:

• він легко підтримує браузери будь-якого розміру, особливо з css background-size
• Ви можете масштабувати їх вгору / вниз, наприклад, для ефекту наведення
• Ви можете вбудовувати SVG-файли та модифікувати їх у реальному часі за допомогою JavaScript та DOM
• ви можете стилізувати SVG та частини SVG за допомогою CSS (змінюючи кольори, контури тощо)
• Ви можете генерувати SVG динамічно, або на клієнті, або на сервері. Через їх текстовий характер вам не потрібні бібліотеки низького рівня або потужні сервери для їх створення.

Причини PNG може бути хорошим вибором:

• підтримка браузера
• існуючий інструмент для створення спрайт-листів PNG
• більшість людей мають на своєму комп'ютері редактор, сумісний з PNG
• Ваша графіка - це фотографії або інші важкі для векторизації зображення

Інші проблеми:

• деякі редактори SVG можуть зберігати метадані у ваших SVG, збільшуючи розмір файлу і, можливо, ненавмисно виставляючи дані
  • наприклад, коли ви експортуєте PNG у Inkscape, він / зберігає абсолютний шлях до цього каталогу у SVG, коли ви зберігаєте
  • Компресори SVG можуть це видалити, але я не тестував (сміливо редагуйте, якщо є)

Якщо ви не показуєте дуже прості фігури / конструкції або спеціально не потрібно модифікувати частини графіки за допомогою програми, немає жодного стимулу використовувати SVG. Ви можете створити PNG із розміром, що вдвічі перевищує вихідний (для дисплеїв сітківки), і при цьому розмір файлу має бути на порядок меншим - не кажучи вже про краще покриття для застарілих браузерів (не потрібно javascript чи поліфілів).

Я кажу це як той, хто створює інтерфейси з векторною графікою. Це чудовий інструмент для проектування, але для доставки / пропускної здатності / охоплення важко перевершити PNG. Вчора ввечері я протестував добре відомий логотип. CocaCola.svg становив майже 20 тис. Оскільки це був однотонний / плоский колір, я експортував як PNG-8 із 12-кольоровим стисненням палітри і довів його до 1,6 КБ (!!!). Для кількох логотипів це не є великою проблемою, але коли потрібно показати 40 з них .. ну, ви отримуєте картину.

Найкраще те, що ви можете перетворити PNG на uri даних base64 і вставити їх прямо у свою таблицю стилів. Цього не рекомендується використовувати у форматі SVG - форматі, який уже відомий проблемами продуктивності та сумісності, особливо в мобільних браузерах.

На завершення я повинен сказати, що є сильні сторони та варіанти використання для обох, але PNG проклав набагато більше стежок, і ви стикаєтесь з меншим опором, коли йдете по струму. У тих дивних випадках, коли SVG краще підходить, я настійно рекомендую цю статтю та цей навчальний ресурс

Щасливого проектування!

SVG - це круто (як добре описаний FakeRainBrigand) і виглядає чудово, але може бути досить складним. Браузер має більше роботи, коли має справу з векторними даними замість піксельних зображень. Зображення - це один елемент, у SVG може бути багато дочірніх елементів, які можна навіть додати до DOM, коли використовується вбудовано.

Я не робив жодних цінних тестів продуктивності, але з логічної точки зору SVG слід обережно використовувати, коли справа стосується продуктивності, особливо коли мова йде про мобільні браузери середнього віку (стрес CPU). Було б дуже корисно мати діаграму, де ви можете бачити потужність процесора, яку споживають 100 зображень SVG проти 100 зображень PNG на різних пристроях Android та IOS ...

Ще одна помилка, пов’язана з SVG, полягає в тому, що Tag потребує атрибута width та height для деяких браузерів Android / Samsung і будь-якого нашого старого доброго IE. А більшість сучасних редакторів SVG, таких як A *** e Illustrator, просто додають атрибут "viewBox".

Найкрутіше в SVG - це те, що він робить приємним і чітким при будь-якій щільності пікселів.

Це правда, png використовується майже скрізь. Я думаю, це тому, що SVG, в більшості випадків, досить марний, зображення має бути більшим (я думаю), і комп’ютер повинен регенерувати зображення щоразу, коли ви його масштабуєте (адже ви завжди масштабуєте зображення, чи не так ?) Я думаю, це найголовніша причина.

Зазначимо, що SVG, що працює за показником, може стати жахливим. Навіть у сучасних браузерах, таких як Chrome (пише це у 2019 році!), Подібна до CMS сторінка з кількома сотнями (практично 3-800) піктограм svg буквально зависає в браузері протягом 5+ секунд, щоб закінчити рендеринг. Тим часом збільшується процесор.

Як зазначалося в інших місцях, кількість вбудованих у сторінку SVG експоненційно збільшує навантаження на браузер, тому, якщо вам трапиться така ситуація

Варіант №1: перетворення svgs у webfont (див. Таблицю продуктивності тут: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Варіант №2: поверніться до простих старих файлів PNG

У таких ситуаціях, коли ви ~ ніколи не хочете робити нічого вигадливого, як модифікація кольору на льоту, і у вас є БАГАТО екземплярів SVG, старий PNG виконує цю роботу і економить день!