Élément <svg> SVG

Les images svg sont créées à l'aide de divers éléments, qui sont appliqués respectivement à la structure, au dessin et à l'agencement des images vectorielles. Si svg n'est pas l'élément racine, l'élément svg peut être utilisé pour imbriquer un fragment svg indépendant dans le document courant (par exemple, un document html). Ce fragment indépendant possède une vue indépendante et un système de coordonnées.

Règles d'utilisation de l'élément svg

L'élément racine de toutes les images svg est l'élément <svg>. Les règles d'utilisation de l'élément svg sont:

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

N'oubliez pas d'utiliser deux déclarations de noms d'espace, sinon Firefox ne présentera pas le fichier svg comme une image, mais le interprétera comme tout autre fichier xml.

Éléments svg imbriqués

Les éléments svg peuvent s'imbriquer les uns dans les autres, comme indiqué ci-dessous:

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

Les éléments svg imbriqués peuvent être utilisés pour regrouper des formes svg et les placer comme un ensemble. Toutes les formes imbriquées dans un élément svg sont positionnées par rapport à la position (x, y) de l'élément svg qui les enveloppe (x, y). Vous pouvez également déplacer toutes les formes imbriquées en déplaçant les coordonnées x et y de l'élément svg enveloppeur.
Ceci est un exemple où deux rectangles sont imbriqués dans deux éléments svg. Sauf pour la couleur, les définitions x, y, hauteur et largeur des deux rectangles sont identiques. Les éléments svg enveloppants ont des valeurs x différentes. Comme la position x du rectangle est interprétée par rapport à la position x de l'élément svg qui l'enveloppe, les deux rectangles s'affichent à des positions x différentes.

Exemple en ligne

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

Attention, l'attribut de l'espace de nom est nécessaire uniquement pour l'élément racine svg. Si svg n'est pas configuré avec un espace de nom, il est supposé que tous les éléments imbriqués soient dans l'espace de nom par défaut (configuré dans l'élément racine).
Voici l'image SVG générée par l'exécution du code ci-dessus: