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 иконку из спрайта?

0

2 ответа 2

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>

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

8
  • так а в css можно как-то подключить иконку из спрайта?
    – hug
    18 мая 2017 в 12:46
  • @hug можно подключить, через background-image, но это не лучший путь. Выше про это написано и вот ещё можно почитать про способы подключения svg-art.ru/?page_id=1047#inline-p Попробуйте всё сделать, как в ответе написано и у вас всё получится 18 мая 2017 в 13:28
  • так в ответе и не видно как из спрайта взять опр. картинку и включить ее в css фоном иконки, но спасибо за ответ
    – hug
    18 мая 2017 в 17:10
  • @hug я отвечал исключительно по вашим кодам в вопросе. Вы всё правильно делали, но ведь не сработало. Значит причина в чем-то другом. Вот это другое, что помогло помешать я и проанализировал в своем ответе. Я просил привести коды иконки и код части спрайта, там тоже часто бывают проблемы. 19 мая 2017 в 0:29
  • background-image: url("img/_sprite/sprite.svg"); подключение через css 19 мая 2017 в 0:43
1
  • Через тег <img>
  • CSS background: url(путь);
  • Да много способов - гугл их все знает))
1
  • Вот здесь интересная статья ТЫК
    – user210322
    14 мая 2017 в 11:35

Ваш ответ

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

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