Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Here's why Raphael.js and SVG totally rock.

trottercashion.com

Post reply on HN
Print view View original

41–50 of 56 posts

Re: Here's why Raphael.js and SVG totally rock.

#41

Post by steadicat »

arethuza wrote: post #39
axod wrote: post #29

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

Canvas is pixel oriented whereas with SVG you have a hierarchical document structure to work with. So if you want to do an online image editor I'd probably go with canvas. For something that needs multiple objects with their own individual event handling - SVG looks a lot easier to me.

SVG is easier out of the box, but you can also use a "scene graph" JavaScript library to create an object abstraction on top of Canvas. In my experience managing the scene graph in JS turns out to be much faster than letting the browser handle it with SVG.

Re: Here's why Raphael.js and SVG totally rock.

#42

Post by iamwil »

volida wrote: post #20
iamwil wrote: post #15

Earlier quoted context omitted.

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.

define immature

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

Re: Here's why Raphael.js and SVG totally rock.

#43

Post by arethuza »

steadicat wrote: post #40
arethuza wrote: post #38

Earlier quoted context omitted.

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

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…

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.

Re: Here's why Raphael.js and SVG totally rock.

#45

Post by nikz »

iamwil wrote: post #42
volida wrote: post #20

Earlier quoted context omitted.

define immature

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

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

Re: Here's why Raphael.js and SVG totally rock.

#46

Post by brown9-2 »

volida wrote: post #20
iamwil wrote: post #15

Earlier quoted context omitted.

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.

define immature

Looks like the documentation is still in progress: http://g.raphaeljs.com/reference.html

but the demos are pretty impressive.

Re: Here's why Raphael.js and SVG totally rock.

#48

Post by 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!

Re: Here's why Raphael.js and SVG totally rock.

#50

Post by nimrody »

steadicat wrote: post #34
axod wrote: post #29

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

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.

What about printing? Does canvas maintain resolution independence like SVG? ... I.e., can you print your beautifully drawn graphs and expect to get quality output?
Post reply on HN