[Résolu, merci à vous] Quelle DTD pour du XHTML + SVG ?

Bonjour,

Je suis actuellement sur un projet de site perso qui serait une sorte de terrain d'expérimentation pour appréhender les différentes technologies web disponibles aujourd'hui, au-dela du classique XHTML + CSS, histoire de jouer un peu avec les langages de script, la syndication, etc.

Avec le support de SVG dans Opera et Firefox, et sans doute Safari et Konqueror pour bientôt, j'ai bien envie de m'y essayer.

Seulement, quelle DTD choisir pour des pages XHTML susceptibles de contenir du code SVG ? Un classique XHML 1.0 Strict ? Du XHTML 1.1 (où le "modulaire" trouverait sa justification) ? Ou bien une DTD spécifique du genre XHTML + MathML + SVG, que j'ai vue passer sur ces forums ?

Mes recherches ne m'ont donné que des résultats flous me laissant plongé dans un abysse d'incertitude .

Histoire de compliquer la chose, je compte me servir de SPIP pour gérer le contenu du site, déjà pour me simplifier la vie, ensuite pour tester les possibilités de navigation contextuelle via mot clés et tout (et aussi parce que je suis une bouse en PHP)
Donc vraisemblablement il y aura des pages avec du SVG, d'autres sans, le tout sur un même squelette...

Solution en vue ou cause perdue ?
Modifié par 1000k (04 Aug 2005 - 22:31)

XHTML1.0 strict et <object> SVG

Slt,

en fait ça dépend de la façon dont tu veux "inclure" le code SVG. Si c'est pour afficher du SVG comment une image jpeg, gif ou png, la balise <object/> suffit.

<object type="image/svg+xml" data="chemin/image.svg">
<!-- ici le code alternatif -->
</object>

Par contre, si tu veux mélanger dans le code source ces deux languages, alors là tu dois utiliser la DTD Xhtml + Mathml + SVG.
Plus d'infos ici avec en prime une page exemple.

Par contre, seul Deer Park Alpha 1 te permettra de visualiser correctement tout ça

++

La balise <object> sera parfaite, puisqu'il s'agit d'intégrer une image SVG à une page, au fond, qui sera de l'HTML

Merci de vos éclaircissements

Bah à propos de ça, si l'<object/> n'a pas de taille fixe, sache que SVG offre un contrôle rofl comment dire ça

En gros, tu peux faire en sorte que ton SVG s'adapte à la taille de ton <object/>, avec conservation du ratio ou non.

Voilà donc si ça t'intéresse...

++

En effet, ça m'intéresse !

C'est l'un des avantages du SVG (et des formats vectoriels) sur le bitmap, d'être "scalables" sans perte de qualité. Donc autant en profiter (à moi les mises en pages élastiques ou tout est proportionnel ! )

Slt,

alors en fait c'est pas super simple

Le principe, c'est d'avoir un système de coordonnées dans lequel on dessine mais qui n'est pas la zone réellement affichée. On utilise l'attribut viewbox :

<?xml version="1.0" encoding="iso-8859-1"?>

<!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" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 0 400 300">

<ellipse cx="200" cy="150" rx="200" ry="150" style="fill:none;stroke:red;stroke-width:10px;"/>

</svg>

Dans ce cas, le dessin prendra 100% de la largeur et de la hauteur de la fenêtre mais on doit dessiner dans le système de coordonnées 0 0 400 300. L'ellipse que j'ai dessiné est donc centrée et ses bords touchent les bords de la zone de dessin. En fait on dessine comme si le width de <svg/> était 400 et le height 300.

Après, tu as l'attribut preserveAspectRatio qui permet de contrôler le ratio. Par défaut, il vaut "xMidYMid meet" ce qui veut dire qu'il y a conservation du ratio, que le dessin est centré sur l'axe des x (xmid) et l'axe des y (YMid) et que tout le dessin est visible (meet, il y a aussi slice, que tu peux essayer tu verras l'effet). preserveAspectRatio de <svg/> peut aussi prendre la valeur "none". Dans ce cas, l'image est étirée pour que le coin haut gauche du dessin corresponde avec le coin haut gauche de la fenêtre et idem pour le coin bas droit.

J'ai vraiment hate de pouvoir utiliser SVG comme background-image, justement pour ça

a+

http://skedar.dark.free.fr/programmation/svg/purcent-and-viewbox.svg
Modifié par SirWam (05 Aug 2005 - 09:43)

Juste une question : peut-on intégrer un tracé SVG à une page comme on le ferait avec une image ?

Ex : J'ai créé mon beau fichier SVG avec Inkscape, et je voudrais le mettre dans ma page web, peut-on faire <img src="truc.svg" alt="rien" title="truc" type="image/svg+xml" />, ou bien faudra-t-il copier le code SVG directement dans la page ?
Modifié par 1000k (05 Aug 2005 - 13:19)

Slt,

tu peux faire les deux, essaye avec <object/> comme montré dans le troisième POST (<img/> est voué à disparaître au profit de <object/>). Ca ne devrais pas poser de problème si tu l'as généré avec Inkscape.

++