Using class on path in embedded SVG in css

Question

I'm currently playing around with embedding some basic SVGs inline with my CSS as data URI - similar to what is discussed here.

All this works fine except when I try and have a class which targets one of the inner paths:

.alter { 
    fill:red; 
}
.caretDown { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 10.07h-5.656l5.656-5.656v5.656z' class='alter' /%3E%3C/svg%3E"); 
}

Now this doesn't seem to work but if I do this as a plain SVG in my HTML it works fine:

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path d="M11 10.07h-5.656l5.656-5.656v5.656z" class="alter"/>
    </svg>
</body>

Ultimately I'm trying to embed the SVGs in this way so that I can use them as background images (seems to work better when inlining with text) and I'm wanting to control things via a class so that I can change the color by switching out targeting/scoped selectors (where dark and light are applied to the body as a theme):

.dark .alter { 
    fill:red; 
}
.light .alter { 
    fill:red; 
}

I have some theories around why this isn't working but I can't find anything concrete as to why.

Did you end up finding a solution? I'm facing the same conundrum. All solutions I can find suggest using a background color mask, but that doesn't help if you want multiple colors. http://stackoverflow.com/a/16358386/4946681 — Nate, Jan 12 '17 at 23:30

Chris · Answer 1 · 2016-07-29T19:15:15.440

0

If you're using a CSS preprocessor like SASS, you could write a small function in which you pass a fill colour and return the SVG with that passed colour as the fill.

@function caret-down-icon-svg($fill: '111') {
    @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 10.07h-5.656l5.656-5.656v5.656z" fill="#{$fill}"/></svg>';
}

.caretDown { 
  background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg)}"); 

  &.light {
    background-image: url("data:image/svg+xml;utf8, #{svg-fill($caret-down-icon-svg, ccc)}"); 
  }
}

Here's the Pen

edited Jul 29 '16 at 19:15

answered Jul 29 '16 at 18:43

Chris

1,020
10
19

Ya I thought about that, but ultimately it duplicates the SVGs in my CSS and in the end doubles the bytes I need to send down. – anthonyv Jul 29 '16 at 22:31

Using class on path in embedded SVG in css

1 Answers1