Inclure du SVG dans une page XHTML

Question

Calimo

9 May 2005 à 18:05

Bonjour à tous !

Avec la sortie dernièrement d'Opera 8.0 et bientôt de Firefox 1.1, le SVG se répand et on commence à pouvoir envisager sérieusement son utilisation.
Pour ma part je souhaite l'inclure directement dans une page XHTML, exactement comme je le fais parfois pour le MathML.

Je choisis donc un doctype XHTML 1.1 + MathML 2.0 + SVG 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

et je me lance !

Voici le résultat, c'est juste un exemple avec un petit peu de MathML et un SVG basique. Ça passe correctement dans Opera (pour le SVG) et dans les versions de développement de Firefox (MathML et SVG). Le seul problème est que... la page ne valide pas Smiley decu

Le SVG est inclus tout bêtement :

	<svg xmlns="http://www.w3.org/2000/svg">
		<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
			<circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" />
			<circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)"/>
			<circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)"/>
		</g>
	</svg>

Visiblement il faut préfixer toutes les balises avec svg: pour que ça marche (et mettre xmlns:svg="http://www.w3.org/2000/svg" dans la racine) :

	<svg:svg>
		<svg:g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
			<svg:circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" />
			<svg:circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)"/>
			<svg:circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)"/>
		</svg:g>
	</svg:svg>

Quelqu'un pourrait m'expliquer pourquoi ? Parce que je ne comprend vraiment pas pourquoi ce qui marche pour le MathML ne serait pas valide pour le SVG Smiley eek

Modifié par Calimo (09 May 2005 - 18:06)

SirWam

9 May 2005 à 19:20

Ca, ça dépend de la dtd.
Dans la dtd Xhtml classique, il est possible qu'il y ait un support des balises MathML sans namespaces. Ca ne devrait pas être possible, parceque ça contredit toutes les règles des namespaces XML.
Cependant, vu la multiplication des languages qu'on pourra prochainement inclure dans un fichier Xhtml (svg, mathml, cml, Xfroms, Xinclude, Xsd, Xsl, etc) les nouveaux profils demandent qu'on mettent des namespaces et c'est tout a fait normal, sinon on ne pourrait plus s'y retrouver parmis toutes ces balises qui ont parfois les mêmes noms (ex : <text> Xslt et SVG).

++

Calimo

9 May 2005 à 21:26

Ben justement, le problème c'est qu'il y est le namespace...

 <svg xmlns="http://www.w3.org/2000/svg">

En plus ce n'est pas une DTD XHTML "classique" vu que c'est la DTD XHTML 1.1 + MathML 2.0 + SVG 1.1 Smiley rolleyes

Modifié par Calimo (09 May 2005 - 21:27)

Osnium

10 May 2005 à 07:43

c'est vrai qu'il faut qualifier les balise pour éviter les conflits mais essaye d'utiliser ca. Cela permet de préfixer ou pas les balises.
Je peux pas trop t'aider mais te donner juste une idée

elementFormDefault="qualified"    ou "unqualified"

Calimo

10 May 2005 à 12:28

Et il faut le mettre où ça ? Ça n'a pas l'air de marcher Smiley decu

Xavier

10 May 2005 à 12:40

 <svg xmlns="http://www.w3.org/2000/svg">

et

 <svg:svg xmlns:svg="http://www.w3.org/2000/svg">

sont 2 désignations correctes du point de vue XML d'un seul et même élément.

La question (dont je n'ai pas la réponse certaine) est donc de savoir si la DTD svg interdit l'une des 2 désignations. A priori il n'y a pas de raison.

Par ailleurs il est aisé de constater que le validateur accepte

<math>

et

<math xmlns="http://www.w3.org/1998/Math/MathML">

Cette fois les 2 désignations représentent 2 éléments différents, le premier correspondant à un élément math du namespace http://www.w3.org/1999/xhtml me semble douteux (il parait étonnant que le W3C ait défini 2 fois la même notion). Je penche donc pour une faiblesse du validateur.

SirWam

10 May 2005 à 18:15

a écrit :
In this DTD driver, XHTML and MathML are not prefixed, and SVG is
prefixed by default. It can be changed by redeclaring the above
parameter entities.

a écrit :

<!ENTITY % XHTML.prefixed "IGNORE" >
<!ENTITY % MATHML.prefixed "IGNORE" >
<!ENTITY % MATHML.prefix "m" >
<!ENTITY % MATHML.pref.prefixed "IGNORE" >
<!ENTITY % MATHML.pref.prefix "pref" >
<!ENTITY % SVG.prefixed "INCLUDE" >
<!ENTITY % SVG.prefix "svg" >
<!ENTITY % XLINK.prefix "xlink" >

a écrit :
Due to name collisions, XHTML and SVG, or MathML and SVG cannot be used together without prefixing either of them.

++

Xavier

10 May 2005 à 19:41

Merci pour cet éclairage.

a écrit :
Due to name collisions, XHTML and SVG, or MathML and SVG cannot be used together without prefixing either of them.

C'est quand même idiot. A quoi ça sert les namespaces ? C'est bien pour lever les ambiguités. Il n'y a aucun risque de collision avec ce code correctement inclu dans du XHTML :

 <svg xmlns="http://www.w3.org/2000/svg">
<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)"/>
<circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)"/>
</g>
</svg>

SirWam

10 May 2005 à 20:15

En fait je trouve ça logique de spécifier pour chaque balise à quel langage elle appartient.
Ca force à la rigeur et ça clarifie le code je trouve. Sinon c'est vrai je ne trouve pas de balise identiques entre deux de ces trois languages.

++

Bobe

10 May 2005 à 20:22

SirWam a écrit :
En fait je trouve ça logique de spécifier pour chaque balise à quel langage elle appartient.

C'est bien ce qu'on fait dans le morceau de code du dernier message de Xavier. On déclare un nouveau namespace par défaut pour une sous partie du document, la balise supportant l'attribut xmlns incluse. Cela me semble correcte mais je ne suis pas spécialiste en xml.
Par contre, je crois me rappeller que le problème est plus complexe pour les attributs.
Modifié par Bobe (10 May 2005 - 20:23)

SirWam

10 May 2005 à 20:36

Ca aurait été correct si la spécification ne l'interdisait pas.
Mais comme tu le dis, ça peut devenir compliqué avec des éléments qui acceptent des attributs de différents languages.
Par exemple l'élément SVG use (<use xlink:href="..." transform="..."/>).

++

Xavier

10 May 2005 à 23:16

Bobe a écrit :
je crois me rappeller que le problème est plus complexe pour les attributs

Il y a bien une différence entre attributs et éléments à l'endroit des namespaces, mais qui n'a pas à voir avec la question soulevée.

Je vais tenter d'expliquer. Il faut différentier une déclaration de namespace, du fait qu'un noeud est dans un certain namespace.
1/ La déclaration de namespace se fait sur un élément, et n'est pas possible sur un attribut. Il peut y avoir d'ailleurs autant de déclarations de namespaces que l'on veut sur un élément donné. Une déclaration de namespace c'est techniquement donner à un élément un noeud enfant de nature namespace qui enregistre une correspondance entre un préfixe et une url représentant un namespace.
2/ A coté de ça il y a l'obligation pour tout noeud de dire à quel namespace il appartient. Un noeud n'appartient qu'à un seul namespace et c'est vrai d'un élément comme d'un attribut. Dire à quel namespace appartient un noeud se fait souvent implicitement, mais un noeud est toujours dans et un seul namespace, sans relation avec les déclarations de namespaces dont il est question au-dessus.

Ecrire

xmlns="http://www.w3.org/2000/svg"

c'est faire une déclaration de namespace (et ce n'est pas possible sur un attribut) en associant l'url au préfixe vide, c'est à dire au prefixe par défaut.
Ecrire

xmlns:toto="http://www.w3.org/2000/svg"

c'est faire une déclaration de namespace en associant l'url au préfixe toto:.

Ecrire

<toto:element titi:attribut="tata"/>

c'est dire que element appartient au namespace représenté localement par toto: et que attribut appartient au namespace représenté localement par titi:
Voilà voilà.

SirWam a écrit :
je trouve ça logique de spécifier pour chaque balise à quel langage elle appartient

C'est tellement logique, que c'est en fait obligatoire (via les namespaces), et que c'est fait implicitement si ça ne l'est pas explicitement. Ce que je trouve regrettable en revanche c'est d'imposer la manière de faire. Car :

<toto:svg xmlns:toto="http://www.w3.org/2000/svg">

est parfaitement correct sur le plan XML comme l'est :

<svg xmlns="http://www.w3.org/2000/svg">

et ceci n'a absolument rien à voir avec le fait qu'il y ait des balises communes ou non au trois langages. Une éventuelle balise commune sera justement parfaitement différentiée dans un langage et dans l'autre par le fait qu'elle n'appartiendra pas au même namespace pour les deux langages.

Calimo

13 May 2005 à 12:41

Merci pour ces précisions. Je suis rassuré de voir qu'au niveau purement XML ce que j'avais fait était correct Smiley smile

Il s'agit donc d'une limitation due au doctype (c'est bien ce que je pensais). Donc... vu que les namespaces sont correctement déclarés, est-ce qu'on pourrait tout simplement imaginer de pouvoir supprimer le doctype ? Bon d'un côté ça risquerait de plus passer à la validation HTML, mais au final ce ne serait pas très grave vu qu'on fait du XHTML... qu'en pensez-vous ?

Xavier

13 May 2005 à 13:46

Oui c'est effectivement une bonne suggestion. Après tout la DTD n'est pas obligatoire sur le plan purement XML.

Bobe

13 May 2005 à 15:50

Attention cependant, dans ce cas, tu ne devras pas utiliser de références d'entités autres que numérique (ou héxadécimal). Pas de  , €, ©, etc, sauf &, <, >, " et ' qui existent nativement en XML.

Ou alors, tu inclus leur déclaration:


<!DOCTYPE html [
<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin1//EN//HTML"
   "http://www.w3.org/TR/html4/HTMLlat1.ent">
%HTMLlat1;

<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols//EN//HTML"
   "http://www.w3.org/TR/html4/HTMLsymbol.ent">
%HTMLsymbol;

<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special//EN//HTML"
   "http://www.w3.org/TR/html4/HTMLspecial.ent">
%HTMLspecial;
]>

Je ne suis pas sùr à 100% de ce morceau de code mais ça doit être quelque chose dans cegoût là.

edit: petite correction dans le code donné.
Modifié par Bobe (13 May 2005 - 18:31)

Calimo

13 May 2005 à 22:33

SirWam a écrit :

]
ENTITY % XHTML.prefixed       "IGNORE" 
ENTITY % MATHML.prefixed      "IGNORE" 
ENTITY % MATHML.prefix        "m" 
ENTITY % MATHML.pref.prefixed "IGNORE" 
ENTITY % MATHML.pref.prefix   "pref" 
ENTITY % SVG.prefixed         "INCLUDE" 
ENTITY % SVG.prefix           "svg" 
ENTITY % XLINK.prefix         "xlink"

J'ai mis

ENTITY % SVG.prefixed         "IGNORE"

et effectivement ça change quelque chose ! Les erreurs sont sensiblement différentes :

Line 21, column 12: there is no attribute "xmlns"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

...

Line 125, column 172: document type does not allow element "abbr" here

Visiblement je n'ai plus le droit d'utiliser les abbr, img, span et autres Smiley biggol

Toujours la même adresse : http://cui.unige.ch/~robin0/svg.xhtml

Effectivement ça ressemble fort comme indiqué ici à une limitation du mécanise même des DTD Smiley bawling

Donc passons-nous de ces DTD : http://cui.unige.ch/~robin0/svg_no_dtd.xhtml
C'est pas mal mais il va falloir commencer par retrouver les entités MathML pour que ∫ soit reconnu Smiley confus

Normalement il est dans http://www.w3.org/TR/xhtml1/xhtml-special.ent que j'ai appelé avec

ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special for XHTML//EN"
   "http://www.w3.org/TR/xhtml1/xhtml-special.ent"
%HTMLspecial;

mais visiblement ça ne suffit pas Smiley decu

En plus visiblement maintenant qu'on a mis un bout de doctype il faut respecter la syntaxe complète... il n'y a pas un autre moyen d'inclure les entités ?

Sujet clos

Formats, encodage, internationalisation, XML

Inclure du SVG dans une page XHTML