img src SVG changing the styles with CSS

Question

html

css

.logo-img path {
           


        

Answer 1

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

HTML

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