Zoo tutorials: [ SQL | Java | Linux | XML ]

A Gentle Introduction to xml

Introducing SVG

SVG is an XML application

The SVG (Scalable Vector Graphics) format is defined by the World Wide Web Consortium (w3.org). 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

An open tag is marked with < and >
Tag names must not contain spaces.
Attribute values must be quoted with " or ' marks.
The <?xml ... ?> tag and the <!DOCTYPE ... > tag are optional.

Examples of SVG rules

The top level tag must be svg.
The rect element must have a width and a height attribute.
The g element may contain other simple elements; the rect element may not.
The width attribute must be numeric.

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.

Transform

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

translate(30,5): A translation is a shift - we move the shape right 30 and down 5.
scale(.3,.3): Scale makes the shape bigger or smaller.
rotate(120): We rotate the shape 120 degrees clockwise.

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

Grouping

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.