Inlining SVG background images in CSS with custom properties

Here’s a tiny lesson that I picked up from Trys that I’d like to share with you…

I was working on some upcoming changes to the Clearleft site recently. One particular component needed some SVG background images. I decided I’d inline the SVGs in the CSS to avoid extra network requests. It’s pretty straightforward:

.myComponent {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

You can basically paste your SVG in there, although you need to a little bit of URL encoding: I found that converting # to %23 to was enough for my needs.

But here’s the thing. My component had some variations. One of the variations had multiple background images. There was a second background image in addition to the first. There’s no way in CSS to add an additional background image without writing a whole background-image declaration:

.myComponent--variant {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>'), url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place.

That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!

:root {
    --firstSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
    --secondSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

Then you can reference those in your background-image declarations:

.myComponent {
    background-image: var(--firstSVG);
}
.myComponent--variant {
    background-image: var(--firstSVG), var(--secondSVG);
}

Brilliant! Not only does this remove any duplication of the SVG source, it also makes your CSS nice and readable: no more big blobs of SVG source code in the middle of your style sheet.

You might be wondering what will happen in older browsers that don’t support CSS custom properties (that would be Internet Explorer 11). Those browsers won’t get any background image. Which is fine. It’s a background image. Therefore it’s decoration. If it were an important image, it wouldn’t be in the background.

Progressive enhancement, innit?

Have you published a response to this? :

Responses

Chris Heilmann

“Inlining SVG background images in CSS with custom properties”adactio.com/journal/15075 Neat little trick to store data URLs of SVG background images in custom properties to keep the CSS easily readable.

Ben Frain

This write-up by @adactio describes a great way of keeping an asset in CSS but also re-using it. I think you could perhaps go further and replace an entire sprite-sheet this way – re-using assets where ever needed. adactio.com/journal/15075 😎

# Posted by Ben Frain on Thursday, April 25th, 2019 at 3:57pm

1 Like

# Liked by Letra Studio on Friday, April 19th, 2019 at 3:42am

Previously on this day

5 years ago I wrote 100 words 027

Day twenty seven.

8 years ago I wrote Twilight

The slow disappearance of a storage medium.

10 years ago I wrote Virtually speaking

You kind of had to not be there.

11 years ago I wrote Decembering

Loving the Hazards of Love.

12 years ago I wrote Wrapping up The Future of Web Design

A long day out in London draws to a close.

13 years ago I wrote Hybrid Design and the Beauty of Standards

Hypertext footnotes from my appearances at the Web 2.0 Expo.

14 years ago I wrote Oddcasting

It’s weird repeatedly hearing your name when you’re trying to listen to podcasts.

15 years ago I wrote Some clarification

I’d like to just clear up a few small points just in case there is some misunderstanding.

17 years ago I wrote Netdiver interviews Eric Meyer

This site, along with that of fellow Brightonian Richard Rutter, gets namechecked during an excellent interview with CSS guru, Eric Meyer:

17 years ago I wrote Planes, Trains and Acute Respiratory Syndrome

I had the opportunity yesterday to dine in a very swanky restaurant in the heart of London overlooking Hyde Park.