Monday, September 7th, 2009

Raphaël 1.0 RC; Get your graphics on

Category: SVG

There have been a fair number of graphics library abstractions, but Raphaël is very elegant indeed, and a first release candidate for the 1.0 release is now here:

  • The path method syntax has been changed: Instead of r.path({attributes}, pathString) you should write r.path(pathString).attr(attributes). That makes path more consistent with other methods;
  • Path methods moveTo, lineTo, curveTo, etc. are moved from API (in favour of SVG path strings) to external plug-in;
  • Path method could access multiple parameters that are placed inside of pathString, e.g.: r.path("M{0},{1}L{2},{3}", a, b, c, d) is equal to r.path("M" + a + "," + b + "L" + c + "," + d);
  • Added support for angle in arc. That means Raphaël finally has full support for SVG path;
  • Animation from one path to another now is better;
  • Add adjusting to primitives so they shift nodes to match a pixel grid;
  • Fixed wrong path dimensions in IE & WebKit
  • General bugfixes and performance updates;

Dmitry Baranovskiy has a new tutorial gives you a quick walk-through to check out the basics:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Posted by Dion Almaer at 6:31 am

4.9 rating from 60 votes


Comments feed TrackBack URI

Great! That is exactly what I was searching for!! Thanks again!

Comment by stoimen — September 7, 2009

This means every graphical object you create is also a DOM objectt, so you can attach JavaScript event handlers or modify them later.

I like the sound of this. The only way I’ve been able to emulate something like this with <canvas> is to create a new <canvas> for each object: fiddley at best.

Comment by FunPackedShow — September 7, 2009

Awesome, something that might actually be practical for once.

Comment by Darkimmortal — September 7, 2009

Is this very different from dojox.gfx in some way, or another implementation of more or less the same thing?

Comment by sos — September 7, 2009

Good. Now what we JUST need a visual design tool to work with these JS libraries, as well as SVG (now working across all browsers [with Google’s SVG lib for IE] and CSS 3 animations and transitions.

Comment by randomrandom — September 7, 2009

Correction: Now what we JUST need *is* a visual design tool…

Comment by randomrandom — September 7, 2009

And can I have a pink pony too? ;)

Comment by Joeri — September 8, 2009

This is basically a combination of SVG/VML similar to dojo.gfx. I like that it is only 54 kb so I might end up trying it out a bit. I still like the idea of using the Canvas/VML because I like how the Canvas tag has the best performance and it resembles modern graphics hardware.

Comment by jhuni — September 8, 2009

Raphael has come a long way – it’s been around since early 2008 or so.

Since MS will never ever add SVG because, well, I used to think it was because they were pissed the W3C didn’t take VML seriously and it was first, they left the game and ‘took their ball home’ so to speak.

One more note – I found the JS source code of Raphael some of the more interesting/advanced I’ve come across for JS syntax used.

Comment by blinkingmarquee — September 9, 2009

This is a really cool library. I just gave it a try and was able to take an svg image and make it completely interactive. Very very useful.

Comment by praetoriansentry — September 11, 2009

Leave a comment

You must be logged in to post a comment.