1

If I load SVG image via css background-image like this:

.icon {
  background-image: url('icon.svg');
}

How can i change fill color of shapes inside that icon or whole icon itself?

Thanks.

Goran Radulovic
  • 1,987
  • 3
  • 16
  • 23
  • This is not possible. You'd have to load the svg file into the document directly or use an `` or ` – Robert Longson Jan 13 '14 at 13:43
  • Thanks! I was under impression that i could not accomplish what i've wanted, but i needed to know for sure. – Goran Radulovic Jan 13 '14 at 14:51

2 Answers2

1

Or if you want to do it dynamically try :

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Fiddle Here

tnt-rox
  • 5,400
  • 2
  • 38
  • 52
0

Edit it in an XML editor and if you know the color values, just change it.

Or, you can go to THIS LINK and make your edit.

Hope this helps.

elink
  • 7
  • 1
  • 2
Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • What i want to accomplish is to have reusable icons defined only in black color, and to change the color of them with css. I want to skip defining same icons in multiple colors. – Goran Radulovic Jan 13 '14 at 13:39
  • But it is an SVG, so you cannot control its internal artwork properties via CSS. You need to have an SVG editor to change the colors and then resave it or open it in an XML editor and edit the colors and then save it. - @GoranRadulovic – Nitesh Jan 13 '14 at 13:41
  • That's what i was afraid of, but i was hoping that there is a way or a hack that would allow me to do what i want. I read about css masks but they are not supported so i cannot use them – Goran Radulovic Jan 13 '14 at 13:43