
Vector icons with Raphaël - danh
http://raphaeljs.com/icons/
======
gokhan
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).

~~~
olegk
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).

~~~
acangiano
PNG, 313 bytes: <http://i.imgur.com/2ULm8.png>

------
kevinelliott
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.

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

~~~
someone_here
<http://www.w3.org/TR/SVG-access/#Equivalent>

~~~
RyanMcGreal
Excellent! Thanks for sharing.

------
ilcesco
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/>

~~~
sesqu
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
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.

------
josh33
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
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
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
And where the trade-off is depends on the size of image you want to display.

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

~~~
sharkbrainguy
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>

------
seanalltogether
This is just SVG though right?

~~~
FraaJad
yes and no.

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

------
apinstein
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
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

~~~
petercooper
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
You can use inkscape from the command line:

    
    
        inkscape --export-png=x.png x.svg

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

~~~
taitems
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...](http://taitems.tumblr.com/post/549973287/drawing-arrows-in-raphaeljs)

