Проблема с отображение svg иконок спрайта в HTML

#css #svg #svg_спрайт #sprite

Кто сталкивался со следующей проблемой?

Есть иконки соц. сетей, в формате svg. Нарисованные в Иллюстраторе. Вот пример кода
одной из иконок:

    

Вот так она должна выглядеть:



При помощи gulp-svg-sprite, gulp-svgmin, gulp-cheerio, gulp-replace  создаю спрайт
и вставляю его в html:



Когда сборка запускается и открывается страница в браузере я вижу следующую картину:



Получается, что круг и иконка внутри круга полностью залиты чёрным цветом.
Проблема в том, что при изменении стилей у иконки (fill-opacity, stroke и stroke-width)
меняются оба объекта (круг и логотип внутри круга):



Если вставлять инлайн, то иконка отображается корректно.
Если удалить в коде svg иконки все стили, а сверху добавить строчку, указывающую
на внешнюю таблицу стилей , то всё равно
заливка остаётся.  

Как грамотно сделать нормальное отображение иконки?  
    

Ответы

Ответ 1

Вы должны добавить спрайт в HTML при помощи object:

` 

Далее можно вызывать иконки из спрайта внутри HTML:  


  



  



upd Спрайт уже добавлен в DOM, поэтому необязательно указывать его при вызове иконок. 


Вы правильно сделали, что указали в спрайте ссылку на внешнюю таблицу стилей  

   


Вы правильно сделали, что удалили стили из спрайта, так как внутренние стили команд
SVG имеют наивысший приоритет по сравнению со стилями во внешних и внутренних таблицах
CSS  


Добавьте еще во внешнюю таблицу стилей принудительное наследование:  

svg path {
  fill:inherit; 
  stroke:inherit; 
}  



Теперь можно управлять стилями иконок из внешней таблицы CSS.


Ответ 2

Писал ответ на вопрос в комментариях,- не вошло. Поэтому оформляю как, отдельный
ответ, может будут дополнительные вопросы по наладке, буду отвечать здесь. 


Пробуйте вынести object наружу из под тега  он должен
добавляться в HTML, DOM, как самостоятельный элемент.
А вот при вызове иконок  можно уже обернуть svg в теги  
 
Внешнюю таблицу стилей, которая управляет svg лучше разместить в той
же директории, что и Index файл HTML, к этому особо чувствителен
Chrome
Вы её можете сделать специально для SVG и потом через import
добавить к основной таблице стилей.
Смотрите другие  ответы по спрайтам. У ребят рано или поздно
получилось всё.

https://ru.stackoverflow.com/questions/tagged/svg-%d1%81%d0%bf%d1%80%d0%b0%d0%b9%d1%82