img src SVG changing the styles with CSS

Question

html

css

.logo-img path {
           


        

Answer 1

This might be helpful for people using PHP in combination with .svg images that they want to manipulate with CSS.

You can't overwrite properties inside a img tag with CSS. But when the svg source code is embedded in the HTML you surely can. I like to resolve this issue with a require_once function where I include a .svg.php file. It's like importing an image but you can still overwrite styles with CSS!

First include the svg file:

And it includes this icon for example:

Now we can easily change the fill color like this with CSS:

svg path {
  fill: blue;
}

I first tried to solve this problem with file_get_contents() but the solution above is much faster.