Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Include and combine SVG files into your HTML to reference them as SVG templates
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
tasks
.gitignore
LICENSE
README.md
package.json

README.md

Include and combine SVG files into your HTML to reference them as SVG templates. Chris Coyier explains this mechanism nicely on his blog CSS-Tricks

Getting Started

If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:

npm install --save-dev grunt-svgtemplater

Overview

This task looks through your projects image directory for SVG files, extracts their content, wraps it into individual SVG groups with id="svg-[filename]" and writes these new groups into your HTML file so you can reference them as templates throughout your site like this:

<svg viewBox="0 0 1024 1024">
  <use xlink:href="#svg-[filename]">
</svg>

Include <svg id="svgtemplater"></svg> in your destination HTML file where you want the combined SVG groups to go. It'll be decorated with style display: none; automatically so you don't end up with a mess of SVGs somewhere on your site.

Example Task

grunt.initConfig({
    mytask: {
      src: 'img/**/*.svg',
      dest: 'index.html'
    }
  }
});

License

MIT

Something went wrong with that request. Please try again.