0

So I've been developing something, and I have decided to use SVGs. However, there are multiple themes for my application, is there anyway I can change the color of the SVG, like a white, to a black, through css? I'm not looking at filtering, as I can't apply so the entire image is like solid red. For an example, I have an image, svg or not, with a white icon. But I want a red icon instead. Is there anyway to do this? I prefer to not use inline svg, as it will complicate customization. If you require any clarification, please notify me. Thanks in advance

EDIT: Some extra code:

<img class="fullscreen" src="assets/icons/ic_fullscreen.svg" />

EDIT: JSFiddle: http://jsfiddle.net/MashedPotatoes/s2gs3t16/1/

mashedpotats
  • 324
  • 2
  • 16
  • Please, post you jsfiddle – Alex Oct 18 '15 at 05:24
  • I have added a fiddle now – mashedpotats Oct 18 '15 at 05:34
  • Please, add the svg to the jsfiddle – Alex Oct 18 '15 at 05:42
  • I will make it so, but I will have to use inline svg, as I have a hard time uploading images to imgur :). I'm quite sure you get the idea however, I can explain. – mashedpotats Oct 18 '15 at 05:43
  • I want to clarify a bit. I'm using an svg file in my project that is accessed through an `` tag. I want to be able to change the fill color of the svg. – mashedpotats Oct 18 '15 at 05:47
  • You can change the color, I hop these links can help you. (https://css-tricks.com/cascading-svg-fill-color/) and (http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) – Alex Oct 18 '15 at 05:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/92625/discussion-between-alireza-safian-and-mashedpotatoes). – Alex Oct 18 '15 at 05:53

2 Answers2

1

I actually ran into the same problem a few months ago. I eventually wrote something that provided me what we're both looking for - use the same SVG and have CSS to change its color. The idea is that you create it via <object> and then do some DOM manipulation on its content to replace it with a <div> and thus providing access to the content.

I wrote a little post about the process here - you could see the solution and take what you need. Also - the code is a directive in AngularJS so it might not suit you, but the idea is the same, you could take it and use it in Javascript/Jquery.

If you're using Angular:

You can use this component - ngReusableSvg.

Omri Aharon
  • 16,959
  • 5
  • 40
  • 58
0

You can't dinamically change colors of a background SVG. But in most cases you can do it changing the container's background color using the SVG as a "mask".

clip-path: url(#clipping) http://codepen.io/yoksel/full/fsdbu/

ed1nh0
  • 1,532
  • 13
  • 17