Здравствуйте. Хочу использовать на сайте картинки 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-файл со стилями.
Комментариев нет:
Отправить комментарий