Elemento <svg> SVG

As imagens SVG são criadas usando vários elementos, que aplicam-se respectivamente à estrutura, desenho e layout das imagens vetoriais. Se o svg não for o elemento raiz, o elemento svg pode ser usado para aninhar um fragmento svg independente dentro do documento atual (por exemplo, um documento HTML). Este fragmento independente possui uma viewport e um sistema de coordenadas independentes.

Regras de uso do elemento svg

O elemento raiz de todas as imagens SVG é o elemento <svg>. As regras de uso do elemento svg:

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

Lembre-se de não esquecer de usar duas declarações de espaço de nomes, pois o Firefox não apresentará o arquivo SVG como imagem, mas sim como qualquer outro arquivo XML.

Elementos SVG aninhados

Elementos SVG podem ser aninhados, conforme mostrado:

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

Elementos SVG aninhados podem ser usados para agrupar formas SVG e colocá-las em um conjunto. Todas as formas aninhadas dentro do elemento svg serão posicionadas em relação à posição (x, y) do elemento svg que as envolve (x, y). Movendo as coordenadas x e y do elemento svg envolvente, você também pode mover todas as formas aninhadas.
Este é um exemplo de dois retângulos aninhados dentro de dois elementos svg. Exceto pela cor, os valores de x, y, altura e largura dos dois retângulos são definidos da mesma forma. O elemento svg envolvente tem diferentes valores de x. Devido à posição x do retângulo ser interpretada em relação à posição x do elemento svg que o envolve, os dois retângulos são exibidos em diferentes posições x.

Exemplo online

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

A propriedade de espaço de nomes é necessária apenas no elemento svg raiz. Se nenhum espaço de nomes for configurado, todos os elementos aninhados são presumidos estar dentro do espaço de nomes padrão (definido no elemento raiz).
Esta é a imagem SVG gerada ao executar o código acima: