Добрый день! Насколько в наши дни актуально использовать спрайты?
SVG INLINE:
+ Насколько я знаю Есть вставлять иконки инлайном то открывается кучу возможностей для их манипуляции.
Можно менять цвет на какой угодно, можно анимировать, практический вроде не дает нагрузки на сервер при загрузки страницы.
- Очень много кода
- Нету возможности вставлять иконки если иконка зависит от класса. Тут уже без background-image не обойтись. Например у горячих новостей своя иконка .news -hot
Например у новых новостей своя иконка.news -new и тд
SVG SPRITE:
+ Не проверял но вроде не плохая скорость загрузки сайта при спрайтах
- Если мы вставляем иконки через background-image то есть через спрайты то у нас есть ограничения. Менять цвет иконки только если есть дубликат иконки с другим цветом и при ховере делать замену картинки. Как по мне это не очень практично и иногда бывают баги с бликами. Когда пользователь зашел в первый раз на страницу и наводит на иконку то она имеет блик/баг и только при повторном ховере заменяется картинка.
- Если клиент захотел добавить новую иконку или заменить старую но приходится заново собирать спрайт на фронте что не очень удобно.
Если что-то упустил, дополните пожалуйста и хочу услышать ваши мнения =) Спасибо.
Для множества иконок обычно использую спрайты во внешнем файле. Преимущество: кэшируется и отчасти управляемо из стилей, не мусорит разметку. Спрайт генерируется галп-таском из папки с отдельными svg. Для IE полифилл.
Управление с уровня CSS ограничено. Но на практике для смены состояния хватает менять opacity и цвет иконки (fill="currentColor", css-фильтры). Отдельными частями символа (имеющими свои CSS-классы) управлять нет возможности. Так как инлайновые стили (внутри svg) имеют более высокий приоритет, чем внешние стили, обычно сборщики спрайтов автоматически удаляют все инлайн fill, stroke. Что вы подразумеваете под «заменой картинки»?
Alibek Kulseitov, при спрайтах иконки вставляю юзом в html, поэтому "эффект с бликом" отпадает. В background-image можно менять цвет фильтром: medium или чтобы не было "блика" предзагрузить заранее второе изображение, т.к. браузер загружает его в момент наведения и из-за этого получается "блик".
Alibek Kulseitov, ну а как я буду подключать свой svg ? я имею ввиду если коде svg огромный , что бывает часто , вынести его в отдельный файл и подключать как тег img и всё , ни чего сложного.
Если Вы хотите заниматься анимацией svg то разумеется inline svg в этом лучше но есть проблемы с кроссбраузерностью но лидирует в этой области Google Chrome
Если вставляешь как inline, то надо следить чтоб не было конфликтов id. Если хочешь анимировать на js, то только inline.
Если анимация на css, либо на svg, либо ее нет вовсе, то можно просто картинкой вставить. Анимацию можно реализовать внутри самого svg файла. <img src="image.svg">
? 
Простой
