SVG - Scalable Vector Graphics

A series of tutorial exercise that allow students to create and view SVG files. We create and render the flags from various nations.

A complete description of SVG may be found at

SVG is an XML application

The SVG (Scalable Vector Graphics) format is defined by the World Wide Web Consortium ( It provides a standard for the representation of graphical elements that is relatively easy to understand and reasonably flexible in what may be displayed. We use SVG to introduce students to the structure and syntax of XML. We note that some of the syntax used is common to all XML documents while some is specific to SVG.

Examples of XML rules

Examples of SVG rules

Scalable Vector Graphics

A vector graphics format specifies a graphic by describing how it should be rendered. Typically it will specify that a line should be drawn from coordinates (10,10) to coordinates (50,70), or that the string “Hello World” should be drawn at coordinates (20,50) in 16 point font “times”. This makes the format complex to process, but it has the advantage that the image produced is scalable - in particular it will look good if printed at high resolution and it will look good when rendered on the screen at a relatively low resolution.

Raster Graphics

The original graphics formats used on the internet, gif, jpeg and png are raster based, this means that we specify the colour of each pixel in a grid. Even though these all use very effective compression techniques we still find that the size of the file grows as the resolution of the image grows. This is a concern as we should expect resolution of printers and screens to increase over time - images produced to a fixed resolution look small or blocky when rendered on high resolution devices.

The Circle Element

The top level element should be <svg>, it may include basic shapes such as the circle. Other basic shapes are: rect ellipse line polyline and polygon.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "svg11-flat.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="" version="1.1">
  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />


We can apply a transform to many elements, we can do each of the following:

There are other transforms available (we can do a shear or an arbitrary matrix). We can include a list of transformations.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "svg11-flat.dtd">
<svg width="6cm" height="6cm" viewBox="-50 -50 100 100"
     xmlns="" version="1.1">
  <rect width="20" height="10"/>
  <rect width="20" height="10" transform="rotate(120)" fill="blue"/>
  <rect width="20" height="10" transform="translate(30,0)" fill="red"/>
  <rect width="20" height="10" transform="scale(.3,.3)" fill="yellow"/>


The <g> element may be used to group components and treat them as a single entity. We might want to do this so that a particular transformation applies to several elements.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "svg11-flat.dtd">
<svg width="9cm" height="6cm" viewBox="-5 -50 150 100"
     xmlns="" version="1.1">
 <g transform="rotate(-10)">
   <rect width="100" height="5"/>
   <text>Andrew was here.</text>