SVG <svg> 元素

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

svg元素使用规则

所有SVG图像的根元素都是 <svg>元素。svg元素使用规则:

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

请记住不要忘记使用两个命名空间声明，否则Firefox不会将SVG文件呈现为图像，而是将其解释为任何其他XML文件。

嵌套SVG元素

SVG元素可以相互嵌套，如下所示:

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

嵌套SVG元素可用于将SVG形状分组在一起，并将其放置为一个集合。嵌套在svg元素内的所有形状都将相对于其包围svg元素的位置（x，y）定位（x，y）。通过移动封闭svg元素的x和y坐标 ，您也可以移动所有嵌套的形状。
这是一个在两个svg元素内嵌套两个矩形的示例。除颜色外，两个矩形的x，y，高度和宽度定义相同。包围的 svg元素具有不同的x值。由于矩形的x位置是相对于其封闭svg元素x位置解释的，因此两个矩形在不同的x位置显示。

在线示例

<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>

注意名称空间属性仅在根svg元素上是必需的。svg如果未设置任何名称空间，则假定所有嵌套元素都在默认名称空间（在根元素中设置）内。
这是运行上面代码生成的SVG图像: