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

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

(вопрос для исследования: png-Спрайт против SVG спрайт против Icon fonts фокусируется на производительности и не имеет соответствующего ответа, Icon Font против кэширования SVG и network concern фокусируется на сетевом трафике, но его легко решить, например, шаблоном.)

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

4 67
svg html5 icons

4 ответа:

причины SVG может быть хорошим выбором:

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

причины PNG может быть хорошим выбором:

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

другой опасения:

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

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

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

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

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

9

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

3

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

Я говорю это как кто-то, кто строит UIs с векторной графикой. Это удивительный дизайн инструмент, но для доставки/пропускной способности/достижения трудно превзойти PNG. Только вчера вечером я проверил хорошо известный логотип. Кока-кола.СВГ был почти 20К. Поскольку это был сплошной/плоский цвет я экспортировать как PNG-8 с 12-цветной палитры сжатия и получил его до 1.6 к (!!!) Для всего лишь нескольких логотипов это не имеет большого значения, но когда вы должны показать 40 из них.. ну, вы поняли картину.

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

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

Счастливый Проектирование!

3