The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems balancing SVG fill colors

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #240748
    Rene Ruiz

    Hey all,

    So I’m discovering the world of spriting SVGs and the magical powers of the <use> tag. However, I’m now running into an issue and would love to get some help.

    I’ll do my best to describe the scenario: I have the website’s logo in SVG. It’s being sprited and <use>’d twice. In one instance, I would like to honor whatever fills were declared directly on the SVG’s g & path tags. But in a separate instance, I would like to re-use the same SVG with my own fill.

    It seems the way to cascade your own colors for that second instance is to tell the tags to inherit fill:

    svg g,
    svg path {
      fill: inherit;

    But that strips color on the svg instance that doesn’t define a fill color via CSS to black.

    I made a CodePen to illustrate what I’m running into. I used the BK logo to demonstrate, please don’t sue me BK lawyers.

    I just can’t seem to strike a balance between both desired styles.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.