SVG - Aperçu

Qu'est-ce que SVG?

  • SVG, Scalable Vector Graphics est un langage basé sur XML pour définir des graphiques vectoriels.

  • SVG est destiné à afficher des images sur le Web.

  • Étant des images vectorielles, les images SVG ne perdent jamais de qualité, peu importe la façon dont elles sont agrandies ou redimensionnées.

  • Les images SVG prennent en charge l'interactivité et l'animation.

  • SVG est une norme W3C.

  • D'autres formats d'image comme les images raster peuvent également être matraqués avec des images SVG.

  • SVG s'intègre bien avec XSLT et DOM de HTML.

Avantages

  • Utilisez n'importe quel éditeur de texte pour créer et éditer des images SVG.

  • Étant basées sur XML, les images SVG sont consultables, indexables et peuvent être scriptées et compressées.

  • Les images SVG sont hautement évolutives car elles ne perdent jamais de qualité, peu importe comment elles sont agrandies ou redimensionnées

  • Bonne qualité d'impression quelle que soit la résolution

  • SVG est un standard ouvert

Désavantages

  • La taille du format texte est plus grande que celle des images raster au format binaire.

  • La taille peut être grande même pour une petite image.

Exemple

L'extrait XML suivant peut être utilisé pour dessiner un cercle dans le navigateur Web.

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

Incorporez le XML SVG directement dans une page HTML.

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

Production

Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Dans Internet Explorer, des contrôles ActiveX sont nécessaires pour afficher les images SVG.

Comment SVG s'intègre avec HTML

  • L'élément <svg> indique le début de l'image SVG.

  • Les attributs width et height de l'élément <svg> définissent la hauteur et la largeur de l'image SVG.

  • Dans l'exemple ci-dessus, nous avons utilisé un élément <circle> pour dessiner un cercle.

  • L'attribut cx et cy représente le centre du cercle. La valeur par défaut est (0,0). L'attribut r représente le rayon du cercle.

  • Les autres attributs stroke et stroke-width contrôlent le contour du cercle.

  • L'attribut fill définit la couleur de remplissage du cercle.

  • La balise de fermeture </svg> indique la fin de l'image SVG.