How to change the Fill color of an SVG path via CSS

Question

I know that we can change the fill color of an SVG path using CSS if/when the raw SVG is added to the HTML page.

However, I don't know if it is possible to change the fill color if the SVG is referenced within an <img> tag. - Is it possible? If so, how?

Example: This fill example doesn't work because I am referencing the svg within an img tag.

<html>
    ...
    <style>
        #foo{
           fill: #ccc;
        }
    </style>
    <body>
        <img id="foo" src="myicon.svg" />
    </body>
</html>

See [this question](http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg). — jshanley, Apr 23 '14 at 03:11

score 2 · Accepted Answer · answered Apr 23 '14 at 10:18

You can't impact via CSS on SVG Image that is source is in another file. yo can impact only in the file itself or to put the SVG inline in the HTML and than the styles will wokrs.

SVG Inline Example:

<!DOCTYPE html>
<html>
<body>
<style>
  #foo{
    fill: #ccc;
  }
</style>

<svg id="foo" width="300" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

How to change the Fill color of an SVG path via CSS

1 Answers1