HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

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

Tous les articles sur ce thème