Dans ce chapitre un peu différent des autres, nous allons parler d’extensibilité. Qu’est-ce donc ? Il s’agit de l’art d’inclure du SVG dans un autre langage, et inversement d’inclure des langages dans SVG.
Inclure du SVG dans du XHTML… est d’une simplicité étonnante ! Pour cela on doit utiliser les namespaces, ou espaces de nom. Si vous ne savez pas de quoi je parle, vous devrirez lire ce ce cours sur XML et plus particulièrement la partie traitant des namespaces. Vous y êtes ?
Mais avant de continuer, il est important de comprendre que le SVG ne peut être inclut que dans du XHTML, pas dans du HTML. En effet, les namespaces sont propres à XML (il n’existe pas de tel mécanisme pour HTML). XHTML, tout comme SVG, est un langage construit à partir de XML et s’il impose une certaine rigueur, c’est pour le bien de tous. Ainsi, vous devriez envoyer vos pages XHTML avec le type-mime adéquat (application/xml+xhtml) au moins au navigateur le supportant. Mais ceci est un autre débat. En tout cas, si vous travaillez avec du SVG, utilisez exclusivement XHTML et veillez à avoir des documents bien formés. Ainsi, vous n’aurez pas de problèmne de traitement avec les différents parseurs, le Web sera content et Tim Berners-Lee vous en sera reconnaissant. Si on pouvait éviter que SVG devienne un bordel ingérable comme le HTML, ça serait cool
Assez de blabla, voici comment on fait :
Et voici le résultat : du SVG dans du XHTML.
Notez qu’on a déclaré le namaspace de SVG sur l’élément SVG lui même, ce qui évite de s’embêter avec des préfixes. On déclare aussi le namespace de XLink, au cas où on voudrait s’en servir pour faire des liens. Enfin, on oublie pas d’indiquer la version de SVG qu’on utilise.
Je sais pas pour vous mais moi, j’adore .
Depuis quasiment le début, j’utilise des feuilles de style CSS pour styler les dessins SVG de ce cours et comme vous pouvez le voir, je ne l’ai pas fait pour l’exemple précédent. En effet, on ne peux pas placer une instruction appelant une feuille de style au beau milieu de la page, et de toute façon il y a ici ambiguité sur le langage auquel doit être appliquée la feuille de style, puisqu’il y en a deux.
Heureusement, il est tout à fait possible d’utiliser les namespaces dans les feuilles de style. Ainsi, on peut faire une feuille de contenant les styles pour le XHTML et pour SVG, et c’est ce que nous allons faire.
Dans la feuille de style CSS, on va commencer par déclarer chaque langage par :
@namespace préfixe url(chaîne du namespace);
Ensuite, il suffit de précéder chaque nom d’élément de préfixe|.
Évidemment, ça fonctionne pour d’autre langage XML comme MathML, XForms, XUL, etc.
Et voici le résultat avec en prime une petite surprise. Il y a deux styles disponibles (regardez en tout début de fichier XHTML). (pour le changer sous Firefox, Affichage -> Style de la page -> Feuille de style alternative ; sous Opera : View -> Style -> Feuille de style alternative).
Si vous ne connaissez pas bien le mécanisme des feuilles de style, consultez cet arcticle.
Parfois, on n’a pas envie de se compliquer la vie avec une inclusion directe du SVG dans le code XHTML. On peut alors utiliser la méthode classique, celle utilisée sur ce site. Le principe est le même que l’inclusion d’images dans XHTML, à ceci près qu’on utilise pas le même élément.
Pour faire cela proprement, on utilise l’élément object de XHTML. Je vous interdit formellement d’utiliser img ou embed : img c’est pour les images « raster » (comme JPEG, PNG, Bitmap, bref non vectorielles) et embed n’a jamais été normalisé. Je n’ose même pas imaginer que vous voudriez utiliser une de ces affreuse iframe, n’est ce pas ?
On doit renseigner deux attributs de object : data qui donne le chemin vers le fichier SVG, et type qui vaudra toujours dans notre cas image/svg+xml. Entre les deux balises, vous pouvez indiquer un contenu alternatif qui sera affiché si le navigateur qui télécharge la page ne supporte pas SVG, ce qui joue un peu le même rôle que l’attribut alt de l’élément img de XHTML
Si vous utilisez intelligemment les attributs permettant de contrôler le ratio, vous pouvez avoir un dessin SVG qui va s’adapter automatiquement à la taille de votre object.
Inversement, on peut souhaiter inclure différents langages XML dans du SVG : XHTML, MathML, XForms, XUL, etc. Encore une fois, ce n’est pas compliqué.
On utilise l’élément foreignObject qui décrit un rectangle dans lequel sera dessiné ce qui est inclus. Ce rectangle est déterminé par les quatre attributs x, y, width et height.
Dans ce foreignObject on écrit le langage XML de son choix avec le bon namespace.
Mais il faut aussi penser au cas où le navigateur ne connaît pas le langage cible. C’est pourquoi on utilisera toujours un switch qui aura comme premier enfant le foreignObject et ensuite une solution de rechange (un message d’erreur par exemple).
Notez enfin que foreignObject peut être stylisé et transformé comme les autres éléments de dessin SVG.
Voici le résultat : un document SVG incorporant du XHTML, du MathML et du XUL.
Notons que cela ne fonctionne pas sous Opera. Cela est dû au fait que la spécification est floue quant à l’incorporation de dialectes étrangers et du coup, c’est implémenté un peu différemment selon le moteur de rendu. Ça devrait être réglé avec SVG1.2. Vous devrez chercher un peu si vous voulez faire fonctionner cet exemple sous Opera. La partie en XUL, quant à elle, ne fonctionnera que dans Firefox et les navigateurs basés sur Gecko.
Remarquez la rotation effectuée sur les ingrédients. On peux aussi appliquer des filtres, des masques, etc.
MathML n’est pas fait pour être écrit à la main, il est fait pour être généré. Donc le prochain qui vient me dire que MathML c’est trop compliqué et qu’il faut faire quelque chose de plus simple, je l’étripe !
Si quelqu’un parvient à inclure XForms, qu’il n’hésite pas à me contacter. Je n’y arrive pas.
Pour finir parlons un peu de sémantique. Dans l’idéal, chaque langage devrait être utilisé pour ce qu’il sait faire. Ainsi, SVG est génial pour le dessin. Pour les mathématiques, c’est MathML. Pour du texte sur le Web : XHTML. Pour les formulaires nouvelle génération : XForms. Et ainsi de suite. Or, on a tendance à utiliser certains langages (ou formats) dans des contextes qui ne sont pas adaptés pour des raisons stupides : c’est beau, c’est plus simple, etc. Et on finit par être piégé par des formats pourris. Ainsi, aucun PDF n’aurait dû se retrouver sur le Web : c’est un format d’impression ! Idem pour Flash qui est une abomination. Cela contribue à dénaturer le Web, à en réduire son accessibilité (daltoniens, personne ayant du faible débit, des petits écrans, …) et son potentiel. Un travail de standardisation est toujours lent mais si vous avez suivit ce cours jusque là, cela signifie que vous croyez en SVG comme standard permettant au Web de grandes possibilités.
Néanmoins, n’oubliez pas que SVG est un format de dessin vectoriel. En conséquence, il n’est pas au texte. C’est pourquoi on ne devrait inclure du texte dans du SVG que lorsqu’il fait partie du dessin. Lorsqu’il s’agit du contenu, il est impératif de repasser par le langage fait pour du contenu textuel pour le Web : XHTML. Si vous ne savez pas trop ou se situe la limite, faites ce test : le contenu de votre site Web devrait être totalement accessible même si SVG est désactivé. Encore une fois, le Web vous dira merci !
Ce chapitre est terminé. J’espère que les possibilités de mélange de dialectes XML vous a donné envie d’en savoir plus sur ceux-ci. Les prochains chapitres sont des chapitres bonus. Mais vous en savez déjà beaucoup sur SVG.
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.
