Vous devez activer Javascript pour accéder à ce site
 

Semaine

RECHERCHE

SVG

On utilise de plus en plus la norme Scalar Vector Graphics (SVG) pour dessiner des figures en utilisant le XML. Vous pouvez déjà utiliser le format SVG avec plusieurs logiciels de bureautique ou tout simplement insérer un élément « svg » dans un document HTML comme nous allons le voir.

Voici le code d'une image SVG. Il représente un rond jaune avec le texte « INF 6450 » au centre et deux lignes par dessus formant un X (notez les éléments « rect », « circle », « text » et « line »).

<svg width="300" height="300" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0"  width="300" height="300" stroke="black" fill="red"/>

<circle cx="150" cy="150" r="150" stroke="black" fill="yellow"/>

<text x="150" y="150" style="text-anchor: middle">INF 6450</text>

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);"/>

<line x1="300" y1="0" x2="0" y2="300"
style="stroke:rgb(99,99,99);"/>


</svg>

Si vous copiez ce code dans une page web et le navigateur est compatible avec la norme svg, vous verrez alors le résultat souhaité:

../module2/exemple.pdf INF 6450

On peut utiliser la norme SVG pour générer des graphiques dynamiques au sein de pages web scriptées.


© Daniel Lemire, 2014. Tous droits réservés.