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
</head> <body> <!-- include svg defs here -->
That will work great in all browsers that support SVG.
<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.
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.”