Exemple de fichier SVG

Exemple de fichier SVG

Comme tout fichier XML, le fichier SVG qui est un fichier XML doit commencer par la déclaration XML comme suit :

Remarquer l’attribut standalone qui spécifie si le SVG file « est le seul » ou contient une référence à un fichier externe.
La valeur "no" signifie que le document SVG possède une référence à un fichier externe – qui dans notre cas st la DTD.
La DTD fait référence à la DTD de SVG qui est hébergée au w3.org et contient tous les éléments SVG admissibles. Elle se présente comme suit :

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
      1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
 

Après ces deux déclarations vient l’élément (la balise) <svg> qui représente le début du graphique et qui doit être fermé avec </svg>.
Dans l’élément racine <svg> on met l’attribut sxml pour définir l’espace de noms svg et l’attribut de version pour définir la version avec laquelle on va travailler  comme suit :

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    
 

 Entre l’élément <svg> et </svg> on va mettre les élément qui définissent le graphique. Dans notre cas c’est l’élément <circle/> comme suit :

        <circle cx="100" cy="50" r="40" stroke="black"  
      stroke-width="2" fill="green" />
    
 

L'élément <circle> est utilisé pour dessiner un cercle. Les attributs cx et cy définissent le x et y coordonnées du centre du cercle. Si cx et cy sont omis, centre du cercle est définie sur (0, 0). L'attribut r définit le rayon du cercle.
Les attributs stroke  et stroke-width définissent la couleur et l’épaisseur du trait du contour d'une forme. Nous avons mis le contour du cercle avec une épaisseur de  2px, et saa couleur sur noir .
L'attribut fill se réfère à la couleur intérieur du cercle. Nous avons mis la couleur verte :

      <circle cx="100" cy="50" r="40" stroke="black" 
      stroke-width="2" fill="green" />
    
 

Voici le code final de notre fichier SVG (les fichiers SVG sont 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 xmlns="http://www.w3.org/2000/svg" version="1.1">

        <circle cx="100" cy="50" r="40" stroke="black" 
      stroke-width="2" fill="green" />

      </svg>       
    
 

Remarque : Puisque SVG est écrite en XML, tous les éléments doivent être correctement fermés !
Je veux aussi vous parler de trois autres balises (éléments) enfants de  <svg> qui sont : <title> , <desc> et <g> .
La balise < title></title>   sert à donner un titre à notre graphique. Son contenu ne sera donc pas affiché dans la zone de dessin. Mais pourra  s’afficher dans la barre d’état du navigateur ou dans une info bulle lors du survol du document SVG par la souris.
Syntaxe :
<title> Le titre de votre graphique</title>
Il n’est pas obligatoire mais pour l’accessibilité, on devrait toujours mettre un titre évocateur, comme dans un document HTML.
La balise <desc> comme pour <title> cet élément n’est pas obligatoire, mais pour des raisons de SEO il faut toujours mettre la balise <desc>, elle sert à donner une description de notre graphique SVG.

Exemple : <desc> Un logo animé en SVG </desc> .

L’élément <g> là c’est différent cet élément sert à grouper des traés qui ont le même style css pour ne pas avoir à répéter ce style sur chaque tracé comme on va le voir dans la plus part de nos exemples dans les chapitres à venir.