Как изменить цвет у svg такого плана background-image: url("data:image/svg+xml;?

Question

[Антон Вебсайтовский]

Всем привет.

Как поменять цвет у svg?
Искал в инете, находил варианты, но чет цвет так и не сменился.

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");

Comments

[Ankhena]

Просто изменить, потому что не тот цвет - просто поменять цвет в коде.
Был белый, fff. Замените на f00 станет красным.

Если картинка одноцветная то либо фильтрами либо маской
https://codepen.io/noahblon/post/coloring-svgs-in-...

Если нужно поменять цвет только у части картинки, то придется менять url

[Антон Вебсайтовский]

Ankhena, Спасибо, как задний фон убрать?

Да я обычно так не ставлю svg, просто не стал менять по другому ) решил так оставить.

[Ankhena]

Антон Вебсайтовский,

Спасибо, как задний фон убрать?

Нет там никакого заднего фона, прозрачная иконка
https://jsfiddle.net/c965m4wp/

[Ankhena]

Антон Вебсайтовский,
шепотом: но цвет фона это background-color
;)

[Антон Вебсайтовский]

Ankhena, странно, от куда у меня тогда там серый ) щас буду искать.

[Антон Вебсайтовский]

Задал background-color и все ок стало.

[Ankhena]

Антон Вебсайтовский,

странно, от куда у меня тогда там серый ) щас буду искать.

Откуда, откуда?
Цвет кнопок по умолчанию серый...

[Антон Вебсайтовский]

Ankhena, Ну теперь понятно от куда )

Answer 1

[SHKD]

Свойства fill='%23fff' и stroke='%23fff' указывают внешний и внутренний цвет элемента.

Comments

[Антон Вебсайтовский]

спасибо, а как мне сделать черным???

[Антон Вебсайтовский]

Где вообще расшифровать эти цвета %23fff

[Максим]

Антон Вебсайтовский, выделите от от первый кавычки до последней и вставьте в адресную строку и нажмите Enter

от туда возьмите весь код отредактируйте и опять перегоните в data и всё

либо используйте css filter или вставляйте иконки из javascript

манипуляция не долгая https://codepen.io/topicstarter/pen/rNmqXNr

[Антон Вебсайтовский]

Максим Ленский, а как в data перегнать?

[Максим]

Антон Вебсайтовский, https://yoksel.github.io/url-encoder/

[Максим]

Антон Вебсайтовский, или так https://codepen.io/deniscreative/pen/KKKRBxr

[Антон Вебсайтовский]

Спасибо ) да гемор еще тот конечно ), обычный способ на много лучше и проще ) я об

[Антон Вебсайтовский]

А как фон убрать под крестиком?

[Антон Вебсайтовский]

Задал background-color и все ок стало.

Answer 2

[Smirator]

Если кто-то еще ищет:
1. Открываем через стили нужный SVG.
2. Ctrl + s (сохраняем).
3. Открываем через редактор кода, находим fill="".
4. Пишем свой цвет, сохраняем.
5. Конвертируем в CSS формат.
6. Загружаем новый SVG на сайт, перебивая старый вариант специфичностью. Ну или меняем, тут зависит от того, откуда подтягивается иконка.
Если с бутстрапа, например, в элементе button.accordion-button, то специфичностью.