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


SVG tags

All of the SVG tags that actually write on the image area occur between the and closing tag. In this example, only a single pair 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:

x="5" y="50"
width="150" height="30"

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:

cx="20" cy="50" r="20"

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 and can be referred to and reused by id.

For example, after:

<g id= "redcircle">
cx="20"  cy="50" r="20"

You can draw a red circle anywhere using:

<use xlink:href="#redcircle"

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

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.

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" />

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:

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

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


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. 

Related articles:

A Programmer's Guide to Canvas

  Animation and scripting SVG (coming soon)

If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook, Digg or you can subscribe to our weekly newsletter.



Last Updated ( Friday, 28 October 2011 )

Copyright © 2015 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.