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".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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