Как собрать svg в sprite?

Question

[Aleksandr]

Есть n-ое кол-во svg иконок, нужно все их собрать в спрайт.

Пробовал плагин для gulp gulp-svg-sprite, Но он как-то не работает. Как еще можно?

Или быть может подскажете причину ошибки?

Answer 1

[Дмитрий Кравченко]

я использую gulp-svg-symbols, достаточно просто

Comments

[Aleksandr]

Дмитрий Кравченко спасибо, завтра посмотрю

[Aleksandr]

Дмитрий Кравченко что-то не так пошло. генерирует svg файл, но когда открываешь его в IE ничего нету

[Дмитрий Кравченко]

Александр Котов: там ничего и не должно быть, внутри него собраны все иконки с помощью

использовать на странице так:

[Дмитрий Кравченко]

Александр Котов: хабр съел разметку

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-id"></use>
 </svg>

icon-id по умолчанию - название свг файла

[Aleksandr]

Дмитрий Кравченко: не совсем понял. Он генерирует svg и сss файл. дальше как мне допустим его подключить в html? просто в нужном месте написать ?

[Aleksandr]

Дмитрий Кравченко: Можно пример где-то посмотреть? вашего gulpfile и html с рез-ом?

[Дмитрий Кравченко]

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

[Aleksandr]

Дмитрий Кравченко: еще один вопрос. вот получил я svg-спрайт. Закинул его в папку img/ , потом пишу

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/svg.svg#icon-id"></use>
 </svg>

и ничего не отображается. Но если этот файл svg-спрайта, закину в тело index и напишу

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-id"></use>
 </svg>

все работает нормально. Как мне вытащить в отдельный файл svg?

[Дмитрий Кравченко]

Александр Котов: странно, должно работать, по сути. на вкладке network какие-нибудь запросы есть?

[Aleksandr]

Дмитрий Кравченко: конечно есть. Что именноо нужно?

[Aleksandr]

Дмитрий Кравченко: clip2net.com/clip/m0/f9caf-clip-64kb.png?nocache=1

[Дмитрий Кравченко]

Александр Котов: какой-то невалидный свг

[Aleksandr]

Дмитрий Кравченко: Через чтобы я не пытался его сгенерировать, всегда так )

[Aleksandr]

Дмитрий Кравченко: можно Ваш скайп? так мне кажется удобнее будет

[Дмитрий Кравченко]

Александр Котов: imdmitrykravchenko

[Aleksandr]

Дмитрий Кравченко: добавил