Graphiques HTML SVG
SVG définit les 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>
<svg>L' élément HTML est un conteneur pour les graphiques SVG.
SVG a plusieurs méthodes pour dessiner des chemins, des boîtes, des cercles, du texte et des images graphiques.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'
<svg>élément.
| Element | |||||
|---|---|---|---|---|---|
| <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>
Rectangle SVG
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>
Rectangle arrondi SVG
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>
Étoile SVG
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>
Logo SVG
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>
Sorry, your browser does not
support inline SVG.
</svg>
Différences entre SVG et Canvas
SVG est un langage de description de graphiques 2D en XML.
Canvas dessine des graphiques 2D, à la volée (avec un 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 à 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 restituer automatiquement 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 couverts par le graphique.
Comparaison entre Canvas et SVG
Le tableau ci-dessous montre quelques différences importantes entre Canvas et SVG :
| Canvas | SVG |
|---|---|
|
|
Tutoriel SVG
Pour en savoir plus sur SVG, veuillez lire notre tutoriel SVG .