Introduction
I. La norme SVG
II. Les outils SVG
III. Et ASP.NET dans tout cela ?
IV. A quoi ressemble un dessin SVG ?
V. Intégrer un SVG dans une page HTML
VI. Le plugin SVG de Adobe
VI. Insérer un graphique SVG dans une page ASP.NET
VIII. La production de graphiques à la volée
Conclusion
Ressources
La norme SVG
SVG signifie Scalable Vector Graphics, soit graphique vectoriel redimensionnable. Il s’agit d’une norme W3C dont les spécifications peuvent être trouvées sur leur site W3 – SVG.
Le W3C définit SVG comme des « graphiques XML pour le Web ».
Pour être exact, SVG permet de décrire de façon textuelle des dessins 2D vectoriels. Le texte suit le formalisme XML.
Les premiers drafts de SVG ont été proposés en 1999, la norme actuelle étant de niveau 1.1.
Du point de vue du contenu visuel, SVG permet de définir :
– des formes vectorielles (courbes, traits, cercles…),
– des images,
– du texte.
Les objets graphiques SVG peuvent être groupés, transformés par des matrices (un peu comme sous GDI+), filtrés et composés dans d’autres objets. Les objets peuvent aussi se voir accrocher des styles CSS.
Autre avantage de SVG, les graphiques créés peuvent être dynamiques et interactifs sachant que les animations peuvent être dynamiques et interactifs sachant que les animations peuvent être soit intégrées dans le fichier SVG soit pilotées par un langage de script externe. Une interface DOM complète SVG afin de pouvoir accéder à tous les éléments et tous les attributs.
Les graphiques SVG sont redimensionnables sans perte de qualité puisqu’ils sont définis de façon vectorielle, les parties d’un graphique sont réutilisables et partageables pour créer d’autres graphiques, éventuellement par d’autres utilisateurs. L’adoption du formalisme XML permet d’utiliser tous les outils existants : parser, transformation, etc. Les fichiers SVG peuvent en outre être compressés pour diminuer encore plus leur taille. Bref, vous l’avez compris, SVG est une nouvelle norme ouverte de dessin pour le Web, très souple, dynamique, interactive, tout ce qui en fait une concurrente redoutable pour contrecarrer l’hégémonie de Flash sur ce créneau.
Les outils SVG
Dessiner correctement n’est déjà pas donné à tout le monde, alors s’il faut décrire une image par des ordres textuels cela peut être très fastidieux… Bien heureusement de nombreux outils permettent de créer des graphiques SVG de façon traditionnelle.
C’est le cas par exemple de l’incontournable Adobe Illustrator CS dont le domaine de prédilection est à la base le dessin vectoriel. Ce logiciel est plutôt réservé aux infographistes qui l’ont depuis des années érigé en standard professionnel, aussi bien sur PC que des années avant sur Apple Macintosh.
Tous les infographistes possèdent Illustrator et si vous avez besoin d’un dessin correctement réalisé c’est de toute façon vers l’un de ces professionnels que vous vous tournerez. Toutefois il existe d’autres logiciels manipulant SVG, comme le projet gratuit Sodipodi que l’on trouve sur SourceForge ou WebDwarf tout aussi gratuit, sans oublier le visualiseur gratuit de Adobe qui doit être installé sur la machine cliente pour afficher les images SVG dans les pages Web.
Vous trouverez d’autres informations en cherchant « SVG » sous Google et en vous promenant sur le site français de SVG (encore un peu maigre) SVG en français.
Enfin n’oublions pas que le format de définition des graphiques SVG se plie parfaitement à la génération d’images, et de façon très simple. C’est donc un outil parfaitement taillé pour les développeurs qui, généralement, ne savent pas dessiner mais qui savent écrire du code capable de générer du texte XML. SVG devient alors un outil d’une grande souplesse et d’une grande simplicité de mise en œuvre pour, par exemple, générer des business graphics de type histogramme ou camembert sans avoir à calculer le fichier image sur le serveur et sans avoir à transmettre une image bitmap (lourde) ou un jpeg (de médiocre qualité à cause de la compression).
Comme vous le constater, bien que très jeune, la norme SVG dispose déjà de nombreux atouts et des mauvaises langues susurrent dans les couloirs que chez Macromedia (éditeur de Flash), des sueurs froides commencent à saisir certains cadres…
Ajoutons à leurs inquiétudes l’apparition de convertisseurs Flash vers SVG, ainsi que Mobile SVG, appelé SVG-T (T pour Tiny, petit) pour les unités mobiles comme les Pocket PC et les smartphones.
……
Cours gratuit ASP.NET (344 KO) (Cours PDF)