Beautiful SVGs with custom CSS properties – Smashing Magazine

I recently explained how I use it , and CSS Media Queries to develop what I call adaptive SVGs. Symbols allow us to define an element once usage it again and again, making SVG animations easier to maintain, more efficient, and lighter.

Since I wrote that explanation, I’ve designed and implemented new ones Beautiful 7 animated images about my website. They play on the pioneering theme for web design, featuring seven beautiful characters from the Old West.

And lets me define a character design and reuse it across multiple SVGs and pages. First I created my characters and put them all in one in a hidden library SVG:

Then I referenced those symbols in two other SVGs, one for large and the other for small screens:

Elegant. But then came the annoying thing. I could reuse the characters, but couldn’t animate or style them. I added CSS rules that target elements within the symbols referenced by a but nothing happened. Colors stayed the same and things that needed to move remained static. It felt like I was running into an invisible barrier, and I was.

Understanding the Shadow DOM Barrier

When you refer to the contents of a symbol of usea browser makes a copy of it in the Shadow DOM. Each instance becomes its own encapsulated copy of the reference meaning that outside CSS cannot break the barrier of formatting elements directly. For example, this is the case in normal circumstances tapping value triggers a CSS animation:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

But when the same animation is applied to a copy of the same foot, nothing happens:

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

That’s because the within the element is in a protected shade tree and the CSS Cascade stops dead at the border. This behavior can be frustrating, but it is intentional because it ensures that reused symbol content remains consistent and predictable.

As I learned how to develop adaptive SVGs, I discovered all kinds of attempts to circumvent this behavior, but most of them sacrificed the reusability that makes SVG so elegant. I didn’t want to duplicate my characters just to have them blink at different times. I wanted a single with instances having their own timings and expressions.

Custom CSS properties come to the rescue

While working on my pioneer animations, I learned that regular CSS values ​​cannot cross the border into the Shadow DOM, but CSS Custom Properties can. And even though you can combine elements within a you can pass custom property values ​​to them. So when you insert custom properties into an inline style, a browser looks at the cascade and makes those styles available to elements within the style. referred to.

I added rotate to an inline style applied to the contents:

Then you defined the foot tap animation and applied it to the element:

@keyframes tapping {
  0%, 60%, 100% { --foot-rotate: 0deg; }
  20% { --foot-rotate: -5deg; }
  40% { --foot-rotate: 2deg; }
}

use[data-outlaw="1"] {
  --foot-rotate: 0deg;
  animation: tapping 1s ease-in-out infinite;
}

Passing multiple values ​​to a symbol

Once I set a symbol to use custom CSS properties, I can pass as many values ​​as I want predisposition. For example, I could define variables for fill, opacityor transform. What is elegant is that each instance can then have its own set of values.

use[data-outlaw="1"] {
  --eyelids-colour: #f7bea1; 
  --eyelids-opacity: 1;
}

use[data-outlaw="2"] {
  --eyelids-colour: #ba7e5e; 
  --eyelids-opacity: 0;
}

Support for passing custom CSS properties in this way is solid, and every modern browser handles this behavior correctly. I’ll show you a few ways I’ve used this technique, starting with a multi-colored icon system.

A multi-colored icon system

When I need to maintain a set of icons, I can save an icon once in a and then use custom properties to apply colors and effects. Instead of having to duplicate SVGs for each theme, each use can carry its own values.

For example, I have one --icon-fill custom property for the standard fill color of the in this Bluesky icon:

Then when I need to vary what that icon looks like, for example in a