15: SVG Icon System – Where the defs go

(Updated on )

Once we have what we are calling our “defs block” of SVG – that chunk of SVG that defines all the things we want to draw later – where do we put it? So far we’ve been putting it directly into the HTML, and that absolutely works. If we leave it at the top of the page, say just after the opening <body> tag:

</head>

<body>

   <!-- include svg defs here -->

That will work great in all browsers that support SVG.

It might be tempting to move this down. Perhaps the icons aren’t super vital to to page, not as vital as the real content that they page is meant to deliver, so we move the icons to the bottom of the page instead, deferring their loading like we often do with JavaScript. We try this in the video, but has problems with Safari rendering the icons we later tried to <use> at all. To be honest, I’ve seen inconsistent behavior or various types in other browsers as well doing it this way, and it seems the landscape is shifting a bit in this regard. So I’ve heard: <use> is a difficult thing to implement. Safest to put the block at the top if you end up keeping the defs right in your documents.

In this video we look at some basic testing of all this, and then look at some real-world websites that are using this system and how/where they insert the svg defs block.

See the Pen 954e71cb5d5e79fb61d3c89bb3f21b8a by Chris Coyier (@chriscoyier) on CodePen.

Note

I like the term “SVG defs block” – just so we can call it something that has a specific purpose but doesn’t really have an official name. But, you don’t always need to actually use a <defs> tag. When you use <symbol>s, those don’t render on their own anyway, and indeed I don’t think are supposed to be within <defs>. I’ve heard definitions of gradients in SVG are the same, and won’t even work if they are in the <defs>. Regardless, it’s still a “block of SVG code we’re just defining to use later” so I’ll likely keep calling it a “SVG defs block.”