Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Basic SVG Document Tree

Basic SVG Document Tree

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
width="300" height="300">
<G id=firstGroup>
<RECT id=myBlueRect
x="40" y="20" fill="blue" />
<TEXT y="100" x="40">This is a basic SVG document!</TEXT>

Link to example 1 (basic_doc_tree.svg) - in a separate window)

The above example contains a well-formed and valid SVG document tree. The whole document can be referenced by the ECMAScript using the document object. The SVG element is the root element of the document and can be referenced using document.documentElement. Note that the group and the rectangle have an id attribute that can be used to directly addresss an element. These id's need to be unique. A strict SVG viewer or validating XML parser would show an error message if the id's in a document weren't unique.