Accueil    HTML    Balise Svg
 



balise svg  Balise SVG : Scalable Vector Graphics

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <svg> permet d'intégrer directement dans une page web des dessins scalaires. Il est adapté à la génération de cartes et de graphiques (dessins 2D ou 3D, histogrammes, camembert ...) et peut être employé pour réaliser des animations.

Ses points forts sont :
    - sa facilité de mise en place avec le html
    - son support intégré dans html5
    - sa mise en forme avec xml et xslt
    - la possibilité d'utiliser le javascript et les css

Une présentation plus complète du SVG et de ses éléments de base est disponible dans la section code : voir l'article SVG.



Exemple d'utilisation de la balise svg :




Mise en place d"une barre de lecture svg avec gestion du clic :


<svg width="220" height="50" viewBox="0 0 220 50"
      xmlns="http://www.w3.org/2000/svg">
   <desc>Exemple SVG - Barre de lecture</desc>

   <rect x="5" y="5" rx="10" width="210" height="40" fill="none" stroke="grey"
      stroke-width="2" />
   <line x1="70" y1="5" x2="70" y2="45" stroke-width="3" stroke="grey" />
   <line x1="140" y1="5" x2="140" y2="45" stroke-width="3" stroke="grey" />

   <polyline fill="grey" stroke-width="0" style="cursor:pointer;" onclick="alert("play");"
      points="25,14 45,25 25,36 30,25" />
   <rect x="95" y="14" width="15" height="22" fill="white" stroke="none"
      style="cursor:pointer;" onclick="alert("pause");" />
   <polyline fill="grey" stroke-width="0" style="cursor:pointer;" onclick="alert("pause");"
      points="95,14 95,36 100,36 100,14 105,14 105,36 110,36 110,14" />
   <rect x="165" y="14" width="22" height="22" fill="grey" stroke-width="0"
      style="cursor:pointer;" onclick="alert("stop");" />
</svg>



Mise en place d'une barre de lecture svg avec gestion du clic :

Exemple SVG - Barre de lecture