Friday, 13 February 2015

SVG with RaphaelJS - Introduction

Welcome to this series on SVG with RaphaelJS. I am Truston Ailende and over the period of the next 16 weeks, I will be taking you on a journey into the world of Scalable Vector Graphics (SVG). As a prerequisite, I expect that you know JavaScript. Beyond that, stick with me and I will take you through this course. At the end of this course, I expect that you will develop an appreciation of the power of SVG in creating web applications.

Scalable Vector Graphics (SVG) involve drawing objects using mathematical functions. In order to make this happen, in the past we would write SVG documents manually, or use a tool like InkScape that creates images in the SVG format and renders it to the browser.

This method was slow, painful and tedious. Mistakes were easy to make and there was a a limitation on how much could get done. To deal with this tedium we use RaphaelJS because it takes care of outputting our graphics in SVG at the browser level.

RaphaelJS is a JavaScript library that allows you to work with vector graphics using JavaScript. It acts like an interface for creating SVG without having to write code in SVG. Think of it like jQuery. Without a wrapper like jQuery providing a layer of abstraction for JavaScript, you would have to write raw JavaScript to do anything on the web. If you think of how tedious writing JavaScript is and multiply that by 10, you will have an idea of the difficulty of SVG.

RaphaelJS is a vector graphics library which is used to draw objects in the browser. In the world of frontend web development, there are a plethora of tools that are used to create interactive web applications. This tools involve working with HTML5, CSS3, SVG and WebGL.

RaphaelJS is great for creating Scalable Vector Graphics (SVG). The main advantage of SVG is that it allows you create graphics without the loss of resolution when they are resized. This might not seem like much to you but in a world of responsive design, it represents a big opportunity.

Take for example the map of Africa shown above. It is a composite shape made up of individual paths that each represents a country. With this knowledge, we can apply a transformation to the individual countries to any size. Provided we do the transformation uniformly, we can size or resize the image without distortion.

As we move on, we will cover the concepts that will allow us create such maps. For now lets get started.


RaphaelJS is a JavaScript library so setting it up requires simply connecting to it in your code by linking to it.

For this course, we shall use the following template to work with RaphaelJS. It is available on GitHub. The template structure is shown below

From the above, you can see that we have a HTML file at the root of our template. In this template, I observe the principle of separation of concerns. I will give an overview of the template by starting with the index.html file.


This is a simple HTML file at the root of the template folder. It is an HTML file that contains all the code to make the project work. In the spirit of separation of concerns, I have separated the code into CSS and JavaScript to this end, all the needed files can be found in their respective folders.

The code in index.html is given below

<!DOCTYPE html> <html>
<meta charset="utf-8">
<title>RaphaelJS Template</title>
<link rel="stylesheet" href="css/default.css">
<script src="js/jquery.js"></script>
<script src="js/raphael.js"></script>
<script src="js/init.js"></script>
<div id="container"></div>

Line 1
<!DOCTYPE html> is a DOCTYPE declaration that lets the browser know that the document to be rendered is an HTML5 document.

Line 6
<link rel="stylesheet" href="css/default.css"> is a link to the CSS stylesheet for this page. href="css/default.css" means that the stylesheet is in the css folder which you saw in the template file structure.

Line 7, 8, 9
<script src="js/jquery.js"></script> is a script tag in HTML. Script tags are used to inform the browser that code to be executed is JavaScript code. src="js/jquery.js" means that the code is found in the js folder of our template. The same logic applies to js/raphael.js and js/init.js. However, I must add that init.js is the file we will be writing our code in.

Line 12
<div id="container"></div> contains a div element. The id of the div is "container" this allows jQuery identifies the drawing area. In HTML5, this drawing area is called a canvas. However when working with SVG, the term paper is used to avoid confusion.

This is the styling for our page, all I did was center the paper and display a grid image on the background. You can view the code here

#container { clear:both;
background:url(../img/grid.jpg) repeat;
display: block;
margin: 0 auto;

The # value in front of the container means that it is an id value. With this we allow the CSS identity the id of an element in HTML and style it. By doing this, we place a grid on the background in an area of 500 by 500 pixels.

This is where we will be editing our code. Doing it this way makes it easier to teach concepts. The code for our template looks like this

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

It is in this file that I keep my JavaScript code. In the first line of code, we use the jQuery function to ensure that the page has loaded before any operation can commence.

In line 2, var paper = Raphael('container', 500, 500); creates a drawing area of 500 by 500 pixels. It is here that the grid is drawn.

So that is it for this week. You can get the code from GitHub. This is Truston Ailende. Thank you for your time.

No comments:

Post a Comment