5

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

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

2 ответа 2

6

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

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

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

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

8
  • Насколько я понял, то при использовании данного плагина без настроек, изменить цвет картинки не получится, т.е. для ховера нужно создавать отдельную картинку (делал картинку без fill, т.е. черную). масштабируется вроде нормально...
    – Alex
    30 янв 2017 в 12:38
  • если прописать fill нужного цвета, то он применится, почему же нельзя 30 янв 2017 в 12:40
  • здесь fiddle.jshell.net/jzogL719 я пробовал поменять цвет, не получается... svg и css сформировал плагин. Что я делаю не правильно?
    – Alex
    30 янв 2017 в 13:11
  • боюсь, при использовании в стандартном режиме менять цвет через цсс не получится, поскольку спрайт применяется как обычное фоновое изображение. могу вам посоветовать заранее создать файл с иконками в нужных цветах, с svg это достаточно просто. ну или если иконки у вас не черные, можно использовать фильтр hue-rotate(). вот есть статья с примерами codepen.io/noahblon/post/coloring-svgs-in-css-background-images 30 янв 2017 в 13:56
  • скажите ваше мнение о таком использовании glivera-team.github.io/svg/2016/06/13/svg-sprites-2.html
    – Alex
    30 янв 2017 в 14:18
0

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

<svg class="svg" style="fill:red">
    <use xlink:href="unit/img/sprite.svg#1"></use>
</svg>

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.