SVG with RaphaelJS - RaphaelJS Elements

In the first part of this series. I introduced the RaphaelJS template that we would be using to write our programs. I recommend that you download and look through the source code for this template.

This week, I will be covering the ground work on RaphaelJS. The RaphaelJS library was created with an emphasis on browser compatibility. The framework follows the SVG W3C Recommendation, which is a set of standards that ensure images are completely scalable and without pixelation. In addition to the use of SVGs, RaphaelJS even reverts to the Vector Model Language (VML) if rendered in Internet Explorer browsers prior to IE9. Although VML is very rarely used today, the support for it does a great job of showing the attention to detail that the RaphaelJS team placed on this project when developing the library.

I emphasize this point because RaphaelJS made its mark by supporting IE6. Back in the day that was big. But with its market share reducing, IE6 has lost its dominance. That said in web development you can never discount the effect of old browsers on how your pages will render.

When creating interactive graphics with JavaScript we have 2 options. We either use canvas or SVG. Canvas allows us to use it in a 2D or 3D context however, SVG allows us use its elements as part of the DOM. This difference means that for things like games and visualizations, we would use canvas. However for applications that require interaction with the DOM like data visualizations, SVG is the preferred choice.

Although RaphaelJS is a library used to for the creation of SVGs, it was not built with a total focus on the representation of large datasets. In turn, the gRaphaël JavaScript library was created. Weighing in at a mere 10KB, gRaphaël has proven to be a worthy extension to RaphaelJS. Although it may have not been developed behind things like a force-driven algorithm, nor does it come pre-configured with any physics properties, gRaphaël is still a well respected library for reasons ranging from its cross-compatible SVG structure, to its ease of use. As long as it coincides with the task at hand, I believe that gRaphaël should always be looked at as a viable resource to complete a project.

When we go into charting, we shall look at gRaphaël. One alternative to gRaphaël is D3. D3 is a great library that also generates its charts in SVG. However, it is designed purely for data visualization.

Drawing in RaphaelJS involves creating a drawing area and drawing the element within the drawing area. The drawing area is called the viewport. Like an artist using a canvas, the visible part of the browser is the region we call the viewport. I highlight this because it is possible to draw off screen and render later on the visible area.

In certain applications like Flash, this drawing area was called a stage. The area outside the stage was where you kept assets to be preloaded as the program ran. This made programs have run time efficiency once they were loaded. Flash was the premier application for creating vector graphics for the web. Sadly, it has been losing market share so you can safely ignore it as a tool for working with vector graphics.

The changing landscape of web development has shifted to favouring a web free from plugins so HTML5 is the new standard for doing a lot of things that used to be done using Flash. SVG is part of the HTML5 specification so by implication, it takes over from Flash.

There is a lot of argument about HTML5 being a Flash killer and I will not go into that here. But what when down was that an efficient tool took over from a less efficient one. The death knell on Flash was sounded by the late Steve Jobs when he refused to allow Flash on any iOS devices in 2007. Since that time Flash has been in trouble.

When drawing in RaphaelJS, you can draw on the body of the browser itself or you can draw using a page element like the div in the last example. I personally prefer drawing on a page element and writing my code in a separate text file.

RaphaelJS supports three fundamental types of graphics elements: shapes, images, and text. Once we create a RaphaelJS Paper Object in the browser, we add the elements to it.

It is important to emphasize that RaphaelJS allows you to work with SVG created from programs like Adobe Illustrator and InkScape. This ability means that you simply need to create your graphics in one of this programs and export it to the SVG format. Adobe Illustrator is a great program from Adobe while InkScape is an open source alternative that natively outputs its images as SVG.

Adobe hired the creator of RaphaelJS Dmitry Baranovskiy who is working on an alternative to RaphaelJS called Snap.svg. RaphaelJS was designed to support old browsers. Snap.svg removes support for old browsers and makes a clean break with the past.

Snap.svg was created from the ground up by Dmitry Baranovskiy. It leverages on the lessons he has learned building RaphaelJS so it will be important in the years to come. For now, it is yet to get to version 1.0 so its not ready for prime time.

In the meantime, learn RaphaelJS. A look at the video of Snap.svg shows you that it bears similarities to RaphaelJS. Think of this like C and C++. Snap.svg is an advancement over RaphaelJS.

Once you have a file in SVG format, you can use an online program like ReadySetRaphael to reverse-engineer your SVG code into JavaScript. This will then allow you to develop the application using RaphaelJS.

Later in this series, we shall work with interactive maps. I will go through the process of creating an interactive SVG map of a country in Africa. For now just store the above information in your head.

Creating the Raphael Object

This series is about SVG with RaphaelJS. I apologize for bothering you with talk. The goal of this section of the series is to lay a theoretical foundation for what we will be doing. Now on to some code.

Once you have the library loaded in your index.html page, in your init.js file you place this command.

var paper = Raphael('container', 500, 500);

The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things. In our case, our init.js file looks like this:

	$(function(){ var paper = Raphael('container', 500, 500);
	});

So 'container' is the id of our container. However in JavaScript when we write code, we declare a variable with var. A variable is a label that you attach to a value. Sometimes, the value changes, sometimes it doesn't. But the label will always stay the same so that you can reference it throughout your code.

The command var paper assigns the RaphaelJS object to the paper variable. This allows us work with paper in our code. This reference to the paper object means that we would use paper for manipulation of our vector graphics

From the above example, we can see that the width and height of paper is 500px. If you looked at default.css carefully, you would realize that all we are doing is repeating the grid across both x and y axes.

The RaphaelJS Paper Object is assigned to a variable called paper. Through out our code, we can either assign paper to a variable or we can use it by itself. Personally, I prefer to assign variables so that I can keep track of my program logic.

After you have your paper object, in order to work with Raphael elements, you must:

1. Create a Raphael element
2. Manipulate the style of the element
3. Transform the element
4. Perform animations on the element
5. Add JavaScript events to the element

The kind of application you want to develop will determine how far down the line you go but you will have to take the first step of creating a Raphael element before you can use it.

We will go into this in the next post in this series.