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 svg
.
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.
module.exports = function(grunt) {
grunt.config('svgstore', {
options: {
prefix : 'shape-', // This will prefix each ID
cleanup: false,
svg: {
style: "display: none;"
}
},
default: {
files: {
"_includes/svg-defs.svg": ["static/svg/*.svg"]
}
},
});
grunt.loadNpmTasks('grunt-svgstore');
};
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.
<svg class="footer-icon">
<use xlink:href="#shape-icon_twitter" />
</svg>
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.