Exemples SVG

Exemple SVG simple

Un exemple graphique SVG simple :

Voici le fichier SVG (enregistrement de fichier SVG avec extension SVG) :

Analyse du code SVG :

La première ligne contient la déclaration XML. Veuillez noter l'attribut autonome ! Cette propriété précise si ce fichier SVG est « autonome » ou contient des références à des fichiers externes.

standalone="no" signifie que le document SVG fera référence à un fichier externe - dans ce cas, un fichier DTD.

Les deuxième et troisième lignes font référence à cette DTD SVG externe. La DTD se trouve à l'adresse "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". Cette DTD se trouve au W3C et contient tous les éléments SVG autorisés.

Le code SVG commence par l'élément <svg>, y compris la balise d'ouverture <svg>. C'est l'élément racine. Les propriétés width et height définissent la largeur et la hauteur de ce document SVG. L'attribut version définit la version SVG utilisée et l'attribut xmlns définit l'espace de noms SVG.

Le <cercle> de SVG est utilisé pour créer un cercle. Les propriétés cx et cy définissent les coordonnées x et y du centre du cercle. Si ces deux propriétés sont omises, le point sera défini sur (0, 0). L'attribut r définit le rayon du cercle.

Les propriétés de trait et de largeur de trait contrôlent la manière dont le contour de la forme est affiché. Nous définissons le contour du cercle sur 2 pixels de large, avec une bordure noire. L'attribut

fill définit la couleur dans la forme. Nous définissons la couleur de remplissage sur rouge.

La balise de fermeture ferme l'élément SVG et le document lui-même.

Remarque : Toutes les balises ouvertes doivent avoir une balise fermante !