Scalable Vector Graphics SVG

Although the canvas element and object was 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 IE9 and later support it. So it is fairly 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 that draws the 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.

There is also the small matter of creativity. Bitmaps can be “painted” using brushes that modify the color of the pixels they pass over. With a bitmap you paint areas.

A vector drawing on the other hand you draw geometric outlines and then use fill tools or operators to achieve blocks of color. Vector drawing is more like technical drawing but don’t underestimate it for creative work – it can produce amazing results.

Vector formats

There is an older vector graphic standard VML. VML was 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. For other browsers even older versions don’t need an add-in to run SVG. All modern browsers support SVG out of the box. 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 – InkScape 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 HTML 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 width="300" height="300" >
 <text
 x="10"  y="170">
 Hello SVG World
 </text>
 </svg>
 </body>
 </html>

Save this as hello.html 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.

Hello SVG The program is fairly simple if you ignore the usual preamble.
Concentrate on the content starting <svg>. 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.

SVG tags

All of the SVG tags that actually write on the image area occur between the <svg> and closing tag </svg>.

In this example, only a single pair of tags occur and you can see how these work to position and determine the way the text looks.

If you want to add a real graphics component to the program try the tag:

<rect
 x="5"  y="50"
 width="150" height="30"
 style="fill:yellow"
 />

This draws a yellow filled rectangle at 5,50. The only really new feature here is the use of the “style” to set the fill colour. You can use additional parameters to set outline colour, width and pattern for example.

There are other shape elements like that you can use and they all follow the same general format. For example, to draw a circle simply add:

<circle
 cx="20"  cy="50" r="20"
 style="fill:red"
 />

Notice that what is drawn on top of what, without going into much more complexity, is simply controlled by the drawing order.

A Mondrian like creation – the painter not the language!
The complete list of predefined shapes is:

• rect
• circle
• ellipse
• line
• polyline
  and
• polygone

and it is fairly easy to define new tags for custom shapes and group instructions together.

Subroutine shapes

If you are going to draw anything complicated then it is worth grouping it together as a sort of graphics subroutine. Any list of tags between <g> and </g> can be referred to and reused by an id. For example, after:

<g id= "redcircle">
 <circle
 cx="20"  cy="50" r="20"
 style="fill:red"
 />
 </g>

You can draw a red circle anywhere using:

<use xlink:href="#redcircle"
 transform="translate(50,50)"/>

You can include other elements in the “transform” attribute such as scale, rotate and skew.

Notice that the circle in the group is also drawn. If you don’t want the graphic drawn use the <def> tag in place of <g>.

As well as vector graphic primitives and groups of primitives you can also load entire SVG files and bitmap files. The image tag will read in and display an SVG file or a bitmap – PNG or JPEG.

For example, assuming that the file test.png is stored in the same directory as the .svg file we can write:

<image xlink:href="/test.png
 x="10" y="10"
 width="200" height="200"
 />

The result is the bit map positioned at x,y and scaled to fit the height and width specified. Notice that the image tag goes between the svg tags just like an other SVG drawing operation i.e. it is not an HTML element.

Sophisticated SVG

At this point you might be just beginning to think that this is all a bit primitive. After all who needs another way to draw a circle? You will have to take it on trust that SVG is a very powerful graphics language that includes some very advanced facilities including animation commands. The path command (in which L is read as LineTo and M is short for Move) allows you to draw arbitrary Bezier or polyline path. For example this draws a triangle:

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

The following path draws a short Bezier curve:

<path  d="M100,200 C100,100 250,100 250,
 200 S400,300 400,200" />

The commands available are:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

 
Of course it would be drawn in the same place every time but you can also specify x,y, width and height to map the drawing to the specified rectangle. Only slightly more advanced is the use of the “transform” attribute to scale, translate and rotate the graphic.

You can also define your own fills. For example a simple linear gradient fill can be defined as:

<defs>
 <linearGradient id="MyGradient">
 <stop offset="5%" stop-color="#F60" />
 <stop offset="95%" stop-color="#FF6" />
 </linearGradient>
 </defs>

Using it is just a matter of giving its URL as in:

<ellipse cx="200" cy="70"
 rx="59" ry="50"
 fill="url(#MyGradient)" />

Linear gradient – no problem.

Radial gradients are just as easy and you can define pattern fills. There are also advanced filter effects, animation controls, clipping, masking and the ability for script languages to interact with graphical objects via events and properties.

These will be explained in future articles but for now let’s leave the story here.

More Information

• Scalable Vector Graphics

Last updated on November 30th, 2022