18: Build Tool – Grunt svgstore

(Updated on )

We can definitely get a little nerdier with our build tools. At the time of posting this, the poster child of build tools is Grunt. There are competitors, but Grunt has been the most popular for quite a while. If you’re brand new to Grunt, I have a variety of things I’ve written and screencasted about it:

Even if you’ve never used Grunt, in this screencast we pretty much start from scratch and get this all going. The idea is that we’re working from the quintessential “folder full of SVGs”. Each file.svg represents some graphic we want to use on the site. We want to squish all that into a SVG defs block that is ready to use. Symbols created, accessibility information added to the best of our automated ability, etc.

Once we get Grunt going, and install the build tool we’re focusing on here, grunt-svgstore, we’re good to go.

In our little demo we have Grunt configured to, via the Gruntfile.js, to look at our folder full of SVG’s and create a defs.svg file we put in an includes folder.

module.exports = function(grunt) {

    svgstore: {
      options: {
        formatting : {
          indent_size : 2
        default: {
          files: {
          'includes/defs.svg': ['svg/*.svg'],



Leveling up from here would include using a “watch” plugin to watch that folder of SVGs and automatically run this task when any of the files change (or are added or deleted). If you’re using a site builder like Jekyll, you might even trigger a jekyll build afterward to make sure the new file is available in the built site.