Grunticon! A Flexible SVG Workflow

Hello! This project is archived. We're deprecating it in favor of more current techniques for SVG icons & icon systems.

What is Grunticon?

Grunticon is a Grunt.js task that makes it easy to use SVGs (Scalable Vector Graphics) for crisp, resolution independent icons, logos, illustrations and background images. SVGs aren't supported everywhere so Grunticon auto-generates bitmap (PNG) fallback images and loads the right format for compatibility with pretty much any browser.

Here are a few example icons from the Balloonicons set by PixelBuddha. Note how the SVGs are sharp on any screen, regardless of resolution, and support multiple colors!

Grunticon isn't just for icons, however. In fact, all of the imagery on this very page uses Grunticon—background images and all!

Once you set up Grunticon, your workflow is quick and easy: export your SVG files into a folder, and once you run the task, Grunti generates a stylesheet with classes for each graphic with the SVG paths (or PNG fallback) as a background image that you can apply by adding a class to any element; simple as that!

<div class="icon-vespa"></div>
<div class="icon-converse"></div>
<div class="icon-skate"></div>

Can I apply CSS to them?

Absolutely. One of the many benefits to SVG is that it's designed specifically for the purpose of creating rich vector artwork for the web. As of Grunticon version 2, you can specify that some or all of your icons be embedded directly into your markup, so you can write CSS against the elements in your icon's SVG markup!

Here's an example of a single icon recolored with CSS alone.

And here's what the code for that looks like:

HTML:

<div class="icon-lamp icon-lamp-a" data-grunticon-embed></div>
<div class="icon-lamp icon-lamp-b" data-grunticon-embed></div>
<div class="icon-lamp icon-lamp-c" data-grunticon-embed></div>

CSS:

.icon-lamp-a path.lampshade {
	fill: darkolivegreen;
}
.icon-lamp-b path.lampshade {
	fill: turquoise;
}
.icon-lamp-c path.lampshade {
	fill: papayawhip;
}

Can I animate them?

Is a uniconkey grumpy?! (...yes.) With the new embedding feature, you can write JavaScript to manipulate your SVGs as well. Check out these icons with a little animation applied! (Note: tap the light to turn it on.)

Neat! So it only works in new browsers, right?

Wrong! Grunticon generates fallback PNG images for your icons and makes sure those are used in any browser that doesn't understand SVG. Go ahead, check out this page in IE7 if you'd like (even IE6 will get usable icons). You won't see CSS and JavaScript enhancements applied to the icons like an SVG supporting browser would see, but you'll definitely see a static icon, and that's often critical to the usability of your site.

Sold! How do I start using it?

If you're already familiar with Node.js and Grunt, you can find Grunticon on NPM.

If you're new to Node.js or Grunt, you're going to need to install and configure a few things. Go to this section of the Grunticon Readme and follow the instructions.