Как подключить растровую графику из SVG спрайта в HTML?

Question

[alexeeey_kuznetsov]

В проекте необходимо все иконки сохранить в svg и затем после обработки GULP, вставлять на страницу через use и название идентификатора. Не могу понять почему не отображается иконка. Точнее в инспекторе событий она отображается, но вместо обычного размера 20-40px, занимает 400 примерно и без цвета. А если xlink:href="data:image/png;base64 у исходной иконки svg, то в спрайте она должна быть доступна без fill и т.п. я думаю, возможно ошибаюсь, в спрайтах новичок, но с нормальными иконками (чистые svg, не дрянь с макета) получается всё нормально, здесь проблема.
Ссылку на codepen с файлом sprite.svg и gulpfile.js прикладываю.
https://codepen.io/alexeeey_kuznetsov/pen/zgByMY

Заранее спасибо за ответ!
UPD: Мне помогло, запустить сайт через OpenServer, тогда все svg подтягивались из файла со спрайтом.

Answer 1

[lagudal]

Не знаю, кто из вас, вы или ваш дезигнер, но мусье знает толк в извращениях - это ж надо простейшие иконки из 3 точек делать в png, заворачивать их в svg и подключать как спрайты. Как бы есть svg-спрайты, есть png-спрайты - и то и другое имеет право быть, а смешение жанров есть самое настоящее извращение...
Если нормальные svg иконки нельзя сделать, и по другому никак, ну пробуйте...

Comments

[alexeeey_kuznetsov]

Макет PSD, я сначала иконки экспортировал через Avocode - но, там они (хоть и подписаны как "векторный смарт объект") при выборе экспорта на svg ругается, что якобы графика растровая и преобразуя в svg будет пикселится. Из фотошопа экспорт прошёл без ошибок, но внутри файла готового, все равно неожидаемый формат data:svg/xml, а data:image/png.
Возможно я не понимаю чего-то, но почему-то иконки нормально экспортироваться не хотят.

[alexeeey_kuznetsov]

У меня проблема больше в том, как именно ссылкой на id добавить svg из спрайта. Не получалось так сделать даже с нормальными svg иконками. Хотя инструкция предельно простая. Просто не видит, то, что внутри use: path и т.п.

[lagudal]

alexeeey_kuznetsov,
ну так я и говорю - иконки в png, завернуты в svg. Я честно не понимаю, для чего они это делают?
Если вас устраивает такой вариант, делайте. Там разница почему то в том, что для svg и png источника viewBox="0 0 20 11" отображается по разному.
Вывести эти иконки вы выведете, только цвет менять на лету не сможете. Т.е. если нужны иконки разного цвета, а они скорее всего нужны, например, для hover , то придется делать дубли со всеми необходимыми цветами. Таким образом, вообще весть основной смысл svg спрайтов нивелируется...

[lagudal]

alexeeey_kuznetsov,
c нормальными svg таких проблем нет вообще - посмотрите, несколько примеров в одном для svg спрайтов.

[alexeeey_kuznetsov]

lagudal, Да, я понимаю, но мне необходимо именно все файлы подтягивать из svg спрайта. Когда указываю путь до папки со спрайтом, файла и нужного идентификатора, то ничего не появляется.
Спасибо за информацию!