Elemento <svg> SVG

Le immagini SVG sono create utilizzando vari elementi, che si applicano rispettivamente alla struttura, alla disegno e alla layout dell'immagine vettoriale. Se svg non è l'elemento radice, l'elemento svg può essere utilizzato per nidificare un frammento svg indipendente all'interno del documento corrente (ad esempio, un documento HTML). Questo frammento indipendente ha una viewport e un sistema di coordinate indipendenti.

Regole dell'elemento svg

L'elemento radice di tutte le immagini SVG è l'elemento <svg>. Le regole dell'elemento svg:

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

Ricorda di non dimenticare di utilizzare due dichiarazioni di namespace, altrimenti Firefox non presenterà il file SVG come immagine, ma lo interpreterà come qualsiasi altro file XML.

Elementi SVG nidificati

Gli elementi SVG possono essere nidificati, come mostrato di seguito:

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

Gli elementi SVG nidificati possono essere utilizzati per raggruppare forme SVG e posizionarli come un insieme. Tutte le forme contenute nell'elemento svg nidificato vengono posizionate rispetto alla posizione dell'elemento svg che le contiene (x, y). Movendo le coordinate x e y dell'elemento svg circostante, è anche possibile muovere tutte le forme nidificate.
Questo è un esempio di due rettangoli nidificati all'interno di due elementi svg. Oltre al colore, le definizioni di x, y, altezza e larghezza dei due rettangoli sono le stesse. Gli elementi svg circostanti hanno valori di x diversi. Poiché la posizione x del rettangolo è interpretata rispetto alla posizione x dell'elemento svg che lo contiene, i due rettangoli vengono visualizzati in posizioni x diverse.

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

L'attributo di spazio dei nomi è necessario solo per l'elemento root svg. Se svg non è impostato alcun spazio dei nomi, si assume che tutti gli elementi annidati siano all'interno dello spazio dei nomi predefinito (impostato nell'elemento root).
Questo è l'immagine SVG generata eseguendo il codice sopra: