Css – img src SVG changing the styles with CSS



<img src="logo.svg" alt="Logo" class="logo-img">


.logo-img path {
  fill: #000;

The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working.

Best Solution

You could set your SVG as a mask. That way setting a background-color would act as your fill color.


<div class="logo"></div>


.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Please check whether your browser supports this feature: https://caniuse.com/#search=mask