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.