HTML5 SVG

SVG est défini comme des graphiques vectoriels évolutifs.

HTML5 prend en charge le SVG intégré.

HTML <svg>L'élément est un conteneur pour les graphiques SVG.

SVG dispose de plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et des images graphiques.

SVG Sorry, your browser does not support inline SVG.

Qu'est-ce que SVG ?

  • SVG signifie Scalable Vector Graphics
  • SVG est utilisé pour définir des graphiques vectoriels pour le web
  • SVG utilise le format XML pour définir des graphiques
  • Les images SVG ne perdent pas en qualité graphique lorsqu'on zoome ou redimensionne
  • SVG est une norme du World Wide Web Consortium

Avantages du SVG

Par rapport à d'autres formats d'image (tels que JPEG et GIF), les avantages de l'utilisation de SVG sont :

  • 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 redimensionnable
  • Les images SVG peuvent être imprimées en haute qualité à n'importe quelle résolution
  • SVG peut être agrandi sans dégradation de la qualité d'image

Prise en charge des navigateurs

Les nombres du tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.

Élément
<svg> 4.0 9.0 3.0 3.2 10.1

Intégrer SVG directement dans les pages HTML

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

Cercle SVG

Exemple

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

Essayez-le vous-même »

Résultat :

Étoile à cinq branches SVG

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 :

Pour en savoir plus sur les tutoriels SVG, veuillez consulterTutoriel SVG。

Différences entre SVG et Canvas

SVG est un langage de description de graphiques 2D utilisant XML.

Canvas dessine des graphiques 2D avec JavaScript.

SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher des gestionnaires d'événements JavaScript à un élément.

Dans SVG, chaque forme dessinée est traitée comme un objet. Si les attributs d'un objet SVG changent, le navigateur peut redessiner automatiquement la forme.

Canvas est rendu pixel par pixel. Dans canvas, une fois qu'une forme est dessinée, le navigateur ne s'y intéresse plus. Si sa position change, toute la scène doit également être redessinée, y compris les objets qui ont pu être couverts par la forme.

Comparaison de Canvas et SVG

Le tableau ci-dessous répertorie quelques différences entre canvas et SVG.

Canvas SVG
  • Dépendant de la résolution
  • Aucune prise en charge des gestionnaires d'événements
  • Faibles capacités de rendu du texte
  • Peut enregistrer l'image obtenue au format .png ou .jpg
  • Idéal pour les jeux riches en images, où de nombreux objets sont fréquemment redessinés
  • Indépendant de la résolution
  • Prend en charge les gestionnaires d'événements
  • Idéal pour les applications avec de vastes zones de rendu (comme Google Maps)
  • Une complexité élevée ralentit la vitesse de rendu (toute application qui abuse du DOM n'est pas rapide)
  • Ne convient pas aux applications de jeu
Autres extensions