Getting started with SVG for HTML5
Written by Ian Elliot   
Article Index
Getting started with SVG for HTML5
SGV tags

Although canvas is the star graphic component of HTML5 we shouldn't forget SVG which provides vector graphics using tags and script. We take a programmer's look at how it all works.

 

Although the canvas element and object is the big news in HTML5, an old friend in the form of SVG has also joined the ranks of the new technologies. SVG has been around for some time but it never managed to gain enough support to become a de facto standard. 

Most browsers with the exception of IE support SVG before the HTML5 standard. Now even IE in the form of IE9 supports it. So it is, or rather it will be in the near future, safe to use SVG alongside canvas.

But wait!

Why two graphics objects?

Isn't one enough?

The simple answer is that there are two distinct types of graphics that you can create - bitmap and vector.  There has been confusion over different types of graphics formats for as long as there have been graphics applications and the web is no exception.

Until recently nearly all the graphics you would find in a web page were bitmap graphics - jpeg, png and gif format images are all bitmaps.

A bitmap is essentially just a file containing a list of color values for each pixel in the image. Generating a bitmap image is just a matter of writing a program that sets pixels to specific colors. In bitmap everything is a pixel.

What is a vector format?

Well the simple answer is that a vector format is a program that draws a bitmap. For example if you want to display a circle in a web page then the simple and most direct way of doing it is to insert a picture of a circle in .GIF or JPG format – i.e. a bitmap of a circle. An alternative way of doing the same job is to write a program that draws a circle, i.e. setting the pixels required, when the web page is loaded and this would be referred to as a vector format.

The advantage of the vector format is that the program to draw a circle is a lot smaller than the file of pixels it generates. Also as the circle is drawn each time is is needed it can use whatever bitmap resolution is available - this is often expressed as vector drawings are resolution independent or they can scale. The disadvantage of vector drawing is that it takes processor time and this can be significant for a complex graphic.

Vector formats

There are two relatively vector formats for the web – SVG and VML. VML is MIcrosoft's preferred way of doing web vector drawing and it is what Explorer supported until version 9. With the renewed adoption of SVG as a standard you can mostly forget VML in a general setting but you need to know that earlier versions of IE don't work with SVG unless you load an add-in from Adobe’s web site - www.adobe.com/svg.

For other browsers even older versions you don't need an add-in to run SVG. However you might have to enable the support. Currently FireFox has SVG disabled but this might well change very soon. Chrome supports SVG out of the box and so this is a good choice to try out this and other HTML5 features. So download the latest version of Chrome to get started and worry about checking that it works with other browsers later.

There is another difference between canvas and SVG that it is worth being clear about. SVG has lots of HTML tags that allow you to create static and animated graphics. SVG objects are also exposed in the DOM allowing you to write scripts that draw vector graphics on an SVG surface. So with SVG you have a choice of HTML or JavaScript to create and/or manipulate the graphic. There are also SVG editors and general drawing programs - Corel Draw for example - that will let you draw using standard tools and output the result as an SVG file.  Canvas on the other hand is very much a scripting object and you draw on a canvas object using JavaScript.

In this article we look at how to work with SVG using HMTL tags and in a future article we will look at scripting SVG.

So what is SVG?

Think of it as a programming language for graphics and you won’t be far wrong but this does ignore the small detail that it is based on XML. As long as you can ignore many of the details that are necessary to conform to the way XML works you can simply think of SVG as a graphics language.

To get started use NotePad or some other ASCII text editor to create the following file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/
svg width="300" height="300" >
<text style="font-size:30;
stroke: blue"
x="10"  y="170">
Hello SVG World
</text>
</svg>
</body>
</html>

Save this as hello.svg and load it into Chrome or whatever SVG equipped browser you are using. The result should be a fairly boring text message but this is the start of more interesting things.

 

HelloSVG

Hello SVG

The program is fairly simple if you ignore the usual preamble.

Concentrate on the content starting . This tag starts the SVG image area and you can see how to specify its size, you can also add an x and y co-ordinate to specify the top left-hand corner.

 

Banner



Last Updated ( Friday, 28 October 2011 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.