Introducing Grumpicon: A web app for easy SVG development

Posted by Scott on 06/19/2013

Topics:

 screencap of grumpicon

A while back, we built a tool called Grunticon, which is a command-line utility to make it easier to integrate HD-friendly vector graphics on websites, with automated fallbacks for older browsers. Grunticon has been central to our development workflow ever since, but its installation and configuration steps made it hard for many to get up and running quickly. We received many requests from the community to make a simpler browser-based version of the tool to complement the command-line utility, and last week asked on Twitter if anyone would like to help build it.

Fortunately for us, Eric Ponto stepped up and built most of the tool himself... IN ONE DAY! We added a fresh(ish) a coat of paint and and put it online today - you can check it out at Grumpicon.com.

Grumpicon is a browser-based app. Just drag and drop your SVG files onto the browser window and it will return a downloadable zip that mirrors the output you'd get from the command-line tool. We'd like to thank Eric for his help in building Grumpicon, as he did most of the work. If you notice a bug, or would like to contribute improvements, the code and issue tracker is here.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Thank you so much for this! I’m one of those people who could see the value of grunticon, but am a simpleton when it comes to the command line, grunt and all that jazz (one of these days those things will change).

I’m so happy I can use harness the unicorn goodness, so thanks a million (especially you, Eric)!

Comment by Brad Frost on 06/19  at  11:45 PM

Isn’t that, like, a bit unnecessary and convoluted (javascript, multiple files, heavier base64, etc)? Also it doesn’t seem to consider that some browsers* support SVG but not as background

I’ve been using something like this for a while now:

<code>
background: url(image.png);
background: url(image.svg), none;
<code>

This works on the principle that all* browsers that support multiple backgrounds also support SVGs as backgrounds.

* The outdated Firefox 3.6 and Safari on iOS 4 support SVG but not as background, I believe, but even then you could just detect the support and use a .no-svg-bg class so override it.

Comment by Federico on 06/20  at  01:58 PM

Well, i tried to drag & drop on chrome & IE10 and i got these messages in the console :
ERROR: Element ‘metadata’ not yet implemented.
ERROR: Element ‘switch’ not yet implemented.
ERROR: Element ‘i:pgf’ not yet implemented.

Comment by Olivier on 06/20  at  02:33 PM

Hey Frederico,
Good points. One of the goals of grunticon is to achieve a similar benefit to that of CSS sprites (one request for all images), without having to use sprites. In that way, data-uris are a great fit because the CSS itself contains all of the images without having to reference external images - and yet, you don’t encounter all of the bleeding issues of sprites, and their resolution-independent when served as svg. Your example above does indeed work well (and prevents the request of the inapplicable image in most browsers too, but if you encoded those images as data-uris to make zero additional requests, you’d have to serve both the png and svg sources in data, so it’d be wasteful. This is why we quarantine the file types to separate CSS files and load only the type that is needed. One more thing: you mentioned base64. We don’t base64 encode the SVG data uris, and as a result they compress incredibly well with gzip. If you’re serving many svg files, encoding them all into one CSS file like this will allow the gzip to compress the overall filesize across all files much more efficiently than if they were separate files, so there’s a filesize win to data uris too.

As for your browser support concern, the test we run is for basic SVG support, independent of whether the SVG is used in a background or foreground context. It’s here (https://github.com/filamentgroup/grunticon/blob/master/tasks/grunticon/static/grunticon.loader.js#L9) if you’re interested. Since Gru[nt|mp]icon is for CSS backgrounds, that’s the part we’re most concerned with here anyway.

Comment by Scott (Filament) on 06/20  at  04:56 PM

Hey Olivier!

Sorry for your browser support concerns. It’s particularly unlike us here at FG to make a site that doesn’t work (at some level) in most browsers. For Grumpicon, we felt the current support for Chrome and Firefox and IE10 was acceptable for launch - ONLY because this is a tool for web developers who likely have access to many browsers. That said, we’d love a pull request if you have ideas for improving the support - we certainly would like to broaden it.

Comment by Scott (Filament) on 06/20  at  04:59 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site