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 --> 
  <!-- end shadow DOM boundary -->

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;


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


  1. User Avatar
    Permalink to comment#

    Is there an option to do the same thing with animation? Who define it but only later define it as acting?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Animation sorta works like that right out of the box: the animation name and@keyframes are defined in their own block, and then called on the property where they ought to run.

    • User Avatar
      Permalink to comment#

      i need to animate an svg image that appears twice, in only one of them it supposed to work.
      the problem is that the animation works on the entire file, and i can not play it only on one part of the svg file.
      the video here shows a trick how to solve it with colors, im looking to solve this in animations…
      i hope i was clear..
      if you could choose a class from the svg it would solve the problem, but in the previous video he explained that there is no way.

Leave 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.