{"id":182532,"date":"2014-09-15T08:11:51","date_gmt":"2014-09-15T15:11:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=182532"},"modified":"2015-10-27T08:33:57","modified_gmt":"2015-10-27T15:33:57","slug":"16-svg-icon-system-external-source","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/16-svg-icon-system-external-source\/","title":{"rendered":"16: SVG Icon System – External Source"},"content":{"rendered":"

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.<\/p>\n

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

When we use it then, the file path would be in the attribute, like this:<\/p>\n

<svg class=\"icon-book\">\r\n  <use xlink:href=\"\/path\/to\/imgs\/svg-defs.svg#icon-book\"><\/use>\r\n<\/svg><\/code><\/pre>\n
Important to know: Cross-domain restrictions are tough on this.<\/strong> 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).<\/p>\n
Another important thing to know: You definitely need to xmlns attribute for this to work.<\/strong> As in, your SVG defs block should start with:<\/p>\n
<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/code><\/pre>\n
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><\/code>s), but perhaps because this file isn’t within the confines of an HTML5 document anymore (it’s being externally referenced), you need it.<\/p>\n
For that reason, the demo for this is here.<\/a><\/p>\n
Equally important to know: No version of IE supports this<\/strong> (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><\/code> would be, making it kinda “normal” inline SVG that is<\/em> supported. It takes us a hot minute to get this working and tested in Internet Explorer using BrowserStack, but ultimately we get it.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":177022,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":182511,"url":"https:\/\/css-tricks.com\/lodge\/svg\/15-svg-icon-system-defs-go\/","url_meta":{"origin":182532,"position":0},"title":"15: SVG Icon System – Where the defs go","date":"September 15, 2014","format":false,"excerpt":"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\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182029,"url":"https:\/\/css-tricks.com\/lodge\/svg\/14-svg-icon-system-building-defs\/","url_meta":{"origin":182532,"position":1},"title":"14: SVG Icon System – Building Out Defs","date":"September 10, 2014","format":false,"excerpt":"The element is clutch to this whole idea of an inline SVG icon system. We learned that a clean way to do it is to put everything you intend to draw later into a block so it doesn't render and we can reference them later (tell them browser to draw\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182535,"url":"https:\/\/css-tricks.com\/lodge\/svg\/19-2\/","url_meta":{"origin":182532,"position":2},"title":"19: More Build Tools!","date":"September 17, 2014","format":false,"excerpt":"We've learned that build tools are a particularly awesome for tasks like turning a folder full of SVGs into an SVG defs block. As is always the case in this lovely web world we live in, there is always more than one tool for the job. There is certainly more\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182533,"url":"https:\/\/css-tricks.com\/lodge\/svg\/17-build-tool-icomoon\/","url_meta":{"origin":182532,"position":3},"title":"17: Build Tool – IcoMoon","date":"September 15, 2014","format":false,"excerpt":"The term \"build tool\" might be scary. It brings to mind fancy command line tools requiring configuration and weird system dependencies that break when you look at them wrong. Sometimes build tools are like that, and we'll go there in this series. But really a build tool is just something\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182534,"url":"https:\/\/css-tricks.com\/lodge\/svg\/18-2\/","url_meta":{"origin":182532,"position":4},"title":"18: Build Tool – Grunt svgstore","date":"September 17, 2014","format":false,"excerpt":"We can definitely get a little nerdier with our build tools. At the time of posting this, the poster child of build tools is Grunt. There are competitors, but Grunt has been the most popular for quite a while. If you're brand new to Grunt, I have a variety of\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191494,"url":"https:\/\/css-tricks.com\/lodge\/svg\/36-using-grunticon\/","url_meta":{"origin":182532,"position":5},"title":"36: Using Grunticon","date":"December 23, 2014","format":false,"excerpt":"We've spent a lot of time talking about using inline and the element. You can build an icon system with that that is rife with advantages. You can create an SVG icon system though in other ways. You could lay out a traditional gridded sprite sheet in SVG and do\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182532"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=182532"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182532\/revisions"}],"predecessor-version":[{"id":183095,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182532\/revisions\/183095"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=182532"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=182532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}