

Here's why Raphael.js and SVG totally rock. - trotter_cashion
http://www.trottercashion.com/2010/04/22/i-heart-raphael.html

======
Xurinos
I have found myself using jQuery SVG more. This link shows what other people
think of the two:

    
    
      http://stackoverflow.com/questions/588718/jquery-svg-vs-raphael
    
    

The version of Raphael I used at one point had to be in complete control from
object 1 and could not import SVGs. So let's say I generate an SVG via
graphviz and then want to make some of the nodes interactive (or at least
animate). I get a good amount of tweening via the jQuery interface, including
the ability to load up the externally created SVG.

Anyway, for comparison, here is the jQuery SVG interface:

    
    
      http://keith-wood.name/svg.html
    
    

Why have I used the SVG? It animates smoother in HTML4 on iPhone's Safari and
on my linux distro's Firefox than when I tried canvas manipulations.

More recently, I noticed the HTML5 canvas stuff being smooth for both. Still,
the benefit of the SVG is having the ability to treat each object as its own
DOM element, where you have to rig all that framework yourself for graphical
objects you create on the canvas.

~~~
arethuza
I agree - I tried Raphael but actually found it a bit limiting. I can live
without IE support (I can use Flex for that) so jQuery SVG looked like the
better choice.

The only criticism I could make of jQuery SVG is that the docs often assume
that you know a lot about SVG, but that is pretty minor.

~~~
doki_pen
I find that it is true in general. It seems too hard to learn about svg.

~~~
arethuza
I've found that pretty much everything you would want to know about is
documented - just not all in one place.

------
bradlane
There's also gRaphael specifically for charting: <http://g.raphaeljs.com/>

Also, the article mentions that IE doesn't support the <canvas> tag. While
this is true, you only need to add the excanvas JS library to use <canvas> in
IE.

~~~
iamwil
I've worked with gRaphael. it's still immature, and the code base is still
immature. I'd look at protovis before taking a look at gRaphael.

However, I do wish that protovis is based on Raphael and jQuery.

~~~
volida
define immature

~~~
iamwil
you couldn't put y-axis tick mark labels on bar graphs, to start.

~~~
nikz
I'd second this. We've been using GRaphael for the reporting graphs on
MinuteDock, and we had to manually hack in a bunch of things - like rotating
the labels on the x-axis correctly if they were too long, and even drawing
both axes on some graph types.

It's worth the effort though - works on iPhone/iPad out of the box, and is
super snappy even on OS X (unlike most Flash charting solutions, including
Google Viz.)

------
qeorge
I've used Raphael and Processing.js, have to say I liked Raphael a lot better.
Coding was more intuitive, and the performance seemed a lot better.

------
megamark16
When is this stuff coming to Android? I want it, now! It would be perfect for
an Android game idea I had, but it doesn't appear to work. I _could_ just
write it in Java I guess...

~~~
jjs
It's already in the web browser.

~~~
alunny
No it's not - unlike iPhone, Android WebKit does not have SVG support.

~~~
warfangle
Accidentally voted you down - sorry (last time I try to do that mobile before
zooming down).

I did want to add though: does anyone know why this is, or if it's slated for
a future (2.2?) release?

~~~
alunny
I've believe it's because SVG support is still listed as experimental in
WebKit; there are 258 SVG bugs listed on WebKit's Bugzilla:
[https://bugs.webkit.org/buglist.cgi?product=WebKit&compo...](https://bugs.webkit.org/buglist.cgi?product=WebKit&component=SVG&resolution=---)

~~~
warfangle
That definitely explains it. If I wasn't primarily a JS developer I'd probably
delve in and help fix it :) Really want SVG support on my N1.

------
carbocation
Anyone have any comparison between this and flot or jqPlot? I'm going to be
implementing client-side graphs on my site, preferably using JSON as my data
format, and I'm trying to make sure I'm on the "right side of history."

------
giu
Raphael.js definitely rocks. I've finished a little coding project (it's a
visualisation of an algorithm; didn't release it yet, though) and it was
really a pleasure to work with the framework. You can do really a lot of cool
things with it. The demos on the Raphael.js page are also quite impressive,
and run pretty fluid on almost every browser (my project runs pretty fast in
Chrome, but loses it a little bit in IE, perhaps because of the layer added by
excanvas). That said, I have to admit that I love Raphael.js, too. It's surely
not the last time that I've worked with it.

------
chime
> Definitely take note of the fact that jQuery can be used to manipulate the
> svg nodes.

This makes interaction with sprites pretty neat when you attach events to
them.

------
gorm
Great link! I have looked into using SVG for mapping applications. It would
simplify development of mapping apps. However, size of a country map with some
detail can be pretty big, around 2Mb so it wouldn't play well on e.g. mobile
apps where the vectors could come to use. Anyway, there are many free maps
here to play with <http://commons.wikimedia.org/wiki/Category:SVG_maps>

------
taitems
One of the things that has been missing from RaphaelJS that annoyed me was the
arrow function. They even mention it in their documentation, but as an empty
function. I finally got my version working so I will hopefully post it on HN
later tonight. Lots of math involved, probably why it was never done in the
first place!

------
johnl
I have seen that before in another language, the box read: "click here for
your bonus". Jokes aside, that's pretty good for so little code. Well
documented too. Makes the previous language it was written in look like a
slug.

------
mumrah
I really hope SVG finds its place in the new HTML5 wave. I would hate to see
it die

~~~
gamache
SVG is currently supported in all major browsers except IE, and SVG 1.1
support is slated for IE9. (AFAIK, Chrome Frame also supports SVG, as a
stopgap for pre-9 IE.)

It would seem that SVG has a bright future.

------
sdurkin
I can't be the only one disturbed that the standard for graphics online is
roughly the same as the standard for graphics on the desktop twenty some years
ago.

Oh, sweet, a moving square.

~~~
iamwil
Yes, a moving square, from a couple lines of code, that can be easily changed
to a twirly throbbing square, and can be shown on anyone's computer or mobile
phone in the world by sharing a URL.

To get a moving square on the desktop twenty years ago took more lines of
code, arguably harder to change to a twirly throbbing square, and usually
copied to disk (or emailed) to show someone else by sharing the executable
that may or may not run.

~~~
njharman
A moving square, from a couple lines of code, distributed to millions of
computers, smart phones, other devices running various operating systems and
zillions of different hardware configurations.

The last part is stunning and does not exist outside of browsers.

------
kaddar
Does Adobe Flash support exporting to SVG? Adobe should capitalize on all this
SVG hype and make an advanced animated SVG / javascript editor, because there
aren't any right now AFAIK.

~~~
gorm
I hear there are some tools for converting, but never used one. Try a search
after swf2svg

------
axod
Assuming you don't care about IE, what's the Pros/Cons for SVG vs Canvas?
Canvas seems to be pretty nice from what I've used it for so far...

~~~
steadicat
Canvas is significantly faster for animation:
<http://www.themaninblue.com/writing/perspective/2010/03/22/>

It is also more likely to get faster in the future, as browsers might
implement GPU acceleration for it. I wouldn't hold my breath waiting for GPU
acceleration for SVG, since SVG is not as easily mapped to drawing primitives,
like Canvas is.

~~~
arethuza
What makes you say that? SVG is pretty much standard drawing primitives
wrapped in a XML-based syntax.

~~~
steadicat
Not exactly. SVG syntax describes a scene, it does not draw on screen
directly.

When you animate an SVG image, you update the DOM. The browser then needs to
parse the DOM (attributes) again, then clear the screen and draw each element
again. This is a lot more work than just mapping the drawing primitives of
Canvas to the lower-level GPU functions.

Check this presentation for the two technologies compared in terms of how much
work is required for animation: [http://www.slideshare.net/madrobby/i-cant-
believe-its-not-fl...](http://www.slideshare.net/madrobby/i-cant-believe-its-
not-flash)

~~~
arethuza
Ah OK - good point

I guess it's good to have the choice though - for some things Canvas looks a
good choice, for others SVG is better.

------
alanh
It’s definitely good to keep SVG in mind, despite <canvas>'s new popularity
(as the author said). They each have their strengths.

------
d0m
The API seems quite simple and intuitive at first glance.

------
toisanji
great library, here are links for learning more:
<http://delicious.com/popular/raphael>

------
euroclydon
This is why I come to Hacker News!

~~~
dbaugh
This would not be the number one story on any other site like this on the
internet.

~~~
chairface
It's been on the front page of the programming reddit many, many times.

------
twidlit
have anyone used highcharts? how does it compare?

