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) {

  grunt.initConfig({
    svgstore: {
      options: {
        formatting : {
          indent_size : 2
        }
      },
        default: {
          files: {
          'includes/defs.svg': ['svg/*.svg'],
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-svgstore');

};

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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag