changing SVG color from css

Question

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

http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement — tomsullivan1989, Oct 25 '13 at 14:28

score 2 · Accepted Answer · answered Oct 26 '13 at 00:47

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.

changing SVG color from css

1 Answers1