6 ms·

Vector icons with Raphaël

147 points by danh 16y ago

kevinelliott 16y ago
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.
josh33 16y ago
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?
- JeffJenkins 16y ago
  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.
  - ThomPete 16y ago
    Vectors are great kb savers if they are fairly simple. In this case they are ultra simple. But if you want to do much more complex vector graphics you should probably consider using .png or .gif instead
    - JeffJenkins 16y ago
      And where the trade-off is depends on the size of image you want to display.
- mseebach 16y ago
  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.
- megaman821 16y ago
  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.
RyanMcGreal 16y ago
That's very impressive; but what are the accessibility implications? Can a vector icon have ALT text, for example?
- someone_here 16y ago
  http://www.w3.org/TR/SVG-access/#Equivalent http://www.w3.org/TR/SVG-access/#Equivalent
  - RyanMcGreal 16y ago
    Excellent! Thanks for sharing.
seanalltogether 16y ago
This is just SVG though right?
- FraaJad 16y ago
  yes and no. While the icons themselves are not SVG, Raphaeljs draws these icons as SVG (VML under IE) in Javascript.
gokhan 16y ago
Do your math based on your use case: 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).
- someone_here 16y ago
  It's the flexibility that matters. You can do way more things with Raphael.js and an SVG path than any image.
  - joelanman 16y ago
    yes, you can resize them, change icon colours, augment/animate them on the fly, build them from live data..
- dugmartin 16y ago
  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.
- dagw 16y ago
  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.
- johnkary 16y ago
  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.
matthijs 16y ago
How do you convert your existing vector icons to this (pathstring) format? Or did he use some custom tool to draw them?
- sharkbrainguy 16y ago
  It's in the SVG path data format. Inkscape, Illustrator etc. will export it. http://raphaeljs.com/reference.html#path http://raphaeljs.com/reference.html#path http://www.w3.org/TR/SVG/paths.html#PathData http://www.w3.org/TR/SVG/paths.html#PathData
ilcesco 16y ago
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/ http://raphaeljs.com/
- sesqu 16y ago
  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.
  - petercooper 16y ago
    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.
apinstein 16y ago
Anyone got an idea how to easily rasterize these? Is there an easier way than building a web page with the image and screenshotting it?
- sharkbrainguy 16y ago
  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 http://gist.github.com/432341 3. save it with the .svg extension 4. open it in inkscape http://www.inkscape.org/ http://www.inkscape.org/ (or probably illustrator etc.) 5. file -> export
  - petercooper 16y ago
    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..
    - rbonvall 16y ago
      You can use inkscape from the command line: inkscape --export-png=x.png x.svg
sgallant 16y ago
How is Raphael.js (and svg tags) for cross-browser compatibility?
- taitems 16y ago
  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-raphaeljs http://taitems.tumblr.com/post/549973287/drawing-arrows-in-r...

147 points by danh 16y ago

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.

josh33 16y ago

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?

JeffJenkins 16y ago
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.
- ThomPete 16y ago
  Vectors are great kb savers if they are fairly simple. In this case they are ultra simple. But if you want to do much more complex vector graphics you should probably consider using .png or .gif instead
  - JeffJenkins 16y ago
    And where the trade-off is depends on the size of image you want to display.
mseebach 16y ago
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.
megaman821 16y ago
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.

RyanMcGreal 16y ago

That's very impressive; but what are the accessibility implications? Can a vector icon have ALT text, for example?

someone_here 16y ago
http://www.w3.org/TR/SVG-access/#Equivalent http://www.w3.org/TR/SVG-access/#Equivalent
- RyanMcGreal 16y ago
  Excellent! Thanks for sharing.

seanalltogether 16y ago

This is just SVG though right?

FraaJad 16y ago
yes and no. While the icons themselves are not SVG, Raphaeljs draws these icons as SVG (VML under IE) in Javascript.

gokhan 16y ago

Do your math based on your use case: 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).

someone_here 16y ago
It's the flexibility that matters. You can do way more things with Raphael.js and an SVG path than any image.
- joelanman 16y ago
  yes, you can resize them, change icon colours, augment/animate them on the fly, build them from live data..
dugmartin 16y ago
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.
dagw 16y ago
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.
johnkary 16y ago
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.

matthijs 16y ago

How do you convert your existing vector icons to this (pathstring) format? Or did he use some custom tool to draw them?

sharkbrainguy 16y ago
It's in the SVG path data format. Inkscape, Illustrator etc. will export it. http://raphaeljs.com/reference.html#path http://raphaeljs.com/reference.html#path http://www.w3.org/TR/SVG/paths.html#PathData http://www.w3.org/TR/SVG/paths.html#PathData

ilcesco 16y ago

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/ http://raphaeljs.com/

sesqu 16y ago
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.
- petercooper 16y ago
  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.

apinstein 16y ago

Anyone got an idea how to easily rasterize these? Is there an easier way than building a web page with the image and screenshotting it?

sharkbrainguy 16y ago
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 http://gist.github.com/432341 3. save it with the .svg extension 4. open it in inkscape http://www.inkscape.org/ http://www.inkscape.org/ (or probably illustrator etc.) 5. file -> export
- petercooper 16y ago
  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..
  - rbonvall 16y ago
    You can use inkscape from the command line: inkscape --export-png=x.png x.svg

sgallant 16y ago

How is Raphael.js (and svg tags) for cross-browser compatibility?

taitems 16y ago
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-raphaeljs http://taitems.tumblr.com/post/549973287/drawing-arrows-in-r...