Sommaire

La balise SVG SVG

Le format de dessin SVG permet de dessiner au travers de balises. Il peut être créé dans un éditeur de code ou exporté à partir d’un logiciel de dessin vectoriel.

Il est également possible d’utiliser des CSS pour l’aspect et des scripts pour l’interactivité. Dans l’exemple qui suit, le script est en fait de l’ECMAScript.

Pour la petite histoire, ECMAScript est à l’origine du JavaScript. La technologie Flash utilise ActionScript qui découle également d’ECMAScript, ce qui rend les syntaxes très proches. ECMAScript

Exemple d’infobulle Infobulle

On pourrait écrire un livre complet sur le format SVG. L’exemple suivant va permettre d’avoir une idée sur ce qu’il est possible de faire. Le fichier 7_2_infoBulle.svg montre une animation et un peu d’interactivité.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg [ 
     <!ENTITY dureeAnim "2s"> 
]>

L’en-tête du fichier SVG est du XML. Ensuite, l’entité (ENTITY) est l’équivalent d’une variable. Ici, dureeAnim mémorise le texte « 2s » qui sera la durée de l’animation faite en SVG.

<svg xmlns="http://www.w3.org/2000/svg" onload="init(evt)"  
width="480" height="300"> 
 
    <style type="text/css">  ...