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
pathmethod syntax has been changed: Instead ofr.path({attributes}, pathString)you should writer.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 tor.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+.
Great! That is exactly what I was searching for!! Thanks again!
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.Awesome, something that might actually be practical for once.
Is this very different from dojox.gfx in some way, or another implementation of more or less the same thing?
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.
Correction: Now what we JUST need *is* a visual design tool…
And can I have a pink pony too? ;)
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.
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.
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.