We learned that a limitation of using <use> to insert a bit of SVG is that you can't write compound CSS selectors that affect through there. For instance:

<svg class="parent">
  <!-- shadow DOM boundary is effectively here -->
  <use class="child">
     <!-- stuff <use> references gets cloned in here --> 
  </use>
  <!-- end shadow DOM boundary -->
</svg>

That shadow DOM boundary prevents selectors like

/* nope */
.parent .child {
}

from working. Perhaps someday we'll get a working CSS selector to penetrate that shadow DOM boundary, but as of this writing it's not here yet.

You can still set the fill on the <svg> parent and that will cascade down through, but that only gets you one color (remember to not set the presentational fill attribute on those shapes!).

Fabrice Weinberg thought of a neat little technique to get two colors though, exploiting the currentColor keyword in CSS.

Set the fill CSS property on any shapes you like to currentColor:

.shape-1, .shape-2 {
  fill: currentColor;
}

That way when you set the color property on the parent <svg>, that will also cascade through. It won't do anything all by itself (unless you have <text> in there), but currentColor is based off of color so you can use it for other things.

svg.variation-1 {
  fill: red;
  color: orange;
}

svg.variation-2 {
  fill: green;
  color: lightblue;
}

Demo:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag