0

I have an SVG image and I'm looking to change part of its color. The SVG will always consist of 2 colors, i.e. black & yellow

I'm looking to change the yellow color with a css class, so I could switch to another color theme easily without creating all the svg buttons in the yellow version.

Is this at all possible? I can't seem to find much online about this..

The SVG is set on span/div's using a class with background-image

If i implement the tag with SVG then I can change the color with css. But I'm looking to use it as a class if possible (and the svg should not be directly in the html)

<svg>
 <use xlink:href="#robot" id="robot-1" />
 </svg>

Turorial: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

JsFiddle: https://jsfiddle.net/wahjvmnq/

Rick
  • 109
  • 13
  • 1
    Where is your code? Is the SVG in an `img` tag, or in your code? What have you tried? If you load the SVG as an image, you cannot change the color. – Gert B. Sep 28 '21 at 13:23
  • Sorry, just updated my question with links :) – Rick Sep 28 '21 at 13:41

1 Answers1

0

You can change all the paths using --secondary-color to be fill: currentColor and then wrap the SVG with an HTML element that has a CSS class or styles applied to it that updates the color property.

After updating the path's in the SVG that currently use --secondary-color:

<div style="color:red;">
  <svg>
    <use xlink:href="#robot" id="robot-1" />
  </svg>
</div>

Here is an example on jsFiddle where the yellow has been changed to red.

You can not override the SVG colors with CSS unless it is part of the HTML document.

morganney
  • 6,566
  • 1
  • 24
  • 35
  • Ok but would it be possible to i.e. override the color using --secondary-color when loading in the svg from a class? (background image of a div i.e.) – Rick Sep 28 '21 at 14:10
  • No, not really, at least not without some hacks. For CSS to apply to the SVG it needs to be inlined with the HTML document, i.e. not requested over the network as a background-image. Here is a similar question on SO: https://stackoverflow.com/questions/49381592/currentcolor-in-background-image-svg – morganney Sep 28 '21 at 14:17
  • Ok ill check that out, thanks! – Rick Sep 28 '21 at 14:20