Можно ли изменить фон у svg в css?

Question

[Елена]

background-image: url('data:image/svg+xml,%3Csvg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M18.9978 19L3.0022 19C2.25356 19 1.61739 18.5578 1.2647 17.857C0.910833 17.1538 0.888001 16.2647 1.34124 15.4998L9.33904 2.00308C10.1316 0.665639 11.8684 0.66564 12.661 2.00308L20.6588 15.4998C21.112 16.2647 21.0892 17.1538 20.7353 17.857C20.3826 18.5578 19.7464 19 18.9978 19Z" fill="%23FE7A72" stroke="%23131218" stroke-width="2"/%3E%3Crect x="10" y="7" width="2" height="5" fill="%23131218"/%3E%3Crect x="10" y="14" width="2" height="2" fill="%23131218"/%3E%3C/svg%3E ');

пробовала через маски, он соответственно обрезает все, а нужно именно только фон поменять. Не хочется делать через тег svg, т.к. она не одна и у каждой картинки меняется цвет фона. Было бы конечно круто, чтоб маски задал цвет, который надо обрезать и все

Comments

[Петр]

Без тега не получиться. Браузеры не дают.

[Вадим]

Петр, а что мешает в css подправить fill у свг?

[Ankhena]

Задавайте маски псевдоэлементу, основной тег не обрежется.

[Вадим]

Есть набросок, который в целом делает то что Вам нужно, но там немного JS`а для автоматизации. Чтобы не писать руками разные css классы для модификатора цвета свг. Ну и позволяет менять цвет на основе данных из разметки, а не только на тот, какой был заготовлен в css классах.

[Ankhena]

Evgenii, для одноцветных svg есть маски и фильтры, не обязательно инлайнить.

[Елена]

Вадим, Ankhena вот такое нужно https://codepen.io/Ponomareva1994/pen/YzJQQjL?edit...
И все было бы просто, если это одна картинка. Сделал ее через svg и меняй фон через стили. А тут надо чтоб еще картинка менялась от значения атрибута. Как затолкать все картинки в html и менять им фон, другого варианта вообще не нахожу. Как сейчас в примере это мне очень не нравится, т.к. все картинки загружаются

[Ankhena]

Елена, цвет при наведении должен меняться? Цвет чего? Любой части картинки?
Сами картинки не меняются? В смысле если есть блок с галкой, то он с галкой и будет?

[Елена]

Ankhena, неа, тут нет наведения. Картинки зависят от значения атрибута. Есть подсчет вариантов, их всего 16. Из них 4 разных картинки, а каждой картинки еще меняется 4 фона, выходит 16 вариантов

[Ankhena]

Елена, наверное, проще всего инлайнить, а цвет задавать через currentColor и передавать через кастомное свойство.

[Ankhena]

Елена, Либо действительно разбивать совсем на кусочки, как я написала в удаленном комментарии.
Но с виду это не стоит свеч.

[Вадим]

Елена, выглядит так будто бы Вы иконочный шрифт переизобрести пытаетесь. И в таком случае можно воспользоваться генератором иконочных шрифтов, если Вам именно ваши иконки нужны.
Например https://fontello.com/

Тогда Вы получите следующее: шрифт только из ваших иконок, иконка определяется через css классы, а цвет иконки через свойство color.
Недостатки у иконочного шрифта конечно же имеются. Например всё то же - что грузится сразу все "иконки".

[Елена]

Ankhena, получается вставлять надо в html? Ведь если вставить инлайном в css то цвет же не получится изменить

[Елена]

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

[Ankhena]

Елена, в css можно либо всю, масками, либо инлайном, но это ничего не даст.
Через use у вас 4 картинки + цвет.

Answer 1

[Aleksander911]

Наверно лучше сохранить его как svg. А дальше два варианта:
- svg код вставить в html, а в css править fill и stroke;
- править фон в какой нибудь подходящей программе (inscape, Adobe Illustrator) и подключать в background.