Vector icons with Raphaël

It's the flexibility that matters. You can do way more things with Raphael.js and an SVG path than any image.

I think the best use case is when you need to present the same icons scaled to different sizes. The one that comes to mind is a web based file manager with different views (small icons, large icons, details with icons, etc).

OT, but it sort of reminds me of drawing xbm icons in the early days of the web.

If you just need a static icon then I agree that this is overkill. However if you need each icon in several different sizes, colours and/or rotations, then the overhead will quickly pay for itself.

Multiple HTTP requests will be more expensive than the drop-in-the-bucket 50KB to load the library. Sure, you could sprite all your icons but that's a lot of fragile CSS to maintain.

Your PNG compressor is garbage.

PNG, 339 bytes: http://i.imgur.com/68vR8.png

Also don't forget that the path string will be gzipped (to around 220 bytes).

Wouldn't it be more useful to compare the gzipped size? Isn't that how it would most often be delivered?

That 430 bytes string becomes 222 bytes and RaphaelJS becomes just under 20k.

If you want PNG files or standalone SVG files, I converted them all. Here's a zip file with 32x32, 64x64, and 128x128 PNG images:

http://www.ece.iastate.edu/~pjscott/raphael_icons/raphael_ic...

The images are also available individually, along with source code:

http://www.ece.iastate.edu/~pjscott/raphael_icons/

Automation is great, isn't it? One problem I ran into is that ImageMagick was giving some nasty bugs on a few of the SVG files, so I had to switch to librsvg instead, which worked properly (and faster).

EDIT: Submitted to HN along with a bit more commentary:

http://news.ycombinator.com/item?id=1419100

Last time I checked it out, it was intolerably slow on a low-end machine. Now, on that same machine but with the latest Chrome beta, the performance is perfectly tolerable. Looks like gRaphaël is going to be something I might want to use someday after all, so thanks for making me look again.

The trade-off is between client-side CPU and bandwidth/connections. A vector graphic is going to be much smaller for icons and other non-photo images. The downside is that instead of just shoving some bits onto the page, the client has to run a script to tell it what the bits are supposed to be.

Just for showing a static icon, it's very likely to be a bad trade-off not to just use an image file. It's a highly optimized path, both client- and server-side

It's when you need small variations, e.g. in color, size or shape, or some animation, that benefits kick in. Also, you can put all icons in the same easily cacheable JS-file.

For simple icons like this where there a lots of them, drawing them for the js definitions is going to be greatly faster. If they were separate files it would take 91 requests to get them all.

Even if the icons where regular images I would use either data uris or an image sprite.

It's in the SVG path data format. Inkscape, Illustrator etc. will export it.

http://raphaeljs.com/reference.html#path http://www.w3.org/TR/SVG/paths.html#PathData

yes and no.

While the icons themselves are not SVG, Raphaeljs draws these icons as SVG (VML under IE) in Javascript.

1. Get the path string for an icon from the page

2. paste it into this template (taken from the same page) http://gist.github.com/432341

3. save it with the .svg extension

4. open it in inkscape http://www.inkscape.org/ (or probably illustrator etc.)

5. file -> export

Pretty good really. I havn't dabbled with complex animation, but I was building a Visio style workflow editor that worked in IE6, IE7, IE8, Chrome, Safari + Firefox. It has drag + drop and what I believe to be critically missing, the arrow() function. Documentation is pretty thin, so I had to write my own: http://taitems.tumblr.com/post/549973287/drawing-arrows-in-r...