HTML SVG Graphique
SVG définit des graphiques vectoriels au format XML.
Qu’est-ce que SVG ?
- SVG signifie Scalable Vector Graphics
- SVG est utilisé pour définir des graphiques pour le Web
- SVG est une recommandation du W3C
L'élément HTML <svg>
L'élément HTML <svg> est un conteneur pour les graphiques SVG.
SVG propose plusieurs méthodes pour dessiner des tracés, des cases, des cercles, du texte et des images graphiques.
Prise en charge du navigateur
Les numéros dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément <svg>.
| Élément | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Cercle
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>
Try it Yourself »
SVG Rectangle
Exemple
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
/>
</svg>
Try it Yourself »
SVG Rectangle arrondi
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>
Try it Yourself »
SVG Étoile
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>
Try it Yourself »
SVG Logo
Exemple
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</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>
Try it Yourself »
Différences entre SVG et Canvas
SVG est un langage permettant de décrire des graphiques (2D) en XML.
Canvas dessine des graphiques 2D à la volée (avec JavaScript).
SVG est basé sur XML, ce qui signifie que chaque élément est disponible dans le DOM SVG. Vous pouvez attacher des gestionnaires d'événements JavaScript pour un élément.
En SVG, chaque forme dessinée est mémorisée comme un objet. Si les attributs d'un objet SVG sont modifiés, le navigateur peut automatiquement restituer la forme.
Le canevas est rendu pixel par pixel. Dans Canvas, une fois le graphique dessiné, il est oublié par le navigateur. Si sa position doit être modifiée, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par le graphique.
Comparaison de Canvas et SVG
Le tableau ci-dessous montre quelques différences importantes entre Canvas et SVG :
| Canvas | SVG |
|---|---|
|
|
SVG Tutoriel
Pour en savoir plus sur SVG, veuillez lire notre Tutoriel SVG.
