SVG <svg> Element

SVG images are created using various elements, which are applied to the structure, drawing, and layout of vector images. If svg is not the root element, the svg element can be used to nest an independent svg fragment within the current document (for example, an HTML document). This independent fragment has its own viewport and coordinate system.

The rules for using svg elements

The root element of all SVG images is the <svg> element. The rules for using svg elements are:

<svg xmlns="http://www.w3.org/2000/svg"　
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">　
</svg>

Remember not to forget to use two namespace declarations, otherwise Firefox will not display the SVG file as an image but interpret it as any other XML file.

Nested SVG Elements

SVG elements can be nested as shown below:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<svg>
　　　　</svg>
</svg>

Nested SVG elements can be used to group SVG shapes together and position them as a set. All shapes nested within an SVG element are positioned relative to the position (x, y) of their enclosing SVG element (x, y). You can also move all nested shapes by moving the x and y coordinates of the enclosing SVG element.
This is an example of nesting two rectangles within two SVG elements. Besides color, the x, y, height, and width definitions of the two rectangles are the same. The surrounding SVG elements have different x values. Since the x position of the rectangle is interpreted relative to the x position of its enclosing SVG element, the two rectangles are displayed at different x positions.

Online Example

<svg xmlns="http://www.w3.org/2000/svg"
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg x="10">
　　　　<rect x="10" y="10" height="100" width="100"
　　　　　　　　style="stroke:#ff0000; fill: #0000ff"/>
　　</svg>
　　<svg x="200">
　　　　<rect x="10" y="10" height="100" width="100"
　　　　　　　　style="stroke:#009900; fill: #00cc00"/>
　　</svg>
</svg>

Note that the namespace attribute is required only on the root svg element. If no namespace is set on svg, it is assumed that all nested elements are within the default namespace (set in the root element).
This is the SVG image generated by running the above code: