Basic Document Layout

An SVG document can stand by itself as a self-contained graphics file. The following example defines a standalone SVG file. The file must be saved with an .svg extension.

Code explanation

Line 1: Since SVG is an application of XML, it should always include the initial XML declaration.

Line 2 & 3 : defines the Document Type Declaration (DTD) to use. The DTD describes the language and syntax allowed in SVG.

Line 4 : The <svg> tag "tell" the browser this is an SVG document. The viewport of the SVG document is defined by the width and height properties. Not defining the width and the height properties cause the svg canvas to fill the browser dimensions. The x and y properties denote where the viewport will be placed in the browser window. The x property equates to the top position of the browser and the y property equates to the left position of the browser.

Line 5 : It defines the default XML namespace for this document.

Line 6 : All the SVG content would be placed between the <svg> </svg> tags.

Line 7 : Since SVG is an application of XML, all tags must be closed. The </svg> tag closes the document.