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.
rectelement must have a
gelement may contain other simple elements; the
rectelement may not.
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.
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.
<svg>, it may include basic shapes such as the circle.
We can apply a transform to many elements, we can do each of the following:
<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.