{"id":195363,"date":"2015-02-09T09:42:04","date_gmt":"2015-02-09T16:42:04","guid":{"rendered":"http:\/\/css-tricks.com\/?p=195363"},"modified":"2015-02-10T08:38:52","modified_gmt":"2015-02-10T15:38:52","slug":"inline-svg-grunticon-fallback","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/inline-svg-grunticon-fallback\/","title":{"rendered":"Inline SVG with Grunticon Fallback"},"content":{"rendered":"<p>Grunticon 2 is out! It&#8217;s got a <a href=\"http:\/\/www.grunticon.com\/\" rel=\"noopener\">cool new website<\/a>. Grunticon is a damn fine tool for building an SVG icon system. The workflow is like:<\/p>\n<ol>\n<li>Have a folder full of SVG icons<\/li>\n<li>Run Grunticon on that folder, which produces everything you need<\/li>\n<li>Put the bit of JavaScript in the <code>&lt;head&gt;<\/code><\/li>\n<li>Use HTML like <code>&lt;div class=\"icon-image\"&gt;&lt;\/div&gt;<\/code> where you want icons<\/li>\n<li>Icons everywhere!<\/li>\n<\/ol>\n<p>Grunticon 2 even has a method for injecting inline <code>&lt;svg&gt;<\/code>, so that you have all those advantages, like scripting, animating, CSS control, etc. You just add an attribute:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"icon-burger alt\" data-grunticon-embed&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>You&#8217;d be good using Grunticon just exactly how it is.  It just is a bit of a different approach than the one I&#8217;ve been <a href=\"https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\">talking about a lot<\/a>, which uses an SVG sprite and inline <code>&lt;svg&gt;&lt;use&gt;&lt;\/use&gt;&lt;\/svg&gt;<\/code>. <\/p>\n<p>The way I show it, you <em>start<\/em> with inline <code>&lt;svg&gt;<\/code> in the document where you want the icons, and handle fallbacks from there. The possible advantages to this are:<\/p>\n<ul>\n<li>If inline SVG is supported, no DOM manipulation happens at all, everything is just left alone and works.<\/li>\n<li>It&#8217;s a bit easier to rip out the fallback one day if you decide you no longer need it.<\/li>\n<li>(Thanks to Scott pointing out below): Non-JS users would get SVG icons instead of fallback PNG <em>if you chose not to Ajax for the sprite and just embed it in the document<\/em>.<\/li>\n<\/ul>\n<p>What&#8217;s cool about inline-<code>&lt;svg&gt;<\/code>-first is that we can still use Grunticon to help us with the fallbacks!<\/p>\n<h3>1. Get a folder full of SVGs + Make SVG sprite<\/h3>\n<p>You can get them in any possible way you get get\/create SVG. We&#8217;ll use IcoMoon here because it&#8217;s easy and awesome and gives us the SVG sprite right off the bat. If you want to make sprite creation part of your build, <a href=\"https:\/\/css-tricks.com\/svg-sprites-use-better-icon-fonts\/\">read up<\/a>.<\/p>\n<h3>2. Use the icons as normal in your document<\/h3>\n<p>Simple example:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;button&gt;\r\n  &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon icon-home\"&gt;\r\n    &lt;use xlink:href=\"#icon-home\"&gt;&lt;\/use&gt;\r\n  &lt;\/svg&gt;\r\n  Go Home\r\n&lt;\/button&gt;<\/code><\/pre>\n<p><strong>Make sure to use<\/strong> the <code>xmlns=\"http:\/\/www.w3.org\/2000\/svg\"<\/code> on them, which is required to give them layout in IE 8.<\/p>\n<h3>3. Use the normal Grunticon build<\/h3>\n<p>In the Gruntfile.js:<\/p>\n<pre rel=\"JSON\"><code class=\"language-javascript\">grunticon: {\r\n  icons: {\r\n    files: [{\r\n      expand: true,\r\n      cwd: \"svg\/\",\r\n      src: [\"*.svg\"],\r\n      dest: \"fallbacks\/\"\r\n    }]\r\n    \/\/ We don't need the enhanceSVG option here\r\n  }\r\n}<\/code><\/pre>\n<p>This produces all the PNG fallback stuff for you.<\/p>\n<figure id='post-195367' class='align-right media-195367'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/02\/fallback-stuff.png?ssl=1' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>4. In the head of the document, run an inline SVG test<\/h3>\n<p>Modernizr has <a href=\"https:\/\/github.com\/Modernizr\/Modernizr\/blob\/master\/feature-detects\/svg\/inline.js\" rel=\"noopener\">a great inline SVG<\/a> test we&#8217;ll hijack.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var supportsSvg = function() {\r\n  var div = document.createElement('div');\r\n  div.innerHTML = '&lt;svg\/&gt;';\r\n  return (div.firstChild &amp;&amp; div.firstChild.namespaceURI) == 'http:\/\/www.w3.org\/2000\/svg';\r\n};\r\n\r\nif (!supportsSvg()) {\r\n\r\n  \/\/ Do Grunticon stuff\r\n\r\n} else {\r\n\r\n  \/\/ Ajax for SVG sprite\r\n\r\n}<\/code><\/pre>\n<h3>5. If the test says inline SVG is supported, Ajax for the sprite<\/h3>\n<p>We&#8217;ve <a href=\"https:\/\/css-tricks.com\/ajaxing-svg-sprite\/\">covered this before<\/a>:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">var ajax = new XMLHttpRequest();\r\najax.open(\"GET\", \"svgdefs.svg\", true);\r\najax.responseType = \"document\";\r\najax.onload = function(e) {\r\n  document.body.insertBefore(ajax.responseXML.documentElement,\r\n                             document.body.childNodes[0]);\r\n}\r\najax.send();<\/code><\/pre>\n<p>This has nothing to do with fallbacks, this is just the normal process of fetching the icons in supported browsers. We do this so it works in IE 9\/10\/11 and we can browser-cache the sprite.<\/p>\n<h3>6. If the test says inline SVG is not supported, use Grunticon<\/h3>\n<p><strong>It&#8217;s just ever-so-slightly modified<\/strong> in that you delete first CSS file in the <code>grunticon()<\/code> call. That&#8217;s the one where SVG is supported, and we already have that covered.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ Inline script of grunticon.load.js here\r\ngrunticon([\"\", \"\/fallbacks\/icons.data.png.css\", \"\/fallbacks\/icons.fallback.css\"]);<\/code><\/pre>\n<h3>Seems to work pretty well<\/h3>\n<figure id='post-195375' class='align-right media-195375'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/02\/modern-browsers.png?ssl=1' alt='' data-recalc-dims=\"1\" \/><figcaption>Modern browsers<\/figcaption><\/figure>\n<figure id='post-195376' class='align-right media-195376'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/02\/problem-stuff.jpg?ssl=1' alt='' data-recalc-dims=\"1\" \/><figcaption>Still happy in IE 9, falls back in IE 8 and Android well.<\/figure>\n<h3>If you need IE 6 and 7 too&#8230;<\/h3>\n<p>As is, we&#8217;re using the <code>&lt;svg&gt;<\/code> element itself and setting a background on it as needed for fallbacks. IE 8 can do that, but IE 6 and 7 can&#8217;t. The SVG element will just disappear (even if you use the HTML5Shiv, weirdly enough).<\/p>\n<p>If you&#8217;re in the position you need to support these ancient browsers, move the class names up to a wrapping div instead:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"icon icon-credit\"&gt;\r\n  &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon icon-arrow-right\"&gt;&lt;use xlink:href=\"#icon-arrow-right\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<figure id='post-195377' class='align-right media-195377'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/02\/ie6-7.jpg?ssl=1' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p><strong>Another notable IE 6-7-8 issue:<\/strong> you don&#8217;t get <code>background-size<\/code>, so, generate the PNGs in the exact size you&#8217;re going to use them. <\/p>\n<h3>Repo<\/h3>\n<p>I tossed the concept up <a href=\"https:\/\/github.com\/chriscoyier\/inline-svg-with-grunticon-fallback\" rel=\"noopener\">in a repo<\/a> in case I screwed stuff up and y&#8217;all want to fix it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In which we look at Grunticon and how it can be used as the fallback system even if you want to start with inline SVG in the document.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":266365,"url":"https:\/\/css-tricks.com\/making-svg-icon-libraries-for-react-apps\/","url_meta":{"origin":195363,"position":0},"title":"Making SVG icon libraries for React apps","date":"December 14, 2018","format":false,"excerpt":"Nicolas Gallagher: At Twitter I used the approach described here to publish the company\u2019s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components. There is no One True Way\u00a9 to make an SVG icon system. The only thing that SVG\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":195363,"position":1},"title":"A Compendium of SVG Information","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 &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":199370,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-svg-fallbacks\/","url_meta":{"origin":195363,"position":2},"title":"A Complete Guide to SVG Fallbacks","date":"May 4, 2015","format":false,"excerpt":"If you're using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20319,"url":"https:\/\/css-tricks.com\/using-svg\/","url_meta":{"origin":195363,"position":3},"title":"Using SVG","date":"March 5, 2013","format":false,"excerpt":"SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all? Small file sizes that compress well Scales\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":186738,"url":"https:\/\/css-tricks.com\/probably-dont-base64-svg\/","url_meta":{"origin":195363,"position":4},"title":"Probably Don&#8217;t Base64 SVG","date":"October 21, 2014","format":false,"excerpt":"Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image\/png), semicolon, then the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":168417,"url":"https:\/\/css-tricks.com\/icon-fonts-vs-svg\/","url_meta":{"origin":195363,"position":5},"title":"Inline SVG vs Icon Fonts [CAGEMATCH]","date":"April 22, 2014","format":false,"excerpt":"If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195363"}],"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=195363"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195363\/revisions"}],"predecessor-version":[{"id":195479,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/195363\/revisions\/195479"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=195363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=195363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=195363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}