Как использовать инлайн-свг в CSS?

Question

[imko]

Песочница
Есть свг/спрайт свг вставленный в разметку, как использовать его в качестве background-image или mask-image?

Answer 1

[Вадим]

И то и то на css не сделать.
Можно найти svg через js, взять его разметку, прогнать через encode и по аналогии как base64 картинку задать в переменную, или напрямую в свойство. То есть url("data:image/svg+xml;utf8...
https://stackoverflow.com/questions/10768451/inlin... тут есть примеры.

В качестве background-image можно разве что сделать её или контент абсолютом и разрулить z-index

Comments

[imko]

Грустно, я думал оно как-то может и в бэкграунд подтянуться, раз в фильтр тянется https://developer.mozilla.org/en-US/docs/Web/CSS/u...

[Вадим]

imko, для mask-image кстати вроде работает

[imko]

Вадим, в общем то маска и главная цель) иконки хочу с заливкой сделать, но специфика архитектуры диктует что свгшка в разметке

[Ankhena]

imko, вот только что в комментариях к соседнему вопросу писала про использование стеков (спрайтов из svg) в css https://qna.habr.com/q/1288006

[imko]

Ankhena, да как спрайты делать и почему иконки маской хорошо то я в курсе) делал еще до того как это стало мейнстримом (или нет) года полтора-два назад. Поэтому вопрос и существует, пытаюсь в стили записать свгшки из спрайта, но как со спрайтом находящемся в разметке а не в отдельном файле-свг не пойму
Если быть точнее то может быть и не в разметке, но разворачиваться из скрипта, так как используется вью то сходу кинул его в разметку. Думал извернуться может с каким-то виртуальным файлом или типа того но пока долблю вариант с разметкой)

[imko]

Вадим, не выходит с маской, обновил песочницу

[Ankhena]

imko, вариант засунуть свгшки в кастомки есть? И дальше их в маски.
Только да, в base64

[imko]

Ankhena, ну пока так и сделал, не спрайт конечно но хотя бы работает и кушать не просит)

[Ankhena]

imko, если передается один раз в :root, то получает плюс спрайта: грузится один раз, складывается в кэш и переиспользуется в нужных классах.