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 common 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>. Tags can written in uppercase, lowercase, or any mix of the two. The contents of elements (what appears between the start and end tags) 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. (You also have to set the stroke to equal a colour, otherwise the line won't show up.)
<svg xmlns="http://www.w3.org/2000/svg">
<line
x1="40" y1="30"
x2="240" y2="100"
stroke="black" />
</svg>Click and drag the end points or the attribute values to move the line.
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. Those guidelines suggest that you include version="1.1" and baseProfile="full" but it's not really necessary.
You can include height and width attributes to give the SVG a fixed size, otherwise it will fill the available space. You can use the viewBox attribute to define the range of values shown in the SVG.
Comments (5)
Anonymous on 14 May 2012, 6:38 p.m.
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...)
Peter on 14 May 2012, 11:29 p.m.
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.
Anonymous on 15 May 2012, 5:40 p.m.
thank you, peter.
now i´s working fine :)
lubos on 18 Jun 2012, 4:12 a.m.
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/
Anonymous on 13 Oct 2013, 5:21 p.m.
Hi! How to make a link to svg object?