Cette page utilise des standards internationaux du W3C : XHTML 1.1 et SVG 1.0
Attention : ces notes peuvent comporter des erreurs et ne sont pas suffisantes. Elles permettent (peut-être) à mes étudiants de retrouver l'essentiel du cours.
SVG est un langage de description de graphiques vectoriels, ce n'est pas un langage de programmation. Il est du type XML et s'intègre donc naturellement dans les pages WEB XHTML. Il s'agit d'une norme internationale non propriétaire : pérennité, interopérabilité, performances. Il est aussi facile de générer des fichiers SVG (avec XSLT ou PHP par exemple) que XHTML.
SVG ne se limite pas aux graphiques vectoriels. Il permet également
SVG peut être inclu dans un fichier XHTML ou constituer un fichier à part entière.
Voici un site WEB permettant à des internautes de stocker des photos personnelles et de lancer des diaporamas. Ce site a été réalisé par des étudiants de la licence professionnelle e-business de l'IUT de Montpellier dans le cadre de leur projet tutoré. Le but était de démontrer que ce qui était habituellement fait avec un langage propriétaire pouvait être fait avec SVG, le langage standard, ouvert et universel du W3C.
<?xml version='1.0' encoding='iso-8859-15' ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0 //EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="70" y2="20" style="stroke: black; stroke-width: 2;"/>
<ellipse cx="90" cy="60" rx="10" ry="20" style="fill: green;"/>
<rect x="10" y="30" width="40" height="30" style="fill: brown;"/>
<circle cx="120" cy="20" r="20" style="fill: yellow;"/>
<polygon points="40 90, 80 80, 60 110, 60 130, 30 110" style="fill: red"/>
</svg>
Un élément text
permet d'insérer du texte dans les images SVG. La balise text admet un attribut x et un attribut y qui permettent de spécifier la position du texte. Voici quelques attributs de style qui peuvent être définis pour du texte :
Le texte sera naturellement analysé par les moteurs de recherche.
Comme pour le XHTML on peut définir le style de chaque élément SVG. La définition du style peut se faire dans l'élément lui-même (exemple ci-dessus) ou dans un fichier indépendant.
Voici quelques attributs de style qui peuvent être définis :
L'utilisation des pseudo-classes :hover :active et :focus donne un premier degré d'intéractivité avec l'internaute
<?xml version='1.0' encoding='iso-8859-15' ?>
<?xml-stylesheet href="exemple-2.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150" cy="100" rx="100" ry="50"/>
<text x="50" y="50">Services et Réseaux</text>
<text x="50" y="150">de Communication</text>
<rect x="0" y="0" width="99" height="99"/>
<rect x="100" y="0" width="99" height="99"/>
<rect x="200" y="0" width="99" height="99"/>
<rect x="0" y="100" width="99" height="99"/>
<rect x="100" y="100" width="99" height="99"/>
<rect x="200" y="100" width="99" height="99"/>
</svg>
SVG est un format d'enregistrement. De nombreux logiciels graphiques supportent ce format. On sitera en particulier Inkscape. Des clip-arts sont disponibles en téléchargement sur le site open-clip-art. Voici quelques exemples de dessin qu'on peut y trouver au format svg :
Les images complexes peuvent peuvent peser lourd (en octets). Il est possible de les compressier avec gzip et de leur donner l'extension svgz.
L'inclusion d'une image est possible avec l'élément image. Les attributs possible sont xlink:href, x, y, width et height.
L'élément path permet de dessiner des lignes brisées ou courbées. L'élément path admet un attribut d dont la valeur est une succession de commandes et de paramètre pour le tracé de la ligne. Deux de ces commandes sont les commandes "move to" qui déplace sans trace le crayon à une coordonnée précisé en paramètre et la commande "line to" qui trace une ligne de la position courante du crayon jusqu'à une coordonnée précisée en paramètre.
exercice : tournevis
On utilise l'élément a comme pour le XHTML avec l'attribut xlink:href.
L'attribut de transformation permet toute transformation possible avec une matrice. En particulier il peut être utilisé pour des translations, des changements d'échelle ou des rotations. La transformation n'est pas une animation. L'attribut de transformation existe en particulier pour les éléments ellipse, line, rect, circle et polygon.
L'exemple ci-dessous illustre l'utilisation de la translation, de la rotation et du changement d'échelle.
Observez ci-dessous le source SVG de cet exemple :
<rect x="10" y="20" width="30" height="15" style="fill: blue"/>
<rect x="10" y="20" width="30" height="15" transform="translate(10,20)"
style="fill: red"/>
<rect x="100" y="20" width="30" height="16" style="fill: blue"/>
<rect x="100" y="20" width="30" height="16" transform="rotate(45,100,28)"
style="fill: red; opacity: 0.9"/>
<rect x="200" y="20" width="30" height="30" style="fill: blue"/>
<rect x="200" y="20" width="30" height="30" transform="scale(1.5,2)"
style="fill: red; opacity: 0.9"/>
La valeur de l'attribut transform peut être :
translate(dx,[dy])
où dx est la translation à appliquer horizontalement et dy la translation (optionnelle, d'où les crochets) à appliquer verticalement. Si ty n'est pas précisé alors il est supposé égal à 0.rotate(alpha[,cx,cy])
où alpha est l'angle de rotation (dans le sens des aiguilles d'une montre), cx la coordonnée du centre de rotation selon l'axe des abscisses et cy la coordonnée du centre de rotation selon l'axe des ordonnées. Si cx et cy ne sont pas précisés alors ils sont supposés égaux à 0.scale(sx[,sy])
où sx est l'étirement horizontal et sy l'étirement vertical. Si sy n'est pas précisé alors il est supposé égal à sx.Les variables ci-dessus sont du type nombre décimal.
L'élément animateTransforme permet lui des animations. Les attributs de cet élément sont attributName
(dont la valeur vaut toujours transform
), attributeType
(dont la valeur vaut toujours XML
), type
(valeur possible : scale, rotate, translate, skewX, skewY), fill
(freeze or remove), additive (valeur possible : sum ou replace), begin
(valeur possible : date en secondes), dur
(durée en secondes), from
(dépend du type de transformation), to
(dépend du type de transformation). Les valeurs pour les attributs from
et to
sont :
exercice : http://www.koifaire.com/, page web de l'IUT (site de Montpellier et de Béziers)