{"id":191494,"date":"2014-12-23T08:35:42","date_gmt":"2014-12-23T15:35:42","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=191494"},"modified":"2015-10-27T08:58:50","modified_gmt":"2015-10-27T15:58:50","slug":"36-using-grunticon","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/36-using-grunticon\/","title":{"rendered":"36: Using Grunticon"},"content":{"rendered":"

We’ve spent a lot of time talking about using inline <svg><\/code> and the <use><\/code> element. You can build an icon system with that that is rife with advantages.<\/p>\n

You can create an SVG icon system though in other ways. You could lay out a traditional gridded sprite sheet in SVG and do background-position sprites like we used to do with raster images. In the future you’ll be able to use fragment identifiers, so that even gets a little easier. More information on these things.<\/a><\/p>\n

Another way is to embed data URI’s<\/a> of the SVG image right into a CSS file. That is the approach that Grunticon<\/a> takes. <\/p>\n

Grunticon is a Grunt plugin for automating an SVG icon system. It takes a folder full of SVG and processes them into a CSS file. There are a bunch of selectors in there, based on the file names of the SVG images, that have a background-image<\/code> of the SVG data URI (not Base64<\/a> though). <\/p>\n

Doing it this way means you get the scalability of SVG and file size benefits, but that’s about it. Still, often that’s all you need.<\/p>\n

Perhaps the best part about Grunticon though, is that it gives you everything necessary for fallbacks. This includes an alternate stylesheet for data URI PNG’s and even individual PNGs themselves (which it creates for you). Plus, a script you use on your page to determine support and only load the appropriate stylesheet.<\/p>\n

I think it’s fair to say that this makes fallbacks easier to handle than the defs\/<use><\/code> technique, for now. Not that it’s impossible.<\/p>\n

Grumpicon<\/a> is an in-browser version of Grunticon, that we used in this screencast.<\/p>\n

Grunticon is, as I write this, working on a way<\/a> to progressively enhance up to embedded inline SVG, which would be pretty cool! <\/p>\n","protected":false},"excerpt":{"rendered":"

We’ve spent a lot of time talking about using inline <svg> and the <use> 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 background-position sprites like […]<\/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":182535,"url":"https:\/\/css-tricks.com\/lodge\/svg\/19-2\/","url_meta":{"origin":191494,"position":0},"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":191499,"url":"https:\/\/css-tricks.com\/lodge\/svg\/39-bringing-together-real-world-project-svg\/","url_meta":{"origin":191494,"position":1},"title":"39: Bringing It All Together – A Real World Project with SVG","date":"December 28, 2014","format":false,"excerpt":"In this video we try and bring a bunch of what we learned together by creating a website that makes use of SVG in a variety of different ways. We make our way through creating a site for the fictional \"Dreamy Donuts\" online donut shop. This is the process we\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182532,"url":"https:\/\/css-tricks.com\/lodge\/svg\/16-svg-icon-system-external-source\/","url_meta":{"origin":191494,"position":2},"title":"16: SVG Icon System – External Source","date":"September 15, 2014","format":false,"excerpt":"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\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190763,"url":"https:\/\/css-tricks.com\/lodge\/svg\/35-optimizing-svg-tools\/","url_meta":{"origin":191494,"position":3},"title":"35: Optimizing SVG with Tools","date":"December 14, 2014","format":false,"excerpt":"We talked about optimizing SVG by hand already. Making choices manually about detail and what kinds of things can be combined or removed. In this screencast we'll look at optimizing SVG with tools. Tools that can reduce the file size of SVG without (hopefully) changing the look of it at\u2026","rel":"","context":"Similar post","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":191494,"position":4},"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":180894,"url":"https:\/\/css-tricks.com\/lodge\/svg\/13-svg-icon-system-use-element\/","url_meta":{"origin":191494,"position":5},"title":"13: SVG as an Icon System – The `use` Element","date":"August 27, 2014","format":false,"excerpt":"SVG has a very cool and powerful element called . It's pretty simple in concept. It finds another bit of SVG code, referenced by ID, and clones it over inside the element. The most basic use case would be: I've already drawn this shape(s) once on the page, and I\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191494"}],"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=191494"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191494\/revisions"}],"predecessor-version":[{"id":191495,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/191494\/revisions\/191495"}],"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=191494"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=191494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}