M2 SIMI - Diffusion d'information multimedia - SVG

Auteur(s):
Sébastien CHOPLIN

dans ce qui suit, les URL suivantes sont équivalentes:

Liens utiles:

Ressources SVG:

Outils SVG:

Exercice 1: SVG

Créez un document SVG affichant le texte "Hello World!"
Utilisez un évenement onmouseover pour grossir la taille du texte quand la souris passe dessus. Il faut pour cela créer une fonction de script:
```
...
<script>
<![CDATA[
 function changeStroke(evt)
 {
 //return object with focus, as object
 var targetObject = evt.target;

 //assign value to attribute
 targetObject.setAttributeNS(null, 'stroke', 'gold');
 };
]]>
</script>
```
et utiliser l'attribut onmouseover='changeStroke(evt)' dans l'élément concerné pour appeler la fonction quand l'événement est déclenché.
Créez un document HTML incluant votre document SVG (élément <embed width="280" height="123" src="monsvg.svg" name="hello-world" type="image/svg-xml" />)
Créez un document SVG affichant un cercle plein (disque).
Dessiner un triangle (Voir http://www.w3.org/TR/SVG11/paths.html)
Créez un document SVG affichant un quart de cercle plein ainsi que la lettre "C" au centre du cercle. (Voir http://www.w3.org/TR/SVG11/paths.html)
Dessiner un graphique en forme d'histogramme représentant le tableau suivant:

Promotions Nombre d'étudiants Pourcentage

L3 MIAGE 70 38%

LPro ATC 20 11%

M1 MIAGE 50 27%

M2 OSIE 22 12%

M2 SIMI 22 12%

Total: 184 100%
Exemple de rendu (pas en svg sinon il n'y a plus rien à faire pour vous...):

Liens:
- http://www.w3.org/TR/SVG11/shapes.html#RectElement

Promotions	Nombre d'étudiants	Pourcentage
L3 MIAGE	70	38%
LPro ATC	20	11%
M1 MIAGE	50	27%
M2 OSIE	22	12%
M2 SIMI	22	12%
Total:	184	100%

Exercice 2: Génération automatique de SVG

Le but est maintenant de générer un document SVG automatiquement à partir de données situées dans un autre document XML, on utilisera donc une feuille de style XSL pour effectuer la transformation.

Utilisez le document effectif-miage.xml pour générer automatiquement le graphique de l'exercice précédent.
Changez les valeurs dans le document xml et vérifiez que votre graphique s'adapte bien.
Bonus: Générez le graphique sous forme de camembert.
Liens:
- Fonctions mathématiques
- Exemple

Exercice 3: Intégration de Smil dans SVG

En SVG la valeur d'un attribut peut être modifiée avec l'élément <set attributeName="nom de l'attribut" to="nouvelle valeur"> pour effectuer cette modification à un moment donné, on utilise l'attribut begin avec la syntaxe suivante:

  <set attributeName="visibility" to="visible" begin="600ms"/>

ici l'élément sera visible 600 milisecondes après le début de l'affichage du document SVG.

Nous verrons Smil dans le TD suivant.

Modifiez votre feuille de style XSL pour afficher une barre de votre graphique toutes les 300ms.