SVG Tip: Introduction to Raphaël.js

In my Using HTML5 Canvas vs. SVG blog post, I touched on the benefits of using the Raphaël.js JavaScript library, and in this tip we will take a deeper look.

Raphaël.js is a JavaScript library for creating SVG graphics. Before going over a basic example, I would like to talk about what SVG is and what it is good for.

What is SVG?

SVG stands for Scalable Vector Graphics. As you can see, the name pretty much already explains what it is. Scalable Vector Graphics, which is natively supported in most modern browsers, is an XML-based language for creating vector graphics. Since the language is node-based, however, creating the graphics can sometimes be a little annoying if you want to do so by using the DOM API. This is where Raphaël.js comes in. Raphaël.js offers a JavaScript API for creating and animating SVG graphics. In my last post, SVG vs. Canvas, I explained some of the pros and cons of choosing SVG over the pixel-based technology HTML5-canvas. Once you have decided to go with SVG, learning how to use Raphaël.js is a tool to have under your belt.

How to get started

In Raphaël.js, everything starts with a Paper. If you are familiar with HTML5-canvas, this is something like the canvas element itself. You need a paper to draw elements on. With Raphael, you can create such a paper by calling Raphael as a function:

var paper = Raphael(0, 0, 700, 500);

Raphael can be called with different sets of arguments. I chose the position (x, y) and the size (width, height). You could also supply a DOM-element in which the SVG graphics will be placed and sized (width, height). For more details, see: http://raphaeljs.com/reference.html#Raphael.

Now that we’ve created a paper, we can call methods to create elements, such as circles and rectangles.

    var car = paper.rect(30, 40, 160, 60);

    var frontWheel = paper.circle(60, 100, 20);
    frontWheel.attr("fill", "#000");

    var backWheel = paper.circle(160, 100, 20);
    backWheel.attr("fill", "#000");

Above we created a rectangle and two circles. For the circles, we also defined a fill color of black. By default with Raphaël.js all the elements have a black stroke and no fill. So far, these lines work to create something like this (an extremely abstract car):

Now, one of the very convenient things about SVG graphics is that all of these circles and rectangles (and any other element, such as text, etc.) are represented in the DOM with a node. This means that all of these elements have events, like click and hover. Raphaël.js conveniently supplies methods that can add callbacks for those events:

    frontWheel.click(function() {
        alert("I am a front wheel");

This is only a tiny part of what Raphaël.js can do for you. If you’re interested in more, head over to http://raphaeljs.com and take a closer look!

Safari Books Online has the content you need

Check out these SVG books, available from Safari Books Online:

HTML5 will transform web and mobile gaming. As new browsers rapidly adopt it, HTML5 will do everything “legacy” technologies such as Flash and Silverlight have done—and much more. In Learning HTML5 Game Programming, pioneering developer James L. Williams gives you all the knowledge, code, and insights you’ll need to get started fast!
Targeted to the experienced Web programmer, SVG Unleashed equips the reader with the practical knowledge to create and manipulate Scalable Vector Graphics (SVG) programmatically, both on the client and the server side.
SVG Essentials takes you through the ins and outs of SVG, beginning with basics needed to create simple line drawings and then moving through more complicated features like filters, transformations, and integration with Java, Perl, and XSLT.

About this author

Mathias Paumgarten, co-author of HTML5 Games Most Wanted, is a web developer who focuses on front-end and interaction development. Starting with a background in Flash development, he now focuses mainly on JavaScript. He found his passion for the web and code-based animation at a very young age and made his way from a small town in Austria all the way to New York City where he currently works for Firstborn Multimedia as a Creative Developer. Part of his work can be found at https://github.com/MathiasPaumgarten and http://www.mathias-paumgarten.com/.

About Safari Books Online

Safari Books Online is an online learning library that provides access to thousands of technical, engineering, business, and digital media books and training videos. Get the latest information on topics like Windows 8, Android Development, iOS Development, Cloud Computing, HTML5, and so much more – sometimes even before the book is published or on bookshelves. Learn something new today with a free subscription to Safari Books Online.

Comments are closed.