by
-
Thursday, October 25, 2012
Raphaël is a small JavaScript library that allows you to create and manipulate scalable vector graphics (SVG) on the web. It also supports all the major browsers from Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
The advantage of working with SVG instead of bitmap images is that SVG graphics do not lose any quality if they are zoomed or resized. This opens the doors to greater animation without the need for flash and or potential pixelated images. Every element and every attribute in SVG files can be animated and they are W3C recommended.
The set up
Raphaël.js can be downloaded from here and will need to be include within the <head> section of a page.
Within the body tags an empty div with an id of canvas needs to be placed. This is where the graphics will be created.
Now in a separate JavaScript file the first thing we have to do is reference the ‘working area’ which in this case will be the empty canvas div. This is the first thing we need to do in order to create graphics on the page.
var canvas = new Raphael(‘canvas’, 500, 350);
The breakdown
var canvas – This is the ‘working area’ to where the shapes that are created will be placed in.
new Raphael – This initiates the creation of a blank ‘working area’. I now need to pass the width and height attributes.
‘canvas’ – this represents the div#canvas in the HTML.
500 – pixels in width.
350 – pixels in height.
So from the code above, I have created a new variable which will be referenced when creating shapes within its borders.
Now the initial set up is out of the way, we can now start creating basic shapes within the canvas.
Creating a circle
var c = canvas.circle(200, 250, 50);
The breakdown
var c – Creating a variable for the shape is not necessary, the shape will still be created if a variable wasn’t created at all. By setting this as a variable, we open the doors to being able to manipulate the variable later on in the script.
canvas – We specify what variable we will be creating the circle within.
circle – This is the Raphaël element that will be created.
And within the brackets are three attributes that are required to be input.
200 = pixels left relative to edge of canvas.
250 = pixels top relative to edge of canvas.
50 = pixels radius of the circle (the circle will then be 100px in width).
Above is the result of var c = canvas.circle(200, 250, 50);
Creating a rectangle
This is very similar to how we created the circle.
var r = canvas.rect(20, 30, 150, 100);
The breakdown
canvas – We specify what variable we will be creating the circle within.
rect – This is the Raphaël element that will be created.
And within the brackets are four attributes that are required to be input.
20 – pixels left relative to edge of canvas.
30 – pixels top relative to edge of canvas.
150 – pixels is the width the rectangle will be.
100 – pixels is the height the rectangle will be.
Above is the result of var r = canvas.rect(20, 30, 150, 100);
Setting the attributes of the element
There are many attributes that can be passed which can change the shapes appearance.
If we look back I created a rectangle and saved it as the variable r. I can now set the attributes as you can see below.
r.attr({ fill: ‘#8cee8e’, opacity: 0.75, href: /‘ });
The breakdown
fill: ‘#8cee8e’ – setting the background colour of the rectangle to a light green.
opacity: 0.75 – setting the opacity to 0.75.
href: /‘ – Setting the rectangle as a link and passing the linked webpage through.
Above is the result of r.attr({ fill: ‘#8cee8e’, opacity: 0.75, href: /‘ });
The index of all possible attributes can be found here.
Conclusion
I have only touched on the tip of the iceberg but from my initial exposure to Raphaël I can see that the structure of the language is very basic but the library itself is powerful and allows for a greater scope. There is also a solid documentation to help people out while working with this library.
JQuery can be used alongside this library. Raphaël can be written within a JQuery function and many JQuery selectors and events can be binded to the SVG elements. This allows for a greater scope of what we can do with the SVGs.
The next steps from here will be to get my hands dirty with G Raphaël which allows you to create various data charts. This alone doesn’t sound interesting but G Raphaël is built upon the original library so all the animation, fill, scaling, transform effects (to name a few) are at my disposal to make them infinitely more interactive.
Previous
Next
Send us a comment on this article