What is SVG?
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);
var backWheel = paper.circle(160, 100, 20);
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:
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