Create beautiful, interactive images on the Web with RaphaëlJS, the JavaScript library that lets you draw Scalable Vector Graphics (SVG) right in the browser. With this concise guide, you’ll quickly learn how to paint the screen with shapes and colors that you can turn into lively, animated graphics and visualizations.

Author Chris Wilson (Time.com) shows you how to create Raphaël objects and manipulate them with animation, transformations, and other techniques, using just a few lines of code. Packed with working examples, sample code, and cool hands-on projects, RaphaëlJS is ideal for new and experienced JavaScript programmers alike.

Create images that work on browsers new and old, as well as mobile devices

Chris Wilson

Chris Wilson is a journalist and developer at Time.com. Prior to joining the magazine, he was a "visual columnist" at Yahoo News and a senior editor at Slate, where he founded Slate Labs, which won the 2010 Ad Age Media Vanguard Award. He is a 2005 graduate of the University of Virginia and lives in Washington, D.C.

The animal on the cover of RaphaelJS is a Nile Valley Sunbird (Hedydipna metallica),a colorful passerine (perching) bird that is commonly found in the Middle East and northern Africa. Every February, the male Sunbird grows “nuptial plumage,” which are vibrantly colored feathers that he displays to impress the females of the species.

The nuptial plumage tends to consist of glossy green/blue/violet feathers on the back and sides with a brilliant yellow underbelly and one or two long tail streamers. This is in stark opposition to the normal appearance of males and the year-round appearance of females: a musty brown body with a cream and dull-yellow colored belly and short tail. The mating display occurs for days, with the male being careful to display his plumage to the female and gain her attention through short calls that grow louder as theday continues. The male’s bright plumage starts to fade after two to three months, andthen the two sexes become almost physically indistinguishable.

Sunbirds require good sources of nectar, and are similar to hummingbirds in their feeding behaviors—they are quite small (only 15cm long at their largest) so they can dart and flicker around very quickly, and even have a hummingbird-like beak that is best suited to trumpet-shaped flowers. Although the Nile Valley Sunbird population has not been officially quantified, it has been designated as stable because of the frequency of sightings and the birds’ large range of habitat. Sunbirds are best known for being frequent visitors to the famous walled gardens of Oman, Yemen, Saudi Arabia, and Egypt.

Have been using Raphael on and off for the past 3 years but continue to struggle with some of the more complex topics such as sets, data binding and events.

As I have never been disappointed by an O'Reilly Press book, I took the plunge in the hope of having some of my questions answered.

The book is wonderfully written with just enough humuor to render it a carefree romp! Complex issues are tackled with insight & simplicity, and the examples have enough depth to get you thinking and to see how the library operates.

Demonstrating code via JSFiddle was exceedingly helpful, as were the references to tools such as SVG To Raphael and ColorBrewer.

Much of the early part of the book is more suited to a novice but it is still enlightening to see the coding patterns, functional programming styles and simplifications used by Chris.

I received a big leg-up reading this book so it is not a negative criticism when I say I would have preferred even more depth on some of the topics i.e. the "why" behind some of the code.

For example, traditionally we manage data using raw JavaScript objects yet Raphael objects have the capacity to store data via their .data property – when is it best to use which approach?

Similarly, when layering objects e.g. text on a box and you need the box to react to a click, you need to add event handlers for both the rectangle and the text – what about Event Delegation to reduce the number of events being managed?

I purchased this book as a reference for when I'm unplugged from the internet. At 122 pages the book is fairly short, but Chris provides a great overview of the drawing and animations apis. I found his examples were short and simple which is great. The examples also covered a range of concepts from drawing curves to animating alongs paths. Before purchasing this book I had some notions about how I needed to structure my next SVG project and his writing helped me organize those thoughts. I highly recommend this book to anyone interested in SVG.

P.S. I've also been exploring Snapsvg which is another SVG library written by RaphaelJS creator Dmitry Baranovsky. Snapsvg provides a similar api as RaphaelJS and this book's material/content can be used for both libraries.