What is SVG?

SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

Today you’ll see a lot of stuff about how Canvas is the future of interactivity and HTML on the web. SVG is always pushed to the side as a sort of niche venture that few people do, whereas it has the potential to be even more useful than HTML5′s Canvas. What’s more, it’s recommended by the W3C, whereas HTML5 (Canvas) is not. In this article we’re going to be looking at the applications of SVG and how you can get started making things.

What’s the difference?

When you create something using <canvas>, you create a flat image. That means when the Javascript is finished running, nothing has a separate identity. It’s all one canvas object. An SVG object on the other hand has multiple separate objects and can therefore be easily manipulated.

Getting Started

SVG isn’t some crazy foreign language! We can just put it in a regular old HTML document. You can also create a .svg file and put your SVG stuff there, then embed it like this:

<embed src="svgfile.svg" type="image/svg+xml" />

The benefit of this is your item gets cached since its a separate file, it’s supported in HTML5, and scripting still works, so you can still manipulate it. So what exactly does SVG look like? If you’re familiar with HTML it won’t look too strange:

<svg xmlns="http://www.w3.org/2000/svg">
  <title>Some Title for our SVG</title>
  <desc>A description so we can keep everything semantic.</desc>

</svg>

The SVG tag also has a few other key attributes. Generally we define the width, height and sometimes, the viewBox. Think of the viewBox as keeping the original SVG size but changing the grid inside. So your document might be 500 pixels wide, and 500 pixels tall, but if the viewBox is 200px by 200px, the grid by which coordinates in SVG work will be different. To change your viewBox you apply this to the element which you want to have a different viewBox. You can have multiple viewBoxes within each other. A viewBox has this syntax:

viewBox="min-x min-y max-x max-y"

So this:

viewBox="50 50 150 200"

would create a grid that starts at 50 and ends at 150 horizontally, whereas it starts at 50 and ends at 200 vertically. Anything that holds elements can have a viewBox. So the <svg> tag itself, or the <g> (We’ll get to that later).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 150 200" width="500" height="500">
   ...

Raphaël

Before we continue, I’d like to mention Raphaël. This is the javascript library I have been using when experimenting with SVG. It allows you to do some cool things with SVG. So you might want to go download it from here and include it in your document, if you’re planning on playing around with it.

<script type="text/javascript" src="raphael.js"></script>

SVG Shapes

The shapes available in SVG are as follows: path, rect, circle, ellipse, polyline, line and polygon. This gives you a lot of room to manoeuver when it comes to defining and creating shapes. Groups of graphic elements which are related are grouped together with the <g> tag, but we’ll get to that later. These all go in your main SVG tag that we made earlier, usually below the description and title.

All shapes can be transformed with the transform tag. You’ll understand when we go through them all, but you just have to add the transform attribute to transform them in any way. This goes for all basic shapes and lines. All units are in degrees unless otherwise specified.

<rect transform="rotate(100)" ...
<rect transform="translate(10, 5)" ...
<rect transform="matrix(a, b, c, d, e, f) " ... /* A list of coordinates */
<rect transform="scale(x, y)" ...
<rect transform="skewX(5)" ...
<rect transform="skewY(10)" ...

and you can also apply CSS styles using traditional methods:

<rect class="cssClass" style="background: red;" ...

Basic Shapes

So lets look at creating some basic shape. The following creates a rectangle, 5px to the left and 5px down with a 5px red stroke filled with blue. The ‘x’ is the x coordinate, and the ‘y’ is the y coordinate. Just for the record, I set the svg background to #e3e3e3, so you can see the boundaries a little more easily.

Rectangle

<rect x="25" y="25" width="200" height="200" stroke-width="5" stroke="red" fill="blue" />

Rounded Rectangle

Both “rx” and ry” are used to create rounded corners. The r stands for radius.

<rect x="25" y="25" width="200" height="200" stroke-width="5" stroke="red" fill="blue"  rx="25" ry="15" />

Circle

The “cy” and “cx” represent the position of the center of the circle. “r” represents the radius.

<circle cy="50" cx="50" r="40" fill="red" stroke="blue" stroke-width="5" />

Ellipse

Again, the “cy” and “cx” is the center, whereas “rx” and “ry” is the radius on both axis (allowing ellipses)

<ellipse cy="50" cx="50" rx="40" ry="20" fill="red" stroke="blue" stroke-width="5" />

Polygon

The points are co-ordinates where you want to have a point. In the style “x,y x,y x,y .. etc”. Points are then connected up to create a shape. Points are measured from the top left corner

<polygon fill="red"  stroke="blue" stroke-width="5"
 	points="124,5 153,91 243,91 171,145
 	197,241 124,180 51,241 77,145
 	5,91 95,91" />

Text

You might want to add some text on top of your brand new SVG object, and that’s totally possible with SVG. Just do this:

<text x="5" y="200" font-size="200" font-family="Arial">
	Hey!
</text>

Don’t forget, the y coordinate is measured from the bottom of the text. So you need to give it a little headroom (that’s why I’m using 200 for the y coordinate).

Line and Path Drawing

Pretty simple right? Lets take a quick look at the other two shape types.

Single Line

This draws a 5px wide blue line from (0, 200) to (230, 400).

<line stroke="blue" stroke-width="5" x1="0" x2="230" y1="200" y2="400" />

Multipoint lines

A polyline just draws lots of lines (you can create a shape with it uses the same ‘points’ attribute as the polygon. This draws a rather odd shape. ‘points’ uses the syntax ‘x,y x,y x,y’.

<polyline stroke="blue" fill="red" points="10,5 200,100 220,150 300,250 10,5" />

Path

The Path element is a little more complex. It uses an attribute known only as d. It’s a bit of a mystery, but lets try and figure it out. There are three letters which you must use (look below to figure out what I’m talking about). Those are M: Move to, L: Line to and z: End path

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />

So the above is saying, move to (100, 100) then draw a line to (300, 100) from (100, 100), then draw another line to (200, 300) and close the path. The other stuff is pretty self explanatory.

Grouping, Markers and Use

SVG has some very useful tools, such as definitions. One of the nicest features in SVG is using markers, so lets start with that.

Markers

Definitions will not be visible to the user until you call upon them. Let me give you two examples. There is an SVG element called <marker>. It is used to attach elements onto other elements. A good reason why you might want to do this is if you have a repetitive element (an element you’re using a lot), you can state it once and attach it to any element later on. So all definitions go in an XML element called <defs>. Put this in your <svg> tag:

	<defs>
		<marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="5" orient="auto">
			<path d="M 0 0 L 10 5 L 0 10 z" />
		</marker>
	</defs>

So we’ve given the marker an ID and viewBox. The refX and refY attributes determine where the object will appear based on the viewBox. It’s a little hard to explain, but we’ve refY to 5 because we’re going to use it as an arrowhead, so it’ll be centered (5 down in a 10×10 viewBox). markerUnits is set to strokeWidth which means that the shape will be resized based on the stroke size of the object we connect it to. You’ll get it when we do the final example.

Then markerWidth and markerHeight are the size that the marker should be based on the viewBox. Don’t forget to include orient="auto". This’ll make sure it orientates itself correctly when we attach it. You can also orientate it to a certain angle, for example orient="30". So lets finish this example. Add this line after the final </defs>:

<path d="M 0 250 L 250 250 L 300 300" fill="none" stroke="black" stroke-width="15" marker-end="url(#Triangle)"  />

So we’re attaching the marker to the end with the marker-end attribute. You could very easily use marker-mid or marker-start. We target its ID (remember we said id="Triangle" earlier, so we do url(#Triangle) to attach it).

Groups

Any element that is not contained within a ‘g’ is treated (at least conceptually) as if it were in its own group.

Sometimes you’ll have several groups of shapes, some related, some not. In SVG you can group related shapes with the <g> tag, or the <symbol> tag. The difference between these is pretty simple, a symbol is not rendered, whereas a group is. The <symbol> tag is the equivalent of <g>, except it’s invisible. <symbol> can then be called later on with the <use> tag (see later). For this reason, the <symbol> tag must go inside the <defs> tag.

They’re both pretty useful if you have a group of similar objects which you want to target. Both can have viewBoxes, as well as transforms and CSS styles as we mentioned earlier. Groups and symbols are especially useful when it comes to animations.

Image and Use

<image> and <use> are both used to call upon symbols. The <image> tag can call an entire SVG file, or even an image, whereas the <use> tag cannot. xlink:href is used to call images, symbols and files. It sounds complicated but it’s really easy! The difference between these and a marker is they can reference multiple SVG shapes at once, whereas marker is more limited by what it can do. Calling an image might look like this:

<image x="0" y="0" width="150px" height="150px" xlink:href="someimage.jpg">
       <title>Me at my birthday party</title>
</image>

Or <use> might call upon an earlier symbol like this. We don’t need to use url() like we did with markers. Just target the ID of the symbol or group.

<use x="20" y="10" xlink:href="#MyRect" />

Summary

This has been quite a long tutorial, so I’ve decided to split it into parts. I’ll hopefully be able to go over this topic in perhaps a little more detail in future parts. Stay tuned! (I’ll add links here when more parts are added).