changing SVG color from css [duplicate] - css

Question

This question already has answers here:
Specify an SVG as a background image and ALSO style the SVG in CSS?
(5 answers)
Closed 9 years ago.
I have this css:
div {
display: block;
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(http://s.cdpn.io/3/kiwi.svg) no-repeat center;
background-size: 82px 82px;
border:solid 5px black;
border-radius:200px;
padding:25px;
}
Is it possible to change the svg color from css / jquery?
I dont want to do it directly from html
if not. can I do it to PNG?
http://jsfiddle.net/g8GPf/
Thanks

Answer 1

The simple answer is no. You can't use CSS to style an SVG embedded that way.
However you could use the trick linked by Ravi to change the SVG reference to an inlined SVG.
Another alternative trick would be to change the SVG so that the parts you want to show as the colour are transparent in the SVG. And make the 'background' of the SVG a solid white.
You could then change the background-color of the <div> and it would show through the transparent parts of the SVG.