{"id":170779,"date":"2014-05-23T08:14:50","date_gmt":"2014-05-23T15:14:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=170779"},"modified":"2015-11-27T08:22:29","modified_gmt":"2015-11-27T15:22:29","slug":"svg-use-external-source","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/svg-use-external-source\/","title":{"rendered":"SVG `use` with External Source"},"content":{"rendered":"

There is another, newer article on this subject<\/a> that covers some newer information.<\/em><\/p>\n

Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean we have to define those shapes right in the HTML on every page? Nope, we can <use><\/code> to reference them from elsewhere. Ideally, that “elsewhere” is an external file, because that means that file can be cached by the browser<\/strong>, efficiency!<\/p>\n

<\/p>\n

Here’s what I mean:<\/p>\n

<!-- `<use>` shape defined ON THIS PAGE somewhere else -->\r\n<svg viewBox=\"0 0 100 100\">\r\n   <use xlink:href=\"#icon-1\"><\/use>\r\n<\/svg>\r\n\r\n<!-- `<use>` shape defined in an EXTERNAL RESOURCE -->\r\n<svg viewBox=\"0 0 100 100\">\r\n   <use xlink:href=\"defs.svg#icon-1\"><\/use>\r\n<\/svg><\/code><\/pre>\n
So yeah: external resource = the way to go.<\/p>\n
But, the external resource way doesn’t work in any version (up to 11 tested) of Internet Explorer. Even the ones that do<\/em> support inline SVG: 9, 10, 11.<\/p>\n
Fortunately, Jon Neal has a clever solution. It’s a little script called SVG for Everybody<\/a>. The idea is this: just use <use><\/code> as if it works, and the script will handle it in IE 9, 10, 11. A polyfill, except just for this scenario (it doesn’t make this work anywhere that doesn’t already support inline SVG use).<\/p>\n
It works like this:<\/p>\n
    \n
  1. If the browser is IE 9, 10, or 11 (User Agent sniff, but that’s the whole point here).<\/li>\n
  2. Ajax for the SVG file referenced<\/li>\n
  3. Find the needed bit, based on the ID referenced (e.g. #icon-1)<\/li>\n
  4. Inject that into the <svg><\/code> on the page<\/li>\n<\/ol>\n
    It totally works.<\/a> <\/p>\n
    <\/figure>\n
    I think inline SVG is damn useful and this (tiny) script means you can use it in a more responsible (cacheable) way.<\/p>\n","protected":false},"excerpt":{"rendered":"
    There is another, newer article on this subject that covers some newer information. Inline SVG is an awesome way to […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"c2c_always_allow_admin_comments":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[4],"tags":[469],"class_list":["post-170779","post","type-post","status-publish","format-standard","hentry","category-articles","tag-svg"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":208579,"url":"https:\/\/css-tricks.com\/svg-use-with-external-reference-take-2\/","url_meta":{"origin":170779,"position":0},"title":"SVG `use` with External Reference, Take 2","author":"Chris Coyier","date":"September 23, 2015","format":false,"excerpt":"SVG has a element which essentially means: go find the chunk of SVG that has this #identifier and kinda clone it and put it right here. It's an essential ingredient to an SVG icon system. There are some things to know about this that we haven't covered before. As a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243783,"url":"https:\/\/css-tricks.com\/high-performance-svgs\/","url_meta":{"origin":170779,"position":1},"title":"High Performance SVGs","author":"Sarah Drasner","date":"August 1, 2016","format":false,"excerpt":"I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":170779,"position":2},"title":"A Compendium of SVG Information","author":"Chris Coyier","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":170779,"position":3},"title":"svg-loader: A Different Way to Work With External SVG","author":"Shubham Jain","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":320070,"url":"https:\/\/css-tricks.com\/how-to-simplify-svg-code-using-basic-shapes\/","url_meta":{"origin":170779,"position":4},"title":"How to Simplify SVG Code Using Basic Shapes","author":"Mariana Beldi","date":"September 3, 2020","format":false,"excerpt":"There are different ways to work with icons, but the best solution always includes SVG, whether it\u2019s implemented inline or linked up as an image file. That\u2019s because they\u2019re \u201cdrawn\u201d in code, making them flexible, adaptable, and scalable in any context. But when working with SVG, there\u2019s always the chance\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/n5iIkClg.png?fit=1200%2C380&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/n5iIkClg.png?fit=1200%2C380&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/n5iIkClg.png?fit=1200%2C380&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/n5iIkClg.png?fit=1200%2C380&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/n5iIkClg.png?fit=1200%2C380&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":338478,"url":"https:\/\/css-tricks.com\/how-to-add-a-double-border-to-svg-shapes\/","url_meta":{"origin":170779,"position":5},"title":"How to Add a Double Border to SVG Shapes","author":"Mariana Beldi","date":"April 21, 2021","format":false,"excerpt":"Let\u2019s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can\u2019t use any graphic editor\u2009\u2014\u2009they need to be generated at runtime\u2009\u2014\u2009so you have to solve it with CSS or within the SVG syntax. Your first question might be: Is there\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/svg-shapes-double-border.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/170779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=170779"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/170779\/revisions"}],"predecessor-version":[{"id":235309,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/170779\/revisions\/235309"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=170779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=170779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=170779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}