Страницы

Поиск по вопросам

понедельник, 6 января 2020 г.

Как подключить svg спрайт в файл в html и css

#html #css #html5 #svg #svg_спрайт 


Есть сгенерированый svg спрайт - sprite.svg c symbol:


             ...


Если вставлять прямо в html, то все подключается отлично - 


  



Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:


      



Почему не отображается иконка и как подключить в стили css иконку из спрайта?


Ответы

Ответ 1


Как правило решение проблем с отображением иконок из спрайта можно разделить  на
три части:    


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


Подключение файла спрайта


При подключении файла спрайта через тег и background-image внешняя таблица стилей
не будет работать, поэтому лучше подключать через тег   


  Your browser does not support SVG
      


Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер
Chrome чувствителен к этому. 
При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю
таблицу стилей svg


      



Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное
решение.

Тег  добавления файла спрайта в HTML необходимо разместить в листинге выше
вызовов иконок, лучше в хедере. Это понятно,  иконки должны загрузиться до вызова их
в конкретном месте странички.    

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей    

   
  
Код спрайта 



Можно сделать специально для svg внешний файл стилей Svgstyle.css и разместить его
в той же папке, что и index файл и затем подключить его к главной таблице стилей.    

UPD 19.05.2017 

Подключение с помощью background-image 



.wrapperSvgImage {
  background-image: url(http://s.cdpn.io/3/kiwi.svg);
  width: 100px;
  height: 82px;
  background-size: cover;
  border: 1px solid green;
}
 



   

Пример  из источника


Ответ 2


Через тег 
CSS  background: url(путь);

Да много способов - гугл их все знает))











Автор:



на






















Ярлыки:
,
,
,
,
,

















Комментариев нет:















Отправить комментарий

















        
      








Подписаться на:
Комментарии к сообщению (Atom)