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