Categories
Vector Graphics for the Web

Drawing Complex Shapes in RaphaelJS

The SVG path element is used for drawing complex shapes in the SVG path specification. It is the most complex element for drawing built-in shapes.

Paths represent the geometry of the outline of an object using commands. They take a single attribute to describe what to draw. In SVG the path element is represented by d will take the path string. In RaphaelJS, the path string is given to the library to handle drawing.

Setup

We will use a grid of 500 by 500 pixels to cover the topic of paths. The code to create the grid is given below:

<html>
	<head>
		<title>Paths Arrow Absolute</title>
		<style>
			#container {
				clear:both;
				width:500px;
				height:500px;
				background:url(grid.jpg) repeat;
				display: block;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
		<script>
			paper = Raphael('container', 500, 500);
			// Write Code Here
		</script>
	</body>
</html>

The grid image is shown below:

Grid Image

General Commands

All path commands are used in capital letters when used in absolute coordinates and lower case when used in relative coordinates.

M or m

This is the move command. It moves the drawing of the path to a point specified by the user.

Z or z

This closes the path of a path string returning it to the point where the path started from. It ends a point by connecting it back to its initial point.

Line Commands

L or l

This draws a line from the current point to a specified end point.

H or h

This draws a horizontal line from the current point to a specified end point.

V or v

This draws a vertical line from the current point to a specified end point.

Bring it all Together

In this section, we shall draw a simple arrow. The code to do this is shown below:

paper.path("M100 200 H300 V150 L450 250 L300 350 V300 H100 Z");

Generating the arrow shown in the diagram below:

Arrow Generated with Absolute Paths

Now let us examine the commands that create the arrow.

M100 200 makes the starting point of the drawing at 100, 200 of the grid. Note that the origin of the drawing is in the top left corner of the grid.

H300 V150 draws a horizontal line to the point that is 300 from the origin and then a vertical line to 150 on the grid is drawn.

L450 250 L300 350 draws a line to point 450, 250 and then 300, 350 on the grid.

V300 H100 draws a line vertically to the point 300 on the y axis of the grid and a horizontal line of back to point 100 on the x axis.

Z completes the shape by drawing a line back to the initial point M.

To use relative paths, we would do this differently as we would have to take the relative position of each point. The advantage of using relative paths is that we can move the shape just by moving one point.

The code to draw the arrow using relative paths is shown below:

paper.path("M100 200 h200 v-50 l150 100 l-150 100 v-50 h-200 z");

M100 200 like the command for absolute paths will start the drawing at the point 100,200 of the grid.

h200 will draw a horizontal line of length 200 from the starting point. v-50 will draw a line 50 in the negative direction.

l150 100 draws a line from the current point to the tip of the arrow. l-150 100 draws a line from the tip of the arrow to the lower left section.

v-50 h-200 draws the remaining parts of the arrow. z completes the arrow.

Curve Commands

They are used for drawing curves. There are 3 types of curves in SVG, they are:

  1. Quadratic Curve
  2. Cubic Curve
  3. Arc Curve

Quadratic Curve

The quadratic curve takes in two coordinates. The first one is the location of the control point for drawing the curve and the second one is the end point for the curve.

The code:

paper.path("M100 200 Q150 100 200 200");

Will create the arc shown below:

Quadratic Curve

Suppose we move the control point to 200, 200 with the code shown below:

paper.path("M100 200 Q200 200 200 200");

We will get a quadratic curve that looks like this:

Quadratic Curve with Control Point on a Line

Note that the curve now is a straight line. This is because the control point is in the middle and on the same line with the start and end point of the curve.

The code:

paper.path("M100 200 Q150 100 200 200 T 300 200");

Will create a inverse of the curve and drag it to an end point giving the quadratic curve shown below:

Sine Wave

Cubic Curve

The cubic curve has 2 control points unlike the quadratic curve.

The code consist of a control points at 120, 160 and 180, 240 with the new position of the curve at 200, 200 is written as:

paper.path("M100 200 C120 160, 180 240, 200 200");

This creates the path:

Cubic Curve

Arc Curve

The arc curve takes the following parameters:

rx ry x-axis rotation y-axis rotation large arc flag sweep flag x y

The code:

paper.path("M100 200 A100 100, 0, 0 1, 200 200");

Will draw the curve shown below:

Drawing an Arc

Conclusion

Paths become too complex to create manually and you should use a vector graphics editor like Inkscape. However, understanding the above commands will help you understand what the program is doing under the hood.

Categories
Vector Graphics for the Web

Vector Graphics with RaphaelJS

RaphaelJS is a JavaScript library that provides an API for manipulating SVG, and SVG support for Internet Explorer. It achieves the latter by emulating SVG in Internet Explorer using VML.

SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.

Setup

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

The code below will draw a circle of radius 50 pixels at point (50, 50).

<html>
	<head>
		<title>Circle</title>
	</head>
	<body>
		<div id="container"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
		<script>
			paper = Raphael('container', 100, 100);
			var circle = paper.circle(50, 50, 25);
		</script>
	</body>
</html>

<div id=”container”> contains a div element that the library will be drawing in.

paper = Raphael(‘container’, 100, 100); creates a canvas object on which to draw. You must do this first, as all future calls to drawing methods from this instance will be bound to this canvas.

The first argument in the function Raphael() is the id of the HTML element inside of which you would like to start drawing things.

var circle = paper.circle(50, 50, 25); creates a RaphaelJS SVG object inside the thing with id=”container” that is a circle which is 50 pixels from the top and left of the paper.

RaphaelJS Elements

RaphaelJS supports 3 kinds of elements: shapes, images and text. This article will cover how to draw shapes in RaphaelJS.

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

  1. Create a RaphaelJS element
  2. Manipulate the style of the element
  3. Add events to the element using JavaScript

Drawing a Circle

The code to draw a circle from the RaphaelJS documentation is Paper.circle(x, y, r) where x is the x coordinate of the circle, y is the y coordinate of the circle and r is the radius.

The code in the Setup section above already shows how to draw a circle of radius 25 at the point 50, 50 of the paper.

To add attributes to the circle is trivial. To draw a red circle with a black stroke, we use the code shown below:

<script>
	paper = Raphael('container', 100, 100);
	var circle = paper.circle(50, 50, 25);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	circle.attr(attributes);
</script>

The generated image is shown below:

Circle
Circle with a Black Border

Drawing an Ellipse

The code to draw an ellipse from the RaphaelJS documentation is Paper.ellipse(x, y, rx, ry) where x is the x coordinate of the centre, y is the y coordinate of the centre, rx is the horizontal radius and ry is the vertical radius.

The code to draw an ellipse is shown below:

<script>
	paper = Raphael('container', 100, 100);
	var ellipse = paper.ellipse(50, 50, 40, 20);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	ellipse.attr(attributes);
</script>

The generated ellipse is shown below:

Ellipse
Ellipse with a Black Border

Drawing a Rectangle

The code to draw a rectangle from the RaphaelJS documentation is Paper.rect(x, y, width, height, [r]) where x is the x coordinate of the top left corner, y is the y coordinate of the top left corner, width is the width of the rectangle and height is the height of the rectangle.

[r] is optional and is for the radius of the rectangle if it would have rounded corners.

<script>
	paper = Raphael('container', 100, 100);
	var rectangle = paper.rect(10, 10, 50, 50);
	var attributes = {
			fill: "#FF0000",
			stroke: '#000',
			"stroke-width": 3,
			"stroke-linejoin": "round",
		};
	rectangle.attr(attributes);
</script>

The generated rectangle is shown below:

Rectangle
Rectangle with a Black Border

Conclusion

The RaphaelJS library is a very versatile library for drawing in the browser. Since its’ release in 2008, it has gone on to become a simple library for creating vector graphics in the browser.

Categories
Vector Graphics for the Web

Vector Graphics for the Web – Introduction

When working on the web, there are two types of image formats that you can use:

  1. Raster Graphics: They are made up of pixels. The more pixels you have the higher the resolution you get.
  2. Vector Graphics: They use mathematical equations to create a two dimensional image. The graphics data is described by mathematical formula.

This article will look at vector graphics and how to work with them using JavaScript.

Vector graphics can be drawn by writing code to create them. Programs such as Inkscape and Illustrator also use them in their default formats.

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 transformations uniformly, we can size or resize the image without distortion.

The SVG Specification

SVG is a language for describing vector graphics in XML. SVG is a W3C specification and works well with HTML, CSS and JavaScript.

Below is a basic skeleton of an SVG document. xlmns specifies the namespace for the document.

<svg xmlns="http://www.w3.org/2000/svg"> 
 
</svg>

To draw a circle, we specify the properties of the circle in the document. So our document becomes:

<svg xmlns="http://www.w3.org/2000/svg"> 
	<circle cx="40" cy="40" r="30" stroke="#000" stroke-width="1" fill="#FFF" />
</svg>

Saving the above in a circle.svg document and viewing in a browser will draw the circle shown below:

Circle in SVG

SVG Advantages

Resolution Independence

Vector Graphics are Resolution Independent
Vector Graphics are Resolution Independent

Scalable Vector Graphics (SVG) do not lose their resolution regardless of how they are resized.

Interactivity

You can add hyperlinks and animation to SVG by styling and scripting. SVG has a navigable DOM which allows for the creation of interactive elements.

SEO Friendly

SVG is made up of XML text files. As a result, you can add keyword descriptions and links making content more recognisable for search engines.

Adding SVG to Your Web Pages

Using the Image Tag

An SVG document can be embedded in the image tag like a regular image in HTML. An example is shown below:

<img src="circle.svg" alt="A simple circle" width="100" height="100" />

The disadvantage of this method is that the SVG will not be interactive.

Using the Object Tag

This is the best option if you intend to make the SVG interactive. The code to do so is shown below:

<object type="image/svg+xml" data="circle.svg"></object>

Using inline SVG

In this method, the code to generate the svg is placed between the body tags of the web pages.

Browser Adoption

Browser Support for SVG
Browser Support for SVG

On the Can I Use website, most modern browsers have great support for SVG with the exception of Internet Explorer.

JavaScript Tools for Working with SVG

RaphaelJS

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. It enables SVG support for IE8 and below.

JustGage

JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on RaphaelJS library for vector drawing, so it’s completely resolution independent and self-adjusting.

Oh yes, since it’s pure SVG, it works in almost any browser –
IE6+, Chrome, Firefox, Safari, Opera, Android, etc.

Snap.svg

Snap.svg was developed by the creator of the RaphaelJS library. Unlike RaphaelJS which supports IE8 and below, Snap.svg was designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Conclusion

In the world of front end 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.

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.

Categories
Book Review

RaphaelJS: Graphics and Visualization on the Web

Introduction

Scalable Vector Graphics (SVG) are an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Vector graphics are drawn on the screen mathematically. They are scalable without loss in quality.

In working with vector graphics, you can write them out from scratch or use a library like Raphaël.

Three books have been written on Raphaël they are:

  1. RaphaelJS Starter
  2. Learning Raphael JS Vector Graphics
  3. RaphaelJS

Yesterday, I finished reading RaphaelJS thus finishing my study of the books in my list.

This post is a review of the book.

Author

RaphaelJS was written by Chris Wilson in 2013.

Chris Wilson is now the Director of Data Journalism at TIME Inc.

Before Time, he was a Senior Editor at Slate News and a Columnist at Yahoo News.

Book Format

The book starts off simple with the basic template for a Raphaël project.

From that point on, once a topic is introduced, the author goes out of his way to create a project with that topic.

The projects covered include:

  1. Braille Generator
  2. Dominoes
  3. Bouncing Ball
  4. Metronome
  5. Choropleth Map
  6. The Animated Solar System

You leave this book inspired to create your own projects.

Conclusion

RaphaelJS is a great read as it will inspire you to create in the browser.

As a new year begins, if you plan to learn Data Visualisation, do look at this book.