SVG inline HTML5

HTML5 prend en charge l'inline SVG.

Qu'est-ce que le SVG ?

  • SVG signifie Graphique Vectoriel Scalable (Scalable Vector Graphics)
  • SVG est utilisé pour définir des graphiques vectoriels basés sur le réseau
  • Les images SVG sont définies en format XML
  • Les images SVG conservent leur qualité graphique lors de l'agrandissement ou du redimensionnement
  • SVG est un standard du W3C

Avantages de SVG

Comparé à d'autres formats d'images (comme JPEG et GIF), les avantages d'utilisation de SVG incluent :

  • Les images SVG peuvent être créées et modifiées avec un éditeur de texte
  • Les images SVG peuvent être recherchées, indexées, scriptées ou compressées
  • SVG est extensible
  • Les images SVG peuvent être imprimées en haute qualité à n'importe quelle résolution
  • Les images SVG peuvent être agrandies sans perte de qualité

Support du navigateur

Internet Explorer 9, Firefox, Opera, Chrome et Safari supportent SVG en ligne.

Intégrer directement SVG dans une page HTML

Dans HTML5, vous pouvez intégrer directement des éléments SVG dans une page HTML :

Exemple

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Essayez-le vous-même

Résultat :

Tutoriel SVG

Pour en savoir plus sur SVG, veuillez visiter notre Tutoriel SVG.