SVG иконки как backgound?

Question

[Владислав]

Всем привет. Необходима простая вещь. Вставлять svg иконку как background для использования в псевдоэлементах. Но нужно еще сделать смену цвета при наведении. Что-то не нашел информации как это можно сделать.
Спасибо.
P.s и может есть что-то для автоматизации сборки в спрайт и вставки как background и с позициями для Gulp.

Answer 1

[abberati]

Ваше спасение - gulp-svg-sprite.
Умеет собирать спрайты в четырёх разных режимах, режим для css-background тоже есть. Генерирует стили с уже установленными координатами иконки в спрайте. Для интерактивного svg background не подходит.
Я пользуюсь режимом symbol, всё работает примерно так:

1. В svg-иконке в качестве цвета необходимого атрибута пишем currentColor (fill="currentColor" или stroke="currentColor", смотря что нужно красить).
   
2. Собираем спрайт, рендерим его на странице. Элементы symbol не отображаются до вызова.
   
3. В элементе, где нужна иконка, используем
   

   <svg>
       <use style="color: rebeccapurple" xlink:href="id_элемента_спрайта"></use>
   </svg>

   
   
   

Цвет из color наследуется внутри иконки везде, где используется currentColor. Можно развлекаться с CSS! (transition вам в помощь)

Минусы:

• Активно управлять можно только одним цветом.
  
• Это не background.
  

Мой gulp, там найдёте конфигурацию gulp-svg-sprite.
Пример использования (иконки соцсетей в правом верхнем углу).

Answer 2

[Алексей Уколов]

Только что решал эту задачу. Вернее, пытался решить - невозможно это сделать. Есть костыли с фильтрами и масками, но они не везде поддерживаются, не всегда применимы и вообще костыли (статья).
Единственный вариант - инлайнить svg в документ, но это тоже нетривиальная задача (SO-1, SO-2, SO-3).

Comments

[Лучник *range attack +10*]

Да вроде не такая уж нетривиальная. Я часто копирую svg код иконок с иконочных сайтов и вставляю в html. Одинаково отображается во всех браузерах, а цвета и размеры иконок легко меняются при помощи css. Таким макаром можно сделать svg изображение в контейнере с z-index на нужном уровне. Это, конечно не совсем бэкграунд, но вроде как задачу решает.

[Алексей Уколов]

Константин Рафиков: в данном случае инлайнить нужно в css, а не в html и, конечно, не руками. В этом и нетривиальность.

[Лучник *range attack +10*]

Алексей Уколов: ну почему в css? svg — тот же html код. Ну вставьте для примера в html вот отсюда: icons8.com Простой копипаст.