5 ms·
Here's why Raphael.js and SVG totally rock.
- bradlane 16y agoThere's also gRaphael specifically for charting: http://g.raphaeljs.com/ 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 16y agoI'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 16y agodefine immature
- iamwil 16y agoyou couldn't put y-axis tick mark labels on bar graphs, to start.
- nikz 16y agoI'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.)
- brown9-2 16y agoLooks like the documentation is still in progress: http://g.raphaeljs.com/reference.html http://g.raphaeljs.com/reference.html but the demos are pretty impressive.
- blasdel 16y agoexcanvas doesn't get you support for the full API -- getImageData() isn't supported since you can't do that with VML.
- kilian 16y agoSorry to be pimping my own stuff, but for the moment I think Grafico is more mature/offers better charts than gRaphael: http://grafico.kilianvalkhof.com/ http://grafico.kilianvalkhof.com/ Worth taking a look regardless :)
- sgt 16y agoThanks for posting. No you don't have to be sorry for pimping your own stuff. If you didn't, I probably never would have heard of Grafico.
- megamark16 16y agoWhen 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 16y agoIt's already in the web browser.
- alunny 16y agoNo it's not - unlike iPhone, Android WebKit does not have SVG support.
- warfangle 16y agoAccidentally 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 16y agoI'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&component=SVG&resolution=--- https://bugs.webkit.org/buglist.cgi?product=WebKit&compo...
- warfangle 16y agoThat 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.
- Xurinos 16y agoI 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 16y agoI 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.
- chairface 16y agoI'm in enthusiastic agreement. I tried to use Raphael for a hobby project that required efficient scaling of a lot of elements, and I thought Raphael would be ideal for this. Unfortunately, Raphael's list-like data structure (I forget exactly what it's called) doesn't take advantage of SVG's natural advantages in this area. It loops over all the elements in the list and scales them individually, rather than putting them all in one <g> node and scaling that. It's horribly slow for large groups. edit: I should mention that I moved to jquery-svg and have been happy ever since. :)
- chime 16y ago> 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.
- mumrah 16y agoI really hope SVG finds its place in the new HTML5 wave. I would hate to see it die
- gamache 16y agoSVG 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.
- d0m 16y agoThe API seems quite simple and intuitive at first glance.
- qeorge 16y agoI'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.
- deleted 16y ago[deleted]
- sdurkin 16y agoI 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.
- RyanMcGreal 16y agoProof of concept. You have to start somewhere.
- DannoHung 16y agoHave you looked at any of the other Raphael demos?
- iamwil 16y agoYes, 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 16y agoA 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.
- euroclydon 16y agoThis is why I come to Hacker News!
- carbocation 16y agoAnyone 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."
- kaddar 16y agoDoes 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 16y agoI hear there are some tools for converting, but never used one. Try a search after swf2svg
- gorm 16y agoGreat 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 http://commons.wikimedia.org/wiki/Category:SVG_maps
- toisanji 16y agogreat library, here are links for learning more: http://delicious.com/popular/raphael http://delicious.com/popular/raphael
- axod 16y agoAssuming 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...
- windsurfer 16y agoSVG is better supported and has some content creation tools already such as Illustrator and Inkscape. Also: SVG stuff can be used on IE (aparently...) via a flash conversion tool.
- llimllib 16y agocanvas is simpler, with more complete support, and tends to be faster. SVG is a huge spec, while canvas' can be read in a sitting.
- steadicat 16y agoCanvas is significantly faster for animation: http://www.themaninblue.com/writing/perspective/2010/03/22/ 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 16y agoWhat makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.
- steadicat 16y agoNot 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-flash http://www.slideshare.net/madrobby/i-cant-believe-its-not-fl...
- giu 16y agoRaphael.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.
- twidlit 16y agohave anyone used highcharts? how does it compare?
- johnl 16y agoI 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.
- taitems 16y agoOne 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!
- alanh 16y agoIt’s definitely good to keep SVG in mind, despite <canvas>'s new popularity (as the author said). They each have their strengths.