Tuesday, November 18, 2008

Use, SVG et Opera

An english version of this article is available:
http://svgmpeg4.blogspot.com/2008/11/svg-and-opera.html

Actuellement, je teste des possibilités assez avancées de SVG. Pour mes tests, j'utilise principalement GPAC, Firefox et Opera et quelquefois aussi Safari. On peut trouver un comparatif des implémentations à ce lien; ce comparatif repose sur la suite de tests pour SVG 1.2 définie par le W3C. Par ailleurs, on peut trouver un état de l'implémentation de SVG dans Firefox ici. On trouve une page équivalente pour Opera ici.

L'utilisation de l'élément <use> portant sur un lien externe est une possibilité intéressante pour les animation, les interfaces utilisateurs, les schémas...

Par exemple, vous définissez une sorte de widget avec un id 'monwidget'dans un svg nommé s1.svg. Ensuite, vous pouvez l'utiliser dans un autre svg avec la ligne:
<use xlink:href="s1.svg#monwidget" />
Cela constitue une façon simple de développer des projets peu à peu de façon structurée.

On imagine bien qu'assez vite on va se retrouver dans des situations où on construit un document complexe avec un <use> externe qui lui-même contient un <use>. Par exemple, vous exploitez un widget avec un <use>, comme ci-dessus, et ce widget lui-même est défini avec un <use> pointant vers un autre fichier.

Voilà un exemple utilisé pour les tests, basé sur une structuration de type dessin animé: une scéne utilise un décor, lui-même construit à partir de divers éléments.

Fichier main.svg:
<svg
xmlns:xlink='http://www.w3.org/1999/xlink'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='800' height='600'
>
<use id='decor' xlink:href="decor.svg#decor"/>
</svg>

Fichier decor.svg (reprendre la balise svg précédente)
<svg ...>
<use id='decor' xlink:href="bulle.svg#circ"/>
</svg>

Fichier bulle.svg:
<svg ... >
<circle id='circ' cx='100' cy='100' r='50' fill='red'/>
</svg>

Ce test fonctionne bien dans GPAC, mais ni dans Firefox 3.0.1, ni dans Opera 9.62.

Pour Firefox, la page de status mentionnée plus haut dit au sujet de use: "Only works for internal document references (bug 269482).", donc les références externes ne sont pas encore supportées.

Pour Opera, le premier niveau de <use> externe fonctionne, contrairement à ce qui est dit sur le site d'Opera "Note: External references, e.g. <use xlink:href="http://www.mydomain.com/util.svg#rects">, are not supported."; il semble que Opera ne sait pas cascader les use, ce qui, concrètement, empêche pour l'instant d'en avoir un usage systématique pour la structuration des scènes.

Je crois que je vais continuer à structurer les scènes avec des use et faire une transformation xslt qui cherche les use dans un document pour les remplacer par le contenu correspondant. A suivre...

No comments: