Как изменить цвет картинки в формате ,svg с помощью CSS?

Question

[Alice777]

Есть тег img, в котором указан путь к картинке в формате svg. как изменить цвет этой картинки с помощью css?

Answer 1

[Максим Тимофеев]

Что бы манипулировать со стилями svg его надо вставить в html как svg, а не как картинку, через тег img.

Answer 2

[Сергей Мурзин]

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

Вот как иногда делаю я.

В svg-файле подключить внешний стиль (3 строка) и дать id нужным элементам(4 строка)

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="260px" height="53px" viewBox="0 0 260 53" xml:space="preserve">
<?xml-stylesheet href="my-style.css" type="text/css"?>
<path class="st0" id="elem1" d = "">

И уже в подключенном файле делаю необходимые настройки.

Вот хорошая статья на Хабре.

Answer 3

[Андрей]

Во внутрь SVG добавь id, class и задавай им цвет, также как в HTML/CSS

Comments

[Максим Тимофеев]

не получится точно.

[Максим Тимофеев]

потому что он через img вставил

[Егор Живагин]

Максим Тимофеев: по-идее, получится если прям в svg

[Максим Тимофеев]

Егор Живагин: что прям в svg? У него тег img, а в src прописан путь к svg.

[Егор Живагин]

Максим Тимофеев: Обрезался тэг и текст) ну да, вот в самой картинке .svg в тэге style можно настроить все эффекты и они даже должны работать. Но это не самый удачный способ, конечно