aKhEnAtHoN's Blog

Le SVG - Peut-être l'avenir

   J'ai eu l'occasion de travailler avec le SVG dans le cadre du développement d'une application Internet mettant en oeuvre un systéme d'information géographique.

   Trop de thermes complexes me direz-vous. En gros dans la société où je travaille (pour le moment) j'ai dû développer un application utilisant des cartes, des elements graphiques liées à une base de données.

   Rien de passionant jusque là. La cartographie ne m'emballe pas vraiment. Parcontre, le SVG c'est autre chose. Avant de vous expliquer les possibilitées de celui-ci, je vais vous faire une bréve présentation de la technologie.

1 - Introduction au SVG :

   Déjà les initiales signifient Scalabl Vector Graphics. C'est une norme, comme par exemple le HTML. Elle fut créé par le W3C (World Wide Web Consortium). Pour vraiment résumer, elle permet de créer des dessins à partir des formes géométriques de base. Waou me direz-vous. Non, grave erreur de sous-estimer ses possibilitées.

   Bon, comme toute norme, la présentation est peut-être barbante, surtout si j'en rajoutte des tonnes avec des termes techniques. Pour que vous imaginiez un peu la portée du SVG je vais donc vous faire un bréf listing de ce qu'il comprend :

• On peut créer des mises en page avec des vecteurs et des images
• Ces mises en pages peuvent être mises dans une feuille HTML
• Chaque objet graphique du document SVG contient des événements, et des propriétées
• On peut executer du code (similaire au JavaScript)
• On peut définir des feuilles de style CSS
• On peut définir des trajectoires d'animations et d'autres styles d'animations beaucoup plus complexes
• On peut appliquer des filtres graphiques, le panel est aussi large que celui d'Adobe Photoshop

   Là déjà je pense qu'on comprend un peu mieux l'intérêt du SVG. Alors imaginez-vous, une norme proche du HTML, permettant de faire les mêmes choses qu'en flash, et même plus.

2 - Les possibilitées du SVG :

   Le SVG est la norme, et la language script c'est l'ECMA Script. Je viens au-dessus de vous faire un listing exhaustif des possibilitées du SVG ... passons maintenant aux détails :

    a) On norme qui s'intégre à 100% à l'existant :

   Le SVG est une norme basée sur le XML. Il est interprété par un plugin. Je vous conséille le plugin le plus au point, celui d'Adobe (cliquez ici pour le télécharger).

   Le plugin comprend une interface DOM, permettant ainsi lors de l'execution des scripts de pouvoir parcourir et modifier n'importe quel objet, et aussi lui attribuer des évenements.

    Une fois le plugin installé, n'importe quel document SVG que vous avez fait pourra être incrusté dans une page HTML. La page HTML pourra aussi avoir accés au document SVG ainsi que tous ses éléments à travers du JavaScript ou du VBScript. Déjà un point fort par rapport au Flash qui lui reste fermé, et aucun des deux ne communiquent. Avec le SVG c'est tout le contraire.

      b) Un script trés évolué :

   L'ECMA Script s'intégre au SVG de la même maniére que le JavaScript au HTML. Il peut être définit soit dans le document, soit dans un fichier. Bon voici les points forts de l'ECMA Script :

• Accéde à l'interface DOM du SVG
• Evénementiel
• Programmation Orientée Objet
• Communication avec le Serveur (port 80 seulement, en mode HTTP / GET)
• Accéde à l'interface DOM du HTML

   A partir de tout ceci, la porte est grande ouverte à votre imagination. Là où les gars voient un carré avec du texte ... moi j'y vois un boutton ;) ... Quoi vous n'y pigez rien ? Aprés avoir installé SVG Viewer sur votre machine cliquez ici.

      c) Une norme trés compléte :

   Le SVG est en réalitée une multitude de normes. Elle fait appel au CSS, au SMIL ou d'autres. Ils on pensé à tout en créant ce format qui au début devais juste être un format de dessin vectoriels. On peut appliquer des filtres sur les objets, ou définir avec des balises des animations. La norme est assez complexe, et les possibilitées sont illimitées. Le mieux c'est d'aller visiter les sites, et se documenter, la doc est vraiment compléte.

3 - Quelques liens :

• W3C - Site de la norme officielle (La version française se trouve ici mais elle est moins compléte)
• WIKI - Site expliquant la norme d'une maniére plus simplifiée
• Cours de Didier Courtaud - Un cours simplifié et en français. En moins d'un jour avec son cours vous ferez du SVG avec le bloc notes ;)
• Un boukin - Voilà le lien vers un des meuilleurs boukins que vous pouvez acheter si vous développez continuellement en SVG

Bon surf à tous, akh