Inline svg vs svg sprite?

Question

[Alibek Kulseitov]

Добрый день! Насколько в наши дни актуально использовать спрайты?

SVG INLINE:
+ Насколько я знаю Есть вставлять иконки инлайном то открывается кучу возможностей для их манипуляции.
Можно менять цвет на какой угодно, можно анимировать, практический вроде не дает нагрузки на сервер при загрузки страницы.
- Очень много кода
- Нету возможности вставлять иконки если иконка зависит от класса. Тут уже без background-image не обойтись. Например у горячих новостей своя иконка .news -hot
Например у новых новостей своя иконка.news -new и тд

SVG SPRITE:
+ Не проверял но вроде не плохая скорость загрузки сайта при спрайтах
- Если мы вставляем иконки через background-image то есть через спрайты то у нас есть ограничения. Менять цвет иконки только если есть дубликат иконки с другим цветом и при ховере делать замену картинки. Как по мне это не очень практично и иногда бывают баги с бликами. Когда пользователь зашел в первый раз на страницу и наводит на иконку то она имеет блик/баг и только при повторном ховере заменяется картинка.
- Если клиент захотел добавить новую иконку или заменить старую но приходится заново собирать спрайт на фронте что не очень удобно.

Если что-то упустил, дополните пожалуйста и хочу услышать ваши мнения =) Спасибо.

Answer 1

[Odisseya]

Для множества иконок обычно использую спрайты во внешнем файле. Преимущество: кэшируется и отчасти управляемо из стилей, не мусорит разметку. Спрайт генерируется галп-таском из папки с отдельными svg. Для IE полифилл.

Comments

[Alibek Kulseitov]

А как же насчет не удобства замены картинки)? состояния иконки

[Odisseya]

Управление с уровня CSS ограничено. Но на практике для смены состояния хватает менять opacity и цвет иконки (fill="currentColor", css-фильтры). Отдельными частями символа (имеющими свои CSS-классы) управлять нет возможности. Так как инлайновые стили (внутри svg) имеют более высокий приоритет, чем внешние стили, обычно сборщики спрайтов автоматически удаляют все инлайн fill, stroke. Что вы подразумеваете под «заменой картинки»?

[Alibek Kulseitov]

Odisseya, например социальные иконки.
Пример 1
Пример 2
Пример 3 (социальные иконки в футере)

Как и писал в вопросе ранее. Баг блика есть везде

[Odisseya]

Alibek Kulseitov, при спрайтах иконки вставляю юзом в html, поэтому "эффект с бликом" отпадает. В background-image можно менять цвет фильтром: medium или чтобы не было "блика" предзагрузить заранее второе изображение, т.к. браузер загружает его в момент наведения и из-за этого получается "блик".

Answer 2

[Максим]

inline svg лучше ....
но если к примеру svg имеет большой код ...можно его вынести в отдельный файл и подключить как img это будет на самом деле лучше

Comments

[Alibek Kulseitov]

А можно с примером? Вы имеете ввиду так? ?

[Максим]

Alibek Kulseitov, ну а как я буду подключать свой svg ? я имею ввиду если коде svg огромный , что бывает часто , вынести его в отдельный файл и подключать как тег img и всё , ни чего сложного.
Если Вы хотите заниматься анимацией svg то разумеется inline svg в этом лучше но есть проблемы с кроссбраузерностью но лидирует в этой области Google Chrome

Answer 3

[profesor08]

Если вставляешь как inline, то надо следить чтоб не было конфликтов id. Если хочешь анимировать на js, то только inline.

Если анимация на css, либо на svg, либо ее нет вовсе, то можно просто картинкой вставить. Анимацию можно реализовать внутри самого svg файла.
<img src="image.svg">

Comments

[Odisseya]

Если хочешь анимировать на js, то только inline

— подойдут и object, embed, а в более редких случаях еще и iframe.

[Alibek Kulseitov]

Ну больше для важна скорость загрузки сайта