[SVG] Des amateurs ?

[Roworll]

Cela fait plusieurs fois que j'évoque le SVG sur les forums et j'aimerai savoir s'il y a quelques utilisateurs et/ou amateurs sur le forum.

Le but serait de pouvoir partager et échanger quelques techniques et astuces dans le cadre d'un projet s'appuyant en partie sur du SVG.

Plus je m'y penche, plus je trouve que le SVG a quelques beaux atouts pour permettre la réalisation d'interface et d'éléments graphiques plus que potable (à condition bien sur d'avoir quelques notions d'esthétisme, ce qui est loin d'être mon cas). Son support allant en grandissant (même IE8 va s'y mettre) je pense qu'il n'est pas inutile de garder un oeil sur cette technologie.

Certains connaissent déjà peut être raphaelJS qui permet de bien belles choses. En se penchant sur le SVG pur et dur, on s'aperçoit vite de quelques fonctionnalités intéressantes.
- Génération à la volée d'éléments facile via une syntaxe dérivée de XML
- Réutilisation d'éléments selon les besoins
- Intégration d'images externes
- Fonction de zoom, rotation, déplacement, déformation
- Interopérabilité avec JS pour réaliser des effets.
Bref, plein de fonctions qui me font penser que pour égayer un plateau de jeu, le SVG me semble plutôt pas mal.

Donc, pour en revenir à ma question initiale : existe-t-il des amateurs de SVG dans le coin ?
Pour les autres, ceux que seraient curieux de voir comment ça fonctionne, je peux donner quelques exemples et explications.

[Sephi-Chan]

J'aime bien SVG, de ce que j'en ai vu.

Je ne l'ai utilisé réellement qu'avec la librairie RaphaelJS (pour mon éditeur de relations entre les territoires, dans Bug Spirit) et j'avoue que ça m'a un peu dérangé car ça limite pas mal (absence de groupes, par exemple). Je suis persuadé que du SVG "pur" est bien plus intéressant et riche.

J'aimerai beaucoup l'utiliser réellement, mais son support est encore limité, d'autant que peu de navigateurs supportent le SVG directement inclus dans le document, qui est bien plus pratique à scripter (puisque appartenant au contexte de la page). Effectivement, ça vaut le coup de s'y intéresser, mais je ne m'y aventurerais pas seul : trop de risque que ça ne serve à rien (hors des expérimentations) si le support reste chaotique.

Après, je serais ravi de remettre ça en chantier au sein du forum, avec d'autres amateurs. Ça peut même m'intéresser pour mon histoire de graphes.


Sephi-Chan

[Anthor]

Je pense que c'est la techno à étudier pour faire quelques composants plus jeux que site internet ^^

Avec des librairies on arrive assez facilement même aujourd'hui à toucher 95% des gens. Notamment avec excanvas, ou svgweb.

[DragonMaster]

J'ai déjà fait un petit projet graphique en SVG pur...d'ailleurs je ne savais pas qu'il y avait des librairies...enfin il suffisait d'y réfléchir un peu pour le deviner. SVG m'avait semblé bien, il a le gros avantage de la gratuité comparativement au super flash. Mais sincèrement je n'y connais que très peu de chose... Quoi qu'il en soit sa m' intéresse, je voulais faire un petit projet flash/php prochainement (que je ne pourrai pas publier étant donné que je n'ai pas payé les droits )...peut-être que je pourrais toucher à SVG!

[NicoMSEvent]

j'ai vu un tetris (svg+javascript -> 22ko) qui m'a impressionné. Mais ce qui me rebute, c'est IE qui ne le gère pas (seulement a partir de la version 8?), ce que je trouve très handicapant.
Sinon, je suis partant pour essayer, je pense que ça pourrait bien donner, et je testerais même avec scriptaculous, histoire de voir si ça apporte quelque chose

[Roworll]

Je connais deux versions de Tetris en SVG
Basique
Plus jolie

L'incompatibilité actuel d'IE peut se résoudre via des plug-in disponibles sur le net.

Actuellement, je trouve qu'il subsiste deux gros freins concernant SVG
- Le manque de support SMIL de la part de FireFox (apparemment corrigé dans les prochaine releases)
- L'impossibilité de référencer des éléments externes avec WebKit (Safari/Chrome).

SMIL est le moteur "natif" d'animation du SVG. Il existe d'ailleurs pas mal de pages permettant de voir ce qu'il est possible de faire sur cette adresse (Marche pas sur FF). Regardez la section 'animate', ça donne des idées.

Quand au problème Webkit, il empêche purement et simplement l'utilisation de fichier SVG en tant que librairie externe. Je m'explique.

En SVG, il est possible de donner des ID aux éléments graphiques puis de les réutiliser via xlink:href. Pour un exemple parlant, il suffit de regarder le code du plateau de dames chinoises sur cette page. Le lien HREF peut en théorie pointer sur des SVG externes, permettant du même coup le groupage d'éléments en bibliothèques utilisables selon les besoins. Manque de pot, Webkit ne le permet pas (encore).

J'essaye de faire des petits tests en ce moment.
J'ai mis à disposition une page d'exemples.
- Les symboles d'armée au format NATO sont construits par superposition d'éléments.
- En passant la souris dessus, un cercle représentant le "rayon d'attaque" s'affiche.
- L'image des arbres est chargée à partir d'une ressource externe (jpg).
- Cliquer sur l'image la fait tourner sur elle même.
Zoomez sur la page : Les éléments en pure SVG ne perdent rien en qualité contrairement au JPG.

Il est à noter que Webkit fait encore un peu n'importe quoi sur cette page mais dans l'ensemble, plus je regarde les capacités du SVG, plus ça me donne envie de continuer mes investigations.