If you're familiar with XML then skip this and go to the next section, Basic SVG File.
The SVG standard is built upon other open standards from the W3C and ECMA standards organizations. XML, CSS (Cascading Style Sheets), DOM (Document Object Model), ECMAScript (aka JavaScript) and SMIL (Synchronized Multimedia Integration Language) all contribute to the standard. At least some knowledge of XML is necessary to write SVG documents (as they are written in XML). If you've never worked with XML then I strongly suggest you go read up on at least the basics before you proceed.
CSS is integrated into SVG to provide the same styling template function it performs with HTML. The basics of CSS are not terribly complex and will be explained alongside SVG. Only in the creation of highly complex SVG documents will a deep knowledge of CSS be of benefit. ECMAScript and SMIL are only necessary once you start creating animated and live documents. <Jump to: CSS Styling>
Unless a version number is specifically stated then 'SVG' refers to SVG version 1.1.
When a SVG element example is given the attributes of the corresponding XML tag will be coded using the following conventions.
Legend
BOLD means the attribute is required.
Green means the attribute is optional.
Italics denotes a presentation attribute of the shape like 'fill' which is both optional and shared with other SVG elements.
Example: (Rectangle)
This implies without 'width="..." height="..."' the rect element will not be valid and must always appear in a rectangle declaration. The rest of the attributes are optional and the default for missing attributes will be used.
Hi there. This is a comment from the author. Yep. The amount of knowledge required to code SVG is gigantic. To work through this tutorial you'll want to brush up on your XML.