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画像です: