6

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

<svg width="0" height="0" style="position:absolute;">
            <symbol viewBox="0 0 10 10" id="user"> ...

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

<svg class="icon-box">
  <use xlink:href="#user"></use>
</svg>

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

<svg class="icon-box">
      <use xlink:href="images/sprite.svg#user"></use>
</svg>

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

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
hug
  • 405

2 Answers2

5

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

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

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

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

<object type="image/svg+xml" data="sprite.svg" >
  Your browser does not support SVG
</object>

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

<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#user"></use>
</svg>

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

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

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

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

<?xml-stylesheet type="text/css" href="Svgstyle.css"?>   
<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
Код спрайта 
</svg>

Можно сделать специально для 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;
}
 <div class="wrapperSvgImage"></div>

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

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384
  • так а в css можно как-то подключить иконку из спрайта? – hug May 18 '17 at 12:46
  • @hug можно подключить, через background-image, но это не лучший путь. Выше про это написано и вот ещё можно почитать про способы подключения https://svg-art.ru/?page_id=1047#inline-p Попробуйте всё сделать, как в ответе написано и у вас всё получится – Alexandr_TT May 18 '17 at 13:28
  • так в ответе и не видно как из спрайта взять опр. картинку и включить ее в css фоном иконки, но спасибо за ответ – hug May 18 '17 at 17:10
  • @hug я отвечал исключительно по вашим кодам в вопросе. Вы всё правильно делали, но ведь не сработало. Значит причина в чем-то другом. Вот это другое, что помогло помешать я и проанализировал в своем ответе. Я просил привести коды иконки и код части спрайта, там тоже часто бывают проблемы. – Alexandr_TT May 19 '17 at 00:29
  • background-image: url("img/_sprite/sprite.svg"); подключение через css – Alexandr_TT May 19 '17 at 00:43
  • #user bacground-position потом подогнать? – hug May 19 '17 at 04:49
  • @hug я не использую background-image для подключения svg из-за его недостатков, есть много других хороших способов подключения Если у вас есть желание сделать именно через background-image посмотрите здесь в выборке вопросов https://ru.stackoverflow.com/search?q=%5Bsvg%5Dbackground-image – Alexandr_TT May 19 '17 at 08:17
  • ответ хороший но ничем не помог, ваш способ подключения в цсс вообще не о том. с инлайн что-то тоже не работает ну видимо из-за того что хром – hug May 19 '17 at 18:15
0
  • Через тег <img>
  • CSS background: url(путь);
  • Да много способов - гугл их все знает))