img src SVG changing the styles with CSS

Question

html

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

css

.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.

Answer 1

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

HTML

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

CSS

.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

Answer 2

If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers.

To precisely answer the original question, just:

1. Open your logo.svg in a text editor.

2. look for fill: #fff and replace it with fill: #000

For example, your logo.svg might look like this when opened in a text editor:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">   <path d="M0 0h24v24H0z" fill="none"/>   <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/> </svg> 

... just change the fill and save.