7

I have the following svg image in my html file:

<img class="svg" src="my-image-link.svg">

Now, I am trying to change the color using this css code:

.svg path {
    fill: black;
}

However, nothing changes. What is the correct way to change the color of an svg image's path using css? Thanks!

darkhorse
  • 8,192
  • 21
  • 72
  • 148

2 Answers2

5

You have to use an inline SVG, where the path element is inside the HTML, as opposed to linking to an external SVG.

Example: https://jsfiddle.net/fznuckb0/1/

.path-name {
    fill: tomato;
    fill-rule: evenodd;
}
rorymorris89
  • 1,144
  • 7
  • 14
4

if you are using the svg in a image tag, it is not possible to change anything within the SVG...

to do that, you have to include the whole SVG inline... look for example here: link

FalcoB
  • 1,333
  • 10
  • 25