Une version française de cet article est disponible:
http://svgmpeg4.blogspot.com/2008/11/use-svg-et-opera.html
I'm currently testing the advanced possibilities of SVG. For my tests, I'm using mainly GPAC, Firefox and Opera; Safari also sometimes. You can find a comparison of implementations at this link, which is based on the test suite for SVG 1.2 defined by the W3C. Moreover, there is a state of the implementation of SVG in Firefox here. There is an equivalent for Opera here.
The <use element on an external link is an interesting possibility for animation, user interfaces, patterns ...
For example, you define a widget with id 'mywidget' in a svg named s1.svg. Then you can use it in another svg with the line:
This is a simple way to develop projects gradually in a structured way.
We will quickly find situations where there is a complex document with an external <use> which itself contains a <use>. For example, you run a widget with a <use>, as above, and this widget itself is defined with a <use> pointing to another file.
Following is an example used for testing, based on the structure of a cartoon-type svg: a scene uses a background, itself constructed from various elements.
Main.svg file:
<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>
File decor.svg (resume the previous tag svg)
<svg ...>
<use id='decor' xlink:href="bulle.svg#circ"/>
</ svg>
Bulle.svg file:
<svg ... >
<circle id='circ' cx='100' cy='100' r='50' fill='red'/>
</ svg>
This test works well in GPAC, but not in Firefox 3.0.1, or Opera 9.62.
For Firefox, the status page above said about <use>: "Only works for internal document references (bug 269482).", So the external references are not yet supported.
For Opera, the first level of external <use> works, contrary to what is said on the Opera site "Note: External references, eg, are not supported."
It appears that the lack of common support for external <use> prevents the time when we will systematically structure SVG scenes with <use>.
I think I will continue to structure scenes with use and make a xslt transformation seeking use in a document to replace the content. To be continued ...
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...
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...
Wednesday, November 12, 2008
Link and animation
We discuss here about links from a SVG page to another page.
Une version française de cet article se trouve à http://svgmpeg4.blogspot.com/2008/11/lien-sur-animation.html.
The basic method is to surround a set of graphics primitives by <a ...>, a similar tag to html tag <a ...>. This allows for example to move from one page to another on a click on any part of the group by the primitive surrounded by <a>.
But, we would like to go further: a click on an element triggers an animation and, at the end of this animation, we go to another SVG page.
There is no simple way to do that.
Combined with the animated element which has the 'anim1' id, I'll add the following:
<ev:listener target='anim1' event='endEvent' handler='#toOtherSVG' />
So when the endEvent will be generated for the animation, the handler named 'toOtherSVG' will be executed.
The handler can be defined as follows:
<handler xml:id='toOtherSVG' type="application/ecmascript">
gotoLocation ( 'otherPage.svg');
</ handler>
There is potentially another method that would be feasible in the future. It is syntactically correct, but its operation is not specified by the current standard (even in the draft Tiny 1.2). As a result, SVG viewers may have a different behavior.
Suppose we have the following line
<ev:listener event="'endEvent'" handler="'#toOtherSVG'">
as before. But the element with id 'toOtherSVG', is not a classic handler but:
<a id="'toOtherSVG'" href="'otherPage.svg'">
This syntax is correct in SVG Tiny 1.2, but the behavior of the tag <a> as a target of the event is not defined. It would suffice to establish that if <a> tag is the target of an event, we follow the link defined by the tag.
Perhaps for a coming release of the SVG specification?
Une version française de cet article se trouve à http://svgmpeg4.blogspot.com/2008/11/lien-sur-animation.html.
The basic method is to surround a set of graphics primitives by <a ...>, a similar tag to html tag <a ...>. This allows for example to move from one page to another on a click on any part of the group by the primitive surrounded by <a>.
But, we would like to go further: a click on an element triggers an animation and, at the end of this animation, we go to another SVG page.
There is no simple way to do that.
Combined with the animated element which has the 'anim1' id, I'll add the following:
<ev:listener target='anim1' event='endEvent' handler='#toOtherSVG' />
So when the endEvent will be generated for the animation, the handler named 'toOtherSVG' will be executed.
The handler can be defined as follows:
<handler xml:id='toOtherSVG' type="application/ecmascript">
gotoLocation ( 'otherPage.svg');
</ handler>
There is potentially another method that would be feasible in the future. It is syntactically correct, but its operation is not specified by the current standard (even in the draft Tiny 1.2). As a result, SVG viewers may have a different behavior.
Suppose we have the following line
<ev:listener event="'endEvent'" handler="'#toOtherSVG'">
as before. But the element with id 'toOtherSVG', is not a classic handler but:
<a id="'toOtherSVG'" href="'otherPage.svg'">
This syntax is correct in SVG Tiny 1.2, but the behavior of the tag <a> as a target of the event is not defined. It would suffice to establish that if <a> tag is the target of an event, we follow the link defined by the tag.
Perhaps for a coming release of the SVG specification?
Lien sur animation
La question abordée ici est celle des liens d'une page SVG vers une autre page.
An english version of this article is available:
http://svgmpeg4.blogspot.com/2008/11/link-and-animation.html
La méthode de base est d'entourer un ensemble de primitives graphiques par une balise <a ...>, analogue à la balise <a ...> du html. Cela permet par exemple de passer d'une page à une autre sur un clic sur n'importe quelle partie du groupe de primitives ancadrées par le <a>.
Mais, cherchons à aller plus loin: un clic sur un élément déclenche une animation et, à la fin de cette animation, on passe à une autre page SVG.
Rien ne permet cela de façon directe.
Associé à l'élément animé d'id 'anim1', je vais ajouter l'élément suivant:
<ev:listener target='anim1' event='endEvent' handler='#versAutreSVG' />
Ainsi, quand l'évènement de fin d'animation va être généré, le handler nommé 'versAutreSVG' va être exécuté.
Le handler peut être défini ainsi:
<handler xml:id='versChambre' type="application/ecmascript">
gotoLocation('autrePage.svg');
</handler>
Il y a potentiellement une autre méthode qui serait envisageable dans le futur. Elle est correcte syntaxiquement, mais son fonctionnement n'est pas spécifié par la norme actuelle (même dans le projet Tiny 1.2). Peut-être pourra-t-on l'introduire par la suite. Il en résulte que des afficheurs SVG différents pourraient avoir un comportement différent.
Supposons qu'on a
<ev:listener event='endEvent' handler='#versAutreSVG' />
comme précédemment. Mais que l'objet d'id versAutrePage, n'est pas un handler classique mais:
<a id='versAutrePage' xlink:href='autrePage.svg' />
Cette syntaxe est correcte dans SVG Tiny 1.2, mais le comportement de la balise <a> en tant que cible de l'évènement n'est pas défini. Il suffirait de définir que si une balise a est la cible d'un évènement, on suit le lien défini par la balise.
Peut-être pour une prochaine version de la spécification SVG?
An english version of this article is available:
http://svgmpeg4.blogspot.com/2008/11/link-and-animation.html
La méthode de base est d'entourer un ensemble de primitives graphiques par une balise <a ...>, analogue à la balise <a ...> du html. Cela permet par exemple de passer d'une page à une autre sur un clic sur n'importe quelle partie du groupe de primitives ancadrées par le <a>.
Mais, cherchons à aller plus loin: un clic sur un élément déclenche une animation et, à la fin de cette animation, on passe à une autre page SVG.
Rien ne permet cela de façon directe.
Associé à l'élément animé d'id 'anim1', je vais ajouter l'élément suivant:
<ev:listener target='anim1' event='endEvent' handler='#versAutreSVG' />
Ainsi, quand l'évènement de fin d'animation va être généré, le handler nommé 'versAutreSVG' va être exécuté.
Le handler peut être défini ainsi:
gotoLocation('autrePage.svg');
Il y a potentiellement une autre méthode qui serait envisageable dans le futur. Elle est correcte syntaxiquement, mais son fonctionnement n'est pas spécifié par la norme actuelle (même dans le projet Tiny 1.2). Peut-être pourra-t-on l'introduire par la suite. Il en résulte que des afficheurs SVG différents pourraient avoir un comportement différent.
Supposons qu'on a
<ev:listener event='endEvent' handler='#versAutreSVG' />
comme précédemment. Mais que l'objet d'id versAutrePage, n'est pas un handler classique mais:
<a id='versAutrePage' xlink:href='autrePage.svg' />
Cette syntaxe est correcte dans SVG Tiny 1.2, mais le comportement de la balise <a> en tant que cible de l'évènement n'est pas défini. Il suffirait de définir que si une balise a est la cible d'un évènement, on suit le lien défini par la balise.
Peut-être pour une prochaine version de la spécification SVG?
Subscribe to:
Posts (Atom)
Posts
