Exercice 12 : Initiation à SVG

I. SVG de base

Réaliser un fichier SVG contenant un rectangle, un cercle, une ligne, du texte et quelques polygones, avec les réglages par défaut.

Retour au cours

II. Rendu

Reprendre le fichier précédent en essayant les différents réglages de rendu (opacité, couleurs, formes, etc.). Utiliser des éléments <tspan> pour modifier localement l'apparence du texte.

Retour au cours

III. Texte le long d'un chemin

  1. Afficher un chemin (path) en forme de quart de cercle (quadrant inférieur droit) de rayon 250 pixels, centré au point de coordonnées 50, 50 ;
  2. Ecrire un texte le long de ce chemin ;
  3. Ecarter ce texte de 10 pixels du chemin, avec une balise tspan.

Retour au cours

IV. Eléments de groupage

Utiliser des éléments de groupage g, symbol, defs pour appliquer des commandes à des ensembles d'éléments graphiques.

Retour au cours

V. Génération d'un document SVG avec une feuille de style XSL

On travaille à partir du fichier exo12_5.xml. Le but de cet exercice est d'écrire des feuilles de style, qui transformeront ce fichier de données XML en fichier SVG.

V.1 Génération du fichier SVG

Écrire une feuille de style qui produira un fichier selon la commande <xsl:output encoding="ISO-8859-1" doctype-public="-//W3C//DTD SVG 1.0//EN" doctype-system="http://www.w3.org/TR/SVG10/DTD/svg10.dtd" standalone="no"/>, donc suivant la DTD de SVG 1.0.

Pour chaque mois, il faut afficher un élément de rectangle de largeur 1cm et de couleur lime. Sa hauteur est égale à la valeur de l'élément mois. Son coin supérieur gauche doit être à une distance égale à 50 fois le numéro du mois, plus un "offset" de 50 pixels, du bord gauche du cadre. Les bases de tous les rectangles doivent être alignées.

V.2 Génération du fichier HTML

Ecrire une feuille de style qui produit un fichier HTML. Ce fichier :

  1. affiche la liste des mois et, pour chaque mois, le nombre correspondant ;
  2. en utilisant un iframe, affiche le fichier SVG précédemment obtenu.

Retour au cours