Подключение SVG спрайта

#веб_программирование #svg #svg_спрайт

Здравствуйте. Хочу использовать на сайте картинки svg вместо png, скорее всего их
спрайт. Интересует возможность масштабировать картинки (для разных устройств) и менять
цвет (например при hover). Кроссбраузерность. Поддержка "старых" браузеров не принципиальна
(будет поддерживать - хорошо, не будет - не страшно), анимация тоже не обязательна...
Необходима обязательная поддержка IPAD, MAC OS, IPhone...

Как подключить svg спрайты написано много, есть споры, в основном статьи написанные
несколько лет назад ... 
Подскажите, как это сделать по best practics в нынешних реалиях? (возможно личный опыт)
Использую SASS, возможно под него есть "заточенные" решения.
    

Ответы

Ответ 1

Поскольку Gulp является уже де-факто стандартом для сборки фронтенда, думаю, будет
уместно сразу начать с предложения использовать для создания SVG-спрайта плагин gulp-svg-sprites.
Теперь что касается ваших вопросов:


возможность масштабировать — поскольку это SVG, то проблем с масштабированием не
будет даже исходя из аббревиатуры.
возможность менять цвет — имеется, через CSS (в режиме symbols).
кроссбраузерность — ИЕ9 и выше


Без дополнительных настроек результатом работы плагина gulp-svg-sprites будет SVG-файл
со всеми вашими иконками в виде обычного спрайта, подобного PNG-спрайту, и CSS-файл
со стилями вида .%icon_name% {}. При необходимости получить другие результаты на выходе,
придется конфигурировать плагин. Плюс использования такого спрайта в том, что иконки
можно использовать в псевдоэлементах. Минус — простыми способами перекрасить элемент
спрайта нельзя (можно перекрасить через CSS-фильтры или заранее сгенерировать элемент
во всех нужных цветах).

Также есть возможность сделать спрайт как набор элементов symbol, как группы, есть
вариант с генерацией png-фоллбека. Если вы используете SASS в синтаксисе SCSS, то можно
также получить сгенерированный SCSS-файл со стилями.


Ответ 2

Мне кажется проще создать спрайт используя Symbol, в нем fill='inherit', и дальше
уже манипулировать цветом svg.




соответсвенно и hover и т.п. описывать в class="svg".