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.
Setup
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.
index.html
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> | |
| <head> | |
| <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> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| </body> | |
| </html> |
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.
default.css
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; | |
| width:500px; | |
| height:500px; | |
| 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.
init.js
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.
Prepare for IBM C1000-021 exam with our preparation material with full confidence. We offer you 100% real IBM Virtualized Storage V2 Exam IBM C1000-021 exam dumps for your better results. Prepare4Test’s C1000-021 pdf dumps are verified by IBM Gurus.
ReplyDelete