Un exemple SVG

SVG est écrit en XML.

Exemples SVG

L'exemple suivant est un exemple simple de fichier SVG. Les fichiers SVG doivent être enregistrés avec l'extension .svg :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Voir l'exemple (seulement pour les navigateurs prenant en charge SVG)

(Pour voir le code source SVG, ouvrez cet exemple, puis faites un clic droit dans la fenêtre. Choisissez "Voir le code source".)

Explication du code :

La première ligne contient la déclaration XML. Notez l'attribut standalone ! Cet attribut détermine si ce fichier SVG est "indépendant" ou contient des références à des fichiers externes.

standalone="no" signifie que le document SVG fait référence à un fichier externe - ici, il s'agit du fichier DTD.

Les deuxièmes et troisièmes lignes font référence à ce DTD SVG externe. Ce DTD est situé à “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. Ce DTD est situé sur 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> et la balise de fermeture </svg>. C'est l'élément racine. Les attributs width et height peuvent définir la largeur et la hauteur de ce document SVG. L'attribut version peut définir la version SVG utilisée, et l'attribut xmlns définit l'espace de nommage SVG.

L'élément <circle> SVG est utilisé pour créer un cercle. Les attributs cx et cy définissent les coordonnées x et y du centre du cercle. Si ces deux attributs sont ignorés, le point de cercle est réglé sur (0, 0). L'attribut r définit le rayon du cercle.

Les attributs stroke et stroke-width contrôlent la manière dont la contour de la forme est affiché. Nous définissons le contour du cercle sur 2px de largeur, avec un bord noir.

L'attribut fill définit la couleur à l'intérieur de la forme. Nous définissons la couleur de remplissage sur le rouge.

La fonction des balises de fermeture est de fermer l'élément SVG et le document lui-même.

Remarque :Tous les balises d'ouverture doivent avoir une balise de fermeture !