{"id":180894,"date":"2014-08-27T19:35:27","date_gmt":"2014-08-28T02:35:27","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=180894"},"modified":"2015-10-27T08:31:25","modified_gmt":"2015-10-27T15:31:25","slug":"13-svg-icon-system-use-element","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/13-svg-icon-system-use-element\/","title":{"rendered":"13: SVG as an Icon System – The `use` Element"},"content":{"rendered":"

SVG has a very cool and powerful element called <use><\/code>. It’s pretty simple in concept. It finds another bit of SVG code, referenced by ID, and clones it over inside the <use><\/code> element. <\/p>\n

The most basic use case would be: I’ve already drawn this shape(s) once on the page, and I want to draw it again someplace else. Go get that shape(s), and draw it again.<\/p>\n

We can use that ability as the root concept for (drumroll!) and entire icon system! We can take all the shapes we intend to use on the page in one big SVG block. We’ll wrap them all in a <defs><\/code> tag which is a semantic way to say “We’re just defining these things in which to use later.” It also makes sure they won’t render (but you should also display: none;<\/code> the <svg><\/code> itself.<\/p>\n

It works like this:<\/p>\n

<svg class=\"icon-basketball\">\r\n  <use xlink:href=\"#basketball\"><\/use>\r\n<\/svg><\/code><\/pre>\n
That funky looking xlink:href<\/code> attribute references an ID elsewhere. That ID could be on a any shape element, like a <rect><\/code> or <path><\/code>, or it could be on a group of elements like a <g><\/code>.<\/p>\n
Best of all in the case of an icon system, it can be on a <symbol><\/code> element. In addition to being correct semantically (an icon is a symbol, no?), the <symbol><\/code> element can carry it’s own viewBox attribute and accessibility information, like <title><\/code> and <desc><\/code> tags. This makes the implementation very easy (as shown above).<\/p>\n
So you just need to make sure this is defined somewhere else in the document:<\/p>\n
<svg style=\"display: none;\">\r\n  <defs>\r\n    <symbol id=\"basketball\" viewBox=\"0 0 100 100\">\r\n      <title>Basketball<\/title>\r\n      <path d=\"M28.1,3 ... \"\/>\r\n    <\/symbol>\r\n  <\/defs>\r\n<\/svg><\/code><\/pre>\n
See the Pen JoDmd<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
SVG has a very cool and powerful element called <use>. It’s pretty simple in concept. It finds another bit of SVG code, referenced by ID, and clones it over inside the <use> element. The most basic use case would be: I’ve already drawn this shape(s) once on the page, and I want to draw it […]<\/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":182029,"url":"https:\/\/css-tricks.com\/lodge\/svg\/14-svg-icon-system-building-defs\/","url_meta":{"origin":180894,"position":0},"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":191494,"url":"https:\/\/css-tricks.com\/lodge\/svg\/36-using-grunticon\/","url_meta":{"origin":180894,"position":1},"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":[]},{"id":189560,"url":"https:\/\/css-tricks.com\/lodge\/svg\/32-svg-filters-svg-html-elements\/","url_meta":{"origin":180894,"position":2},"title":"32: SVG Filters on SVG and HTML Elements","date":"November 30, 2014","format":false,"excerpt":"Perhaps you've heard of CSS filters? You can apply them do any element from CSS, like: .apply-css-filter { -webkit-filter: grayscale(0.5); filter: grayscale(0.5); } You can even apply that to a HTML element or an SVG element. But there is also filters you can define within SVG, and there are more\u2026","rel":"","context":"In \"svg filters\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182511,"url":"https:\/\/css-tricks.com\/lodge\/svg\/15-svg-icon-system-defs-go\/","url_meta":{"origin":180894,"position":3},"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":254303,"url":"https:\/\/css-tricks.com\/snippets\/svg\/shape-morphing-icons-button-click\/","url_meta":{"origin":180894,"position":4},"title":"Shape Morphing Icons in Button on Click","date":"May 4, 2017","format":false,"excerpt":"The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm\u2026","rel":"","context":"In \"shape morphing\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":197972,"url":"https:\/\/css-tricks.com\/video-screencasts\/137-svg-is-for-everybody\/","url_meta":{"origin":180894,"position":5},"title":"#137: SVG is for Everybody","date":"March 13, 2015","format":false,"excerpt":"Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, so it's mostly me trying to convince you that SVG is\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180894"}],"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=180894"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180894\/revisions"}],"predecessor-version":[{"id":181545,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180894\/revisions\/181545"}],"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=180894"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=180894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}