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>

Comments

Hi Peter!

First, thanks for your tutorial,  I really like it.

But I´ve got a question: which prgramm du you use to display your svg´s?

I tried it with Opera 11.62, but it shows nothing, if I run the code(but I can see your svg´s...)

My mistake, I foolishly didn't test the examples before putting them up and forgot that you have to give lines a stroke colour because the default is none. Thanks for pointing out the problem, I've ammended the examples.

thank you, peter.

now i´s working fine :)

Hi Peter, thank you for the nice SVG tutorials. I just wrote up a little article on plotting a smooth line through a set of prescribed points and included an SVG demo that illustrates the technique. It's quite amazing what's possible with little SVG and Javascript! http://www.particleincell.com/2012/bezier-splines/

Hi! How to make a link to svg object?

Post new comment

The content of this field is kept private and will not be shown publicly.