If you're familiar with XML then skip this and go to the next section, Basic SVG File.
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>
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.
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.
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.
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.