Color Svg elements in html

Question

I am using svg icons in my website, and wanted to change their colors to red (all of them are black in color).

<img src='assets/icon.svg'/>

I tried using the css fill property on img tag but it doesn't work. Then I came across the object attr and tried using the svg icon as follows:

<object type="image/svg+xml" data="assets/icon.svg"></object>

and here on applying fill property on object does nothing. Any ideas on how to change the fill property of svg elements without using jquery

jsfiddle

Answer 1

you need to set fill color to svg path

path {
    fill:red;
}