Change svg color via css

[Former Member]

Hello everyone,

I am using an svg image in a text box that I am loading from a server via background image, e.g.:

background-image:url("server.com/image.svg");

Question: how can I change the image color via css?

Victor

[Former Member · Accepted solution]

Hola Victor,

The following is possible with css so that it also works in IE:

left the original image, right the changed image by using the css: background-color: gray;

The svg code behind the image is (I downloaded the svg image from a random web site and opened it in a text editor):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="Checkmark_7_">
  <path fill="#00A1D9" d="M49.999,100c-27.569,0-50-22.431-50-50s22.431-50,50-50c27.571,0,50.002,22.431,50.002,50
  S77.57,100,49.999,100z M49.999,12.5c-20.679,0-37.5,16.821-37.5,37.5s16.821,37.5,37.5,37.5c20.681,0,37.502-16.821,37.502-37.5
  S70.68,12.5,49.999,12.5z"/>
  <path fill="#00A1D9" d="M43.749,68.75c-1.599,0-3.198-0.61-4.419-1.831l-12.5-12.5c-2.441-2.441-2.441-6.396,0-8.838
  s6.396-2.441,8.838,0l12.5,12.5c2.441,2.441,2.441,6.396,0,8.838C46.947,68.14,45.349,68.75,43.749,68.75z"/>
  <path fill="#00A1D9" d="M43.749,68.75c-1.599,0-3.198-0.61-4.419-1.831c-2.441-2.441-2.441-6.396,0-8.838l25.002-25
  c2.441-2.441,6.396-2.441,8.838,0s2.441,6.396,0,8.838l-25.002,25C46.947,68.14,45.349,68.75,43.749,68.75z"/>
</g>
</svg>

The problem why "fill: someColor" will not work (as per my understanding) is that this svg markup of the "image/graphic" is not directly in the source code of the page if you "inspect the element" in your browser. If it was, if you would see this code when inspecting the element, then it would be changeable by css (with "fill") for example: .myPanelWhereSVGimage1is svg path {fill: green;}

So instead of just setting this svg image through background of a text component via css or when using an image component by entering the name&path to the svg image in the "Display > Image" property, you would have to find a way how to include the full markup of the svg image (maybe by using something like the rapid prototyping extension which enables you to include custom html).

Just changing the background-color will never work, because the colors ("blue") are defined with "path fill", one needs to change the fill of the path in order for the color to change.

If IE compatibility is not an issue, then you could try to use "CSS masks" or "CSS filters" (not supported by IE), see: Coloring SVGs in CSS Background Images

Or the last suggestion/option also mentioned in the link above: if you have only let's say 10 different background colors and you know each color in advance, you could create separate svg images for each color and then for example put each image reference in a separate custom css class, and then "setCSSClass" in Design Studio. To reduce requests it would be a good practice to create a sprite image from these single images.

Regards

David

[former_member681061]

It is an old question, but I would like to suggest easy way, if you are using SVG code inside HTML

You can give color to path

svg path{
 fill: red;
}

That's it, it will work, Reference: How to change color of SVG (Various ways using CSS) thanks

[Former Member]

Thanks for the proposals, however the proposals given in the link (e.g. fill:blue;) do not seem to help in DS.

Would appreciate if anyone can give it a try in Design Studio and check if it can be done successfully.

[Karol-K]

Hi Victor, any concrete tag you want to influence? It is in general possible - the difficult point is to adress the tag you want to influence by CSS selectors.

[former_member194504]

Hi Victor,

Hope this helps to understand better about svg

https://css-tricks.com/using-svg/

html - Modify SVG fill color when being served as Background-Image - Stack Overflow

Thanks,
Nithyanandam

[SergioG_TX]

I don't think you can change the image color... you could change its transparency or if you have a css color you could also change it.

did you mean to change its transparency or a color specific?

[SergioG_TX]

after some research, I see it can be changed

http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-im...