Svg, fonts, png, background — как правильно вставлять иконки?

Question

[darksladen]

Раньше как то не парился и вставлял все с png, но потом узнал о других способах и на время забросил верстку. Сейчас когда приходится что то верстать постоянно стоит вопрос как вставлять различные иконки, так как способов куча определиться очень сложно. Недавно прочитал в какой то теме, что типа шрифты сейчас никто не юзает, но не понял почему. Вообщем прошу объяснить в каких случаях что лучше сейчас использовать и как. Так как с тем же svg есть несколько вариантов (инлайн, спрайт, бэкграунд)

Answer 1

[Антон Спирин]

https://css-tricks.com/svg-sprites-use-better-icon...

Comments

[darksladen]

А нельзя с помощью такого спрайта вставить через css? Это единственная причина, почему я боюсь svg.. Я так понимаю для этого надо спрайт уже делать с необходимыми цветами, который впрочем почти ничем не будет отличаться от png спрайта.

Answer 2

[inkShio]

Символьный SVG-спрайт. Подробное руководство
Как мы используем SVG-спрайты

Копай в сторону символьных свг спрайтов.

Answer 3

[Алексей Стрекалов]

В зависимости что вам нужно от svg. Я например вставляю через base64 если не нужно управлять иконкой через css. При этом можно управлять размером через background-size.

Answer 4

[alex-1917]

Не забывай про обязательное тестирование svg-поделий через реальные моб. устройства! делаю это обязательно после двух проектов, где горе-фанаты svg нахреначили этих горе-спрайтов по самое не хочу и клиенты орали, что планшет перезагружает страницу. Кусок кода весом 3Мб плюс 30-50 доп. запросов на страницу - вот как это выглядело. Поменяли на ОДИН png-спрайт весом 120кб и 8 строчек в css - планшеты взлетели.... Клиент притаранил два ящика VSOP.
Я не против модных svg. Я не сторонник консерватизма. Я просто люблю пить дорогущий коньяк.