Страницы

Поиск по вопросам

вторник, 20 ноября 2018 г.

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

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


Ответ

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

Комментариев нет:

Отправить комментарий