The SVG Document

SVG is based on XML so consists of a series of nested elements within an SVG element. You can create an svg file by creating a new text file and changing its file extension to .svg. You can edit its contents in any text-editor.

Elements

Elements consist of a start tag, which looks something like <tag>, some contents, and an end tag, which looks like </tag>. Tags must always be closed. If an element does not contain any contents (which is more in SVG than in most XML documents), then is can simply be a self-closing tag, which looks like this <tag />. Some examples of tags used in SVG are <line>, <rect> <text> and <style>. The contents of elements can be text (for example, in <text> tags) or other elements (for example in the group tag, <g>).

Attributes

Tags may also contain attributes, which define the properties of that element. Attributes have the form name="value", and are put in a start tag, after the tag's name but before the closing '>'. An element can contain any number of attributes and each must be separated by a space (or any amount of whitespace, including new lines). Elements have specific attributes that determine their appearance. If any of these attributes is missing it will default to zero. For example, a line is defined by the attributes x1, y1, x2 and y2. Changing the value of these attributes changes the appearance of the element. [EDIT: You also have to set the stroke to equal a colour, otherwise the line won't show up.]

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">

    <line x1="40" y1="30" x2="240" y2="100" stroke="black" />

</svg>

There are additional attributes that can control the style of elements, which I will describe later. Attributes that have no function are ignored (which can be useful for scripting effects).

The SVG tag

As stated at the beginning of this post, an SVG consists of element inside an SVG element. An SVG must therefore start with <svg> and end with </svg>. Often SVGs will start with a DOCTYPE declaration, but according to these SVG authoring guidelines there's no need. Instead you should include the following attributes which tell the program interpreting your document how to do so:

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">

You can also include width and height attributes here which will determine the dimensions of the SVG. The following is an example of a complete SVG document containing a line. In the next tutorial I will cover all the shape elements.

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     width="400" height="180" >

    <line x1="40" y1="30" x2="240" y2="100" stroke="black" />

</svg>