Elemento <svg> en SVG

Las imágenes svg se crean utilizando varios elementos, que se aplican respectivamente a la estructura, el dibujo y el diseño de las imágenes vectoriales. Si svg no es el elemento raíz, el elemento svg se puede usar para anidar un fragmento svg independiente en el documento actual (por ejemplo, un documento html). Este fragmento independiente tiene una ventana de visualización y un sistema de coordenadas independientes.

Las reglas de uso del elemento svg

El elemento raíz de todas las imágenes svg es el elemento <svg>. Las reglas de uso del elemento svg son:

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

Recuerde que no olvide usar dos declaraciones de nombres de espacio, de lo contrario Firefox no presentará el archivo svg como una imagen, sino que lo interpretará como cualquier otro archivo xml.

Elementos svg anidados

Los elementos svg se pueden anidar, como se muestra a continuación:

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

Los elementos svg anidados se pueden usar para agrupar formas svg y colocarlo como un conjunto. Todas las formas que se encuentran dentro de un elemento svg se posicionan con respecto a la posición (x, y) del elemento svg que las rodea (x, y). También puede mover todas las formas anidadas moviendo las coordenadas x e y del elemento svg encerrado.
Este es un ejemplo de dos rectángulos anidados dentro de dos elementos svg. Además del color, las definiciones de x, y, altura y anchura de los dos rectángulos son las mismas. Los elementos svg que los rodean tienen diferentes valores de x. Dado que la posición x del rectángulo se interpreta en relación con la posición x del elemento svg que lo rodea, los dos rectángulos se muestran en diferentes posiciones x.

Ejemplo en línea

<svg xmlns="http://www.w3.org/2000/svg"
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg　x="10">
　　　　<rect　x="10"　y="10"　alto="100"　ancho="100"
　　　　　　　　estilo="trazo:#ff0000;　relleno:　#0000ff"/>
　　</svg>
　　<svg　x="200">
　　　　<rect　x="10"　y="10"　alto="100"　ancho="100"
　　　　　　　　estilo="trazo:#009900;　relleno:　#00cc00"/>
　　</svg>
</svg>

Nota: La propiedad de espacio de nombres solo es necesaria en el elemento raíz svg. Si svg no se ha configurado con ningún espacio de nombres, se asume que todos los elementos anidados están en el espacio de nombres predeterminado (configurado en el elemento raíz).
Esta es la imagen SVG generada al ejecutar el código anterior: