HTML5 / SVG
L'élément svg
(introduit en HTML5) est un contenant pour les images
de type SVG (Scalable Vector Graphics).
svg
dispose de plusieurs méthodes pour tracer les lignes,
boîtes, cercles, texte et images graphiques.
Tracé d'un cercle
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
Tracé d'un rectangle
<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>
Tracé d'un carré aux bords arrondis
<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>
Tracé d'une étoile
<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>
Différences entre svg
et canvas
canvas
est un contenant destiné à intégrer des graphiques créés
via JavaScript.
svg
décrit des graphiques 2D en XML. Vous pouvez agir en Javascript
sur le contenu d'une sctructure graphique marquée par svg