SVG-спрайты, как правильно использовать?

Question

[Kot Matpockuh]

Всем привет.

Есть вопрос. В проекте использую svg, на странице таких иконок может быть 5-20. Что не очень хорошо сказывается на продуктивности загрузки (всё же, что загрузить спрайт, а что 20 раз сходить на сервер).

Но вот есть проблемы с такой оптимизацией: одна и та же иконка у меня может быть использована и как src у img и как background...

Как правильно и лучше склеить svg в один svg файл (все svg разного расширения) и использовать такой файл и в html и в css?

Answer 1

[V Sh.]

Если это иконки, то это однозначно декор. Если это декор, то он должен быть сделан в CSS без использования img, т.к. последний используется для контентных данных. Есть множество сайтов, где вы кидаете картинки, а на выходе получаете склеенный из них спрайт и css-файл для работы с получившимся спрайтом.

Comments

[Kot Matpockuh]

есть моменты, где критично использование именно как
второй момент, "кидаете картинки"... это svg!

[Kot Matpockuh]

как img (чёто обрезало...)

[V Sh.]

Kot Matpockuh: https://iconizr.com/

[Antony Bark]

тулза работает вполне быстро, но!
к сожалению, скрипт ломает цвета заливок при оформлении SVG в спрайт, хотя одиночные SVG выводит корректно
joxi.ru/Q2KeY73FRNwVrj - svgURI (цвета норм)
joxi.ru/KAxYo9DTQ3K1r8 - svgSprite (чёрный стал салатным и проч.искажения цвета)
странно..

p.s. проверено на разных типах заливок и прозрачностей SVG
p.ps. PNG тоже корректны

[Antony Bark]

p.p.p.s. написано для V Sh. V Sh. по поводу тулзы https://iconizr.com/
проверить можно самостоятельно тут: https://iconizr.com/sessions/reaspbho6l6eq2sitm8b5...