Спрайты или svg иконки?

Question

[xtala zen]

Привет. Возник вопрос ставящий на перепутье. Что лучше использовать нынче в 2017 году, спрайты на основе растровых иконок бекграундом или svg иконки? Какие сейчас тренды? Интуиция мне подсказывает, что иконки в растре прошлогодний снег или я ошибаюсь? Какие аргументы за/против? Сильно ли влияет обильное использование SVG формата на производительность?

Answer 1

[iBird Rose]

SVG спрайты через symbol

Comments

[Justin Bieber]

это как и в чем плюс

[Aleksandr]

Justin Bieber: https://habrahabr.ru/post/276463/

[iBird Rose]

Justin Bieber: в devtools открой иконки левого меню на тостере и найди там этот свг - https://toster.ru/images/sprite_0.1.svg и посмотри.

Answer 2

[GreatRash]

Аргументы за SVG:
1) т.к. это вектор, то иконка "весит" одинаково независимо от размера
2) в зависимости от способа подключения иконок их стиль можно менять через CSS

Аргументы против SVG:
1) т.к. это вектор, то про скевоморфизм можете забыть, он сейчас не в тренде конечно. но хз. что у вас там за иконки предполагаются
2) если размер иконок маленький (например 12х12 пикселей), то в некоторых случаях PNG будет "весить" сильно меньше
3) поддержка старыми (особенно мобильными - Android 4.3, iOS6) браузерами оставляет желать лучшего

Аргументы против растра (JPEG, PNG):
1) чем больше размер, тем больше вес
2) если надо поменять цвет иконки, то нужно запускать графический редактор или звать дизайнера

Аргументы за растр:
1) поддерживается даже на Nokia 3310

Comments

[Pavel Designer]

PNG не весят много даже в огромном размере, нужны лишь прямые руки при их сохранении - так что этот пункт не совсем верный. Это если рассматривать одну и ту же иконку, сохранённую в двух форматах. Плоские иконки в PNG у меня весят зачастую меньше, чем SVG-весрия этих же иконок.

[xtala zen]

>> скевоморфизм можете забыть
Если вы имеете ввиду имитацию чего-либо то не соглашусь. Вот например имитация акварели в векторе demiart.ru/forum/index.php?showtopic=258325 . Имитировать какое нибудь дерево в векторе, нормальному художнику уж точно труда не составит.

[GreatRash]

xtala zen: Сымитируйте фотографию в SVG, потом поговорим.

[GreatRash]

Pavel Designer: SVG-квадрат, залитый градиентом размером 4096х4096 будет весить ровно столько же сколько 12х12, и в качестве не потеряет нисколько. С PNG так не прокатит.

[Pavel Designer]

GreatRash: а кто будет на сайтах размещать пнг размером 4096рх?)) Примеры с потолка это круто, но бессмысленно. До размеров 128—256рх всё обстоит как я написал. У меня 70% работы это создание иконок и иллюстраций, уж я знаю о чём говорю.

[GreatRash]

Pavel Designer: Дык не вопрос. Я сам за PNG и против SVG.

[xtala zen]

GreatRash: причем здесь фотография и иконки? Размеры немного различаются не так ли?

[GreatRash]

xtala zen: Не вопрос, сделайте вот такую иконку на SVG, потом поговорим про размер и вес.