Значки SVG и иконки PNG на современных веб-сайтах

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

(Вопрос Поиск исследования: PNG Sprite vs SVG sprite vs Icon fonts фокусируется на производительности и не имеет соответствующего ответа, Скриншот Icon Font vs. SVG и сетевой интерес фокусируется на сетевом трафике, но он легко разрешается, например, шаблоном.)

Если новый веб-сайт поддерживает только современные браузеры, есть ли причина для того, чтобы не использовать SVG (или - есть ли причина использования PNG для значков)? Если нас не волнует IE8, а использование SVG подкрепляется шаблонами и/или кэшированием, есть ли улов, чтобы полагаться только на SVG?

Ответ 1

Причины SVG могут быть хорошим выбором:

он бесшовно поддерживает браузеры любого размера, особенно с помощью css background-size
вы можете масштабировать их вверх/вниз, например, на эффект hover
вы можете вставлять SVG и делать изменения в реальном времени с ними с помощью JavaScript и DOM
вы можете создавать SVG и части SVG с помощью CSS (меняя цвета, контуры и т.д.).
вы можете генерировать SVG динамически, либо на клиенте, либо на сервере. Из-за их текстовой природы вам не нужны низкоуровневые библиотеки или мощные серверы для их создания.

Причины PNG могут быть хорошим выбором:

поддержка браузера
существующие инструменты для создания спрайтов PNG
большинство людей имеют PNG-совместимый редактор на своем компьютере.
Ваша графика - это фотографии или другие объекты с прорисовавшимися объективами

Другие проблемы:

некоторые редакторы SVG могут хранить метаданные в ваших SVG, увеличивая размер файла и, возможно, непреднамеренно обнажая данные
- например. при экспорте PNG в Inkscape он сохраняет/сохраняет абсолютный путь к этому каталогу в SVG при сохранении
- Компрессоры SVG могут удалить это, но я не тестировал его (не стесняйтесь редактировать, если есть)

Ответ 2

SVG классный (как хорошо описывает FakeRainBrigand) и красиво выглядит, но может быть довольно сложным. У браузера больше работы, чем при работе с векторными данными вместо изображений на основе пикселей. Изображение - это один элемент, у SVG может быть много детей, которые могут быть добавлены в DOM при использовании inline.

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

Еще одна проблема с SVG заключается в том, что тегу нужен атрибут ширины и высоты для некоторых Android/Samsung, независимо от того, какие браузеры и наш старый добрый IE. И большинство современных редакторов SVG, таких как A *** e Illustrator, просто добавляют атрибут "viewBox".

Самая крутая вещь в SVG заключается в том, что она делает приятным и четким изображение в любой плотности пикселей.

Ответ 3

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

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

Самое приятное то, что вы можете превратить PNG в URI данных base64 и встроить их прямо в таблицу стилей. Это не рекомендуется с SVG - форматом, который уже известен проблемами производительности и совместимости, особенно в мобильных браузерах.

В заключение я должен сказать, что есть сильные стороны и варианты использования для обоих, но PNG проложил намного больше трасс, и вы столкнулись с меньшим сопротивлением, когда вы идете с током. Для тех странных случаев, когда SVG подходит лучше, я настоятельно рекомендую эту статью и этот учебный ресурс

Удачного дизайна!

Ответ 4

Это правда, png используется почти везде. Я думаю, потому что SVG, в большинстве случаев, довольно бесполезен, изображение должно быть больше (я думаю), и компьютер должен восстанавливать изображение всякий раз, когда вы его увеличиваете (потому что вы всегда увеличиваете изображение, не так ли??) Я думаю, что это самая важная причина.

Ответ 5

Отметим, что производительность SVG может стать ужасной. Даже в современных браузерах, таких как Chrome (написав это в 2019 году!), CMS-подобная страница с несколькими сотнями (практически 3-800) иконок SVG буквально вешает браузер на 5+ секунд, чтобы завершить рендеринг. Максимальное время загрузки процессора.

Как уже отмечалось, количество SVG, встроенных в страницу, экспоненциально увеличивает нагрузку на браузер, поэтому, если вы столкнулись с такой ситуацией

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

Вариант № 2: вернуться к простым старым PNG

В таких ситуациях, когда вы никогда не захотите делать что-то необычное, например, модификацию цвета "на лету", и у вас есть МНОГИЕ экземпляры SVG, старый PNG сделает свою работу и спасет день!