A couple weeks ago I wrote about a variety of methods I’ve used during the past couple years to provide fallbacks for svg when they’re used either within an
<img> tag or as a CSS background images.
However, when I rebuilt this site, I wanted to experiment with using in-line
SVG. Here’s a quick description of the current work flow I’m using to create SVG sprites.
After saving all my SVGs from illustrator, I put them in a folder called
Next I run a grunt task, using the grunt-svgstore plug-in. One side note about my grunt set-up. Rather than putting all my tasks in a Gruntfile, I’ve modularized my set-up so each task is its own file and those individual tasks are in a folder called
tasks. The svgstore task configuration looks something like this.
What svgstore does is combine all the svg files I saved from illustrator into a sprite file named
svg-defs.svg. This is a jekyll site, so the grunt task saves the svg-defs file into the
_includes folder. Then that file is included in my templates.
When I want to call a given SVG in HTML this is all I need to do.
I’m really liking this workflow. The only thing I haven’t solved is support for IE8. Because my site is generally viewed in modern browsers (thank for that, everyone), IE8 is not a concern. However, if I want to use this in a client project, I’ll need to solve for that.
Chris Coyier has a great video describing this workflow in the context of a Jekyll site, using Grunt.