svg - Element

The root element of all SVG images is <svg>.

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

The namespace declarations is important or Firefox will interpret it as plain XML.

SVG Elements can be nested
Nesting SVG elements is useful if you need to group together SVG shapes and position them as a collection.

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

Note: The namespace attributes are only needed in the root element. Everying within is assumed to be of the same namespace.

In the folling example two rectangles are nested inside two svg elements. Except for the colors the two rectangles are identical. The enclosing svg elements are used to position the rectangles.

<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:#4592C5; fill: #4592C5"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#529587; fill: #529587"/>
  </svg>
</svg>