These are really going to come in handy. All these wonderful icon sets that people have made available for free are really making the web a better place. And this one is live resizable vector... Quite fantastic.
What is the trade off between hosting icon/picture image files versus drawing them? Is there one? Is this method (drawing through js) better if client download speeds are really slow?
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 around 430 bytes. Cropped from a screenshot, Photoshop says 705 bytes for gif, 643 bytes for 8 bit png (without transparency or scalability or anything).
Raphael.js from the page is >50KB. There's also an onload function to initialize the path, around 1KB (includes loops etc. specific to this page).
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.
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:
To be honest, I'm a bit more impressed by the flash-like capabilities of raphael.js rather than the icon set itself. It's great stuff. http://raphaeljs.com/
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.
FWIW, I just tried some of their demos on the iPad and.. feels pretty normal. I know the iPad isn't the slowest of the slow but it's JavaScript engine is miles behind even the slowest ones on desktop machines.
You could also replace steps 4 and 5 with ImageMagick if doing it on the command line was of importance. You could probably automate the entire process actually..
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...
36 comments
[ 0.22 ms ] story [ 84.8 ms ] threadBut if you want to do much more complex vector graphics you should probably consider using .png or .gif instead
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.
Even if the icons where regular images I would use either data uris or an image sprite.
While the icons themselves are not SVG, Raphaeljs draws these icons as SVG (VML under IE) in Javascript.
This is the top-left question mark icon.
M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M17.328,24.371h-2.707v-2.596h2.707V24.371zM17.328,19.003v0.858h-2.707v-1.057c0-3.19,3.63-3.696,3.63-5.963c0-1.034-0.924-1.826-2.134-1.826c-1.254,0-2.354,0.924-2.354,0.924l-1.541-1.915c0,0,1.519-1.584,4.137-1.584c2.487,0,4.796,1.54,4.796,4.136C21.156,16.208,17.328,16.627,17.328,19.003z
It's around 430 bytes. Cropped from a screenshot, Photoshop says 705 bytes for gif, 643 bytes for 8 bit png (without transparency or scalability or anything).
Raphael.js from the page is >50KB. There's also an onload function to initialize the path, around 1KB (includes loops etc. specific to this page).
OT, but it sort of reminds me of drawing xbm icons in the early days of the web.
PNG, 339 bytes: http://i.imgur.com/68vR8.png
Also don't forget that the path string will be gzipped (to around 220 bytes).
http://imgur.com/wIVyT.png
(I used GIMP to add transparency, and pngopt to get the file size down.)
That 430 bytes string becomes 222 bytes and RaphaelJS becomes just under 20k.
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
http://raphaeljs.com/reference.html#path http://www.w3.org/TR/SVG/paths.html#PathData
Is there an easier way than building a web page with the image and screenshotting it?
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