How to use vector graphics on your website

Specifically conceived as a vector illustration format for the web, Scalable Vector Graphics (or SVG) has been around since 1999. So why is it news today?

The answer is inline SVG. Using HTML5, you can code SVG directly in your page, with access to DOM elements for scripting, styling and formatting by default. SVG's scalability and open source availability have made it popular on mobile platforms, but the format has never really made the transition to desktops.

With HTML5 making the underlying code transparent for developers to tweak and transform, that may well change. At last, Flash has a real challenger – one that doesn't require a plug-in to work. It's still early days. Browser support is currently patchy and support for SVG's built-in animation attributes is some way off, but we can give you a head start with this powerful tool.

Simple code

SVG is an XML based language, so it looks very much like HTML markup. To an extent, it's possible to code basic images manually. Let's start with a simple circle.

We begin with the <svg> tag, followed by a declaration of the SVG XML namespace. After that, we define height and width attributes for the image. In this case, we've limited the image size to a canvas of 300 x 300 pixels. Line two is where the interesting stuff starts.

We create a circle using the SVG <circle> tag. The attributes 'cx' and 'cy' plot the centre of the shape in pixel co-ordinates, with 0 at the top left of the canvas. The attribute 'r' is the circle's radius – here it's 150 pixels. We fill the circle with red using the standard CSS colour name. We could have used HEX or RGB notation instead.The <svg> tag is closed, and just to show that the code is truly inline, we have a line of text below it.

Styling with inline CSS

The code here is inline – part of the document structure – which means we can target it in several interesting ways. Firstly, we're able to use CSS to style what we've already got quickly. For example, lets replace the <circle> tag and its attributes in the last block of code with the following:

This time we've created a blue square with a five-pixel dark grey border. All the magic is in the 'style' declaration, which uses standard CSS attributes to define fill colour, stroke colour and stroke width. You may notice that this time around we gave absolute 'x' and 'y' co-ordinates rather than centred 'cx' and 'cy' co-ordinates. The top left corner of our square aligns with the 'x' and 'y' values.

To make our code cleaner, we should separate style from content, and that's possible with inline SVG.First, we give the SVG object a CSS class and remove the inline styling. The contents of the <rect> tag now look like this:

Next, we insert this block of CSS into the <head> section of our document. We've tweaked the colour scheme so you can see the difference since last time;

INLINE CSS: Inline CSS enables us to add a fill colour and an editable stroke around the exterior of the object. CSS3 transitions are also possible here

External stylesheets

Alternatively, we can place the CSS style declaration on its own in an external style sheet like this:

rect.mySquare {stroke: darkcyan; fill: lightblue; stroke-width: 5px;}

Save the document as 'svgstyle.css' in the same directory as the HTML file containing the inline SVG object. Next, insert the following link after the <head> tag in your HTML document:

Formatting and content are now entirely separate. That should help keep the W3C happy.

If the thought of having to hand-code vector shapes into your page is making you want to give up building websites altogether, then fret not. We've taken you through these basics so you'll understand how the juicier stuff works.

Yes, inline SVG embedding enables you to code simple images and shapes manually, style them with CSS and even target elements with JavaScript, but it's even more rewarding when the SVG image in question is a fully rendered vector illustration.

A quick tip here: open source application Inkscape (www.inkscape.org) is a comprehensive vector-drawing tool that outputs to SVG. If you want to build your own images for inline inclusion, it's a great program to use.

Another brilliant resource is the Open Clip Art Library (www.openclipart.org). Point your browser at the site and find a piece of clip art that takes your fancy. When you've found a candidate, select it, click 'Download SVG' and save a copy locally.

VIEWBOX: Having SVG code inline enables you to edit elements directly. Try adding a viewbox with bespoke height and width to the <svg> tag, for example.

Paste into your page

Open your favourite text or code editor and load the SVG image. You'll see that it's the same kind of markup that we've been working with already. Highlight the code from the opening <svg> tag to the end of the document and hit [Ctrl]+[C] to copy it. Now begin a new HTML document and paste the SVG code between the <body> tags.

VIEWBOX: Having SVG code inline enables you to edit elements directly. Try adding a viewbox with bespoke height and width to the <svg> tag, for example.

Alternatively, you can paste the code anywhere you want into an existing page. Save the HTML document and open it in your web browser. With HTML5's inline SVG capability, the image should be right there, embedded in your page. And because the SVG code is in your page, it can be further tweaked, styled and scripted using the techniques we've explored.

Article continues below