Putting that SVG defs block at the top of the document definitely works. It has some advantages too, like the fact that no HTTP request needs to be make, all the information for drawing the graphics is right on the page. But, it has some disadvantages too. All that information needs to be parsed by the browser on each page, from the document. It's not a separate document that might already be cached by the client, like other assets might be. And speaking of cache, if your site caches HTML (typically a good idea), you could consider this "page cache bloat" because every single cached page includes this large repetitive block of code - not a very efficient use of server cache.

The good news is we can move that SVG defs block out to an external file, and use it just like we would an image or any other asset.

When we use it then, the file path would be in the attribute, like this:

<svg class="icon-book">
  <use xlink:href="/path/to/imgs/svg-defs.svg#icon-book"></use>
</svg>

Important to know: Cross-domain restrictions are tough on this. Even CORS headers won't help you in my experience. So no CDN's (can't even play on CodePen, and definitely can't play at a file:// URL).

Another important thing to know: You definitely need to xmlns attribute for this to work. As in, your SVG defs block should start with:

<svg xmlns="http://www.w3.org/2000/svg">

I was under the impression that you didn't need that in an HTML5 document (in much the same way you don't need types on <script>s), but perhaps because this file isn't within the confines of an HTML5 document anymore (it's being externally referenced), you need it.

For that reason, the demo for this is here.

Equally important to know: No version of IE supports this (up to 11 at the time of this publishing). But there is a way to get it to work, by essentially Ajaxing in the bit of SVG you need and inserting it where the <use> would be, making it kinda "normal" inline SVG that is supported. It takes us a hot minute to get this working and tested in Internet Explorer using BrowserStack, but ultimately we get it.

Comments

  1. User Avatar
    sean kubin
    Permalink to comment#

    Always like to see troubleshooting play out, especially when it pans out. Great!

  2. User Avatar
    Tinker
    Permalink to comment#

    Hilarious! Those are the kind of problems everybody runs into sometimes, thanks for sharing in as it is :D

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag