SVG with RaphaelJS - Creating Complex Shapes

Welcome to this section of the weekly series SVG with RaphaelJS. Its been a long time since I last posted anything. In that time, my company website got launched and work has started on our first game.

So far we have covered the basic shapes in RaphaelJS. We have looked at circles, ellipses and rectangles. In this section we are going to look at how to create complex shapes.

The most powerful concept in SVG is the path. You can describe any shape with the path. Any shape can be described as a set of points divided into segments.

The commands above show you that you can write SVG commands by yourself. However, to do more complex tasks, you need to use a vector graphics tool like Adobe Illustrator, Inkscape or Open Office Draw. The goal when you export you graphics is to save it in the SVG file format. In Inkscape, SVG is the default file format.

In truth, there is no limit to what we can do if we learn how to use paths in SVG. The only problem is getting past the learning curve. To do this, we will start gently.

Creating a Line

The simplest way to create a line is to use a path string, start it at a position and use the L to command to specify its end position.

	$(function(){ var paper = Raphael('container', 500, 500);
	// Create a path using a path string
	paper.path("M100,100 L200,200");
	});

You can view the result here.

Once again, the entire code for this series can be downloaded from the code repository.

Our init.js thus becomes ...

In the simplest language, the code states move your drawing pen to the point 100, 100 and draw a line to the point 200, 200.

If we replace our path string with another one like this paper.path("M 100 200 200 200 300 200");

We have successfully created a line with 3 points. If we alter the middle point so that this is our new line of code,

paper.path("M 100 200 200 300 300 200");

You can view the output here.

Placing a Z at the end of the path closes the line. Thus, we have created a triangle. Try it and see.

Drawing Curves

There are three types of curve path: quadratic Bezier curves, cubic Bezier curves and arcs. Personally, I have only worked with arcs so that is what this section will cover.

Drawing Arcs

I learned how to do this by trial and error. Only when I had accomplished what I set out to do did I finally the meaning of the commands.

I was trying to create a gauge as an example for this series. The first step in doing this is to create an arc between two points.

Please view the code repository for this series. Check the curve folder for week 6. I am not pasting it here because it is too long.

Working with Paths from a Software Program

At the end of the day, the best way to create your paths is to use a software program and extract the relevant paths that you need.

To do this, I advise you get a graphics designer to create your graphics for you and save it as an SVG file.

 All you need to look for is the point in the file where d=””. Copy out what you find in between the d value and you have your path.

I must add this requires some trial and error on your part. I will go more into this when I delve into the creation of interactive maps later in this series.