HTML Graphiques SVG

SVG (Graphiques Vectoriels Scalables)

SVG définit des graphiques vectoriels en XML , qui peuvent être directement intégrés dans des pages HTML.

Les graphiques SVG sont évolutifs et ne perdent aucune qualité lorsqu'ils sont zoomés ou redimensionnés :

SVG Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

SVG est pris en charge par tous les principaux navigateurs.

Qu'est-ce que SVG ?

  • SVG signifie Graphiques Vectoriels Scalables
  • SVG est utilisé pour définir des graphiques vectoriels pour le Web
  • SVG définit des graphiques au format XML
  • Chaque élément et attribut dans les fichiers SVG peut être animé
  • SVG est une recommandation du W3C
  • SVG s'intègre avec d'autres normes, telles que CSS, DOM, XSL et JavaScript

L'élément <svg>

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

SVG propose plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des polygones, du texte, et bien plus encore.

Cercle SVG

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Essayez-le vous-même »

Rectangle SVG

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
Essayez-le vous-même »

Rectangle SVG avec Opacité et Coins Arrondis

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Essayez-le vous-même »

Étoile SVG

Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Essayez-le vous-même »

Ellipse et Texte SVG avec Dégradé

SVG Désolé, votre navigateur ne prend pas en charge le SVG en ligne.

Exemple

<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Désolé, votre navigateur ne prend pas en charge le SVG en ligne.
</svg>
Essayez-le vous-même »

Différences entre SVG et Canvas

SVG est un langage pour décrire des graphiques 2D en XML, tandis que Canvas dessine des graphiques 2D à la volée (avec JavaScript).

SVG est basé sur XML, ce qui signifie que chaque élément est accessible dans le DOM SVG. Vous pouvez attacher des gestionnaires d'événements JavaScript aux graphiques SVG.

Dans SVG, chaque forme dessinée est mémorisée en tant qu'objet. Si les attributs d'un objet SVG sont modifiés, le navigateur peut automatiquement redessiner la forme.

Canvas est rendu pixel par pixel. Dans le canvas, une fois qu'un graphique est dessiné, il est oublié par le navigateur. Si sa position doit être changée, toute la scène doit être redessinée, y compris les objets qui pourraient avoir été couverts par le graphique.

Comparaison de SVG et Canvas

Le tableau ci-dessous présente quelques différences importantes entre Canvas et SVG :

SVG Canvas
  • Indépendant de la résolution
  • Prise en charge des gestionnaires d'événements
  • Bonnes capacités de rendu de texte
  • Rendu lent si complexe
  • Pas adapté aux applications de jeu
  • Dépendant de la résolution
  • Pas de prise en charge des gestionnaires d'événements
  • Mauvaises capacités de rendu de texte
  • Vous pouvez enregistrer l'image résultante au format .png ou .jpg
  • Bien adapté aux jeux graphiques intensifs

Tutoriel SVG

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