all html : Le portail des webmaster

Article publié le lundi 29 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « SVG »

Scalable Vector Graphics. Mis au point par Adobe (utilisé par ses produits) et appouvé par le W3C, ce format permet de créer des graphiques vectoriels visualisables sur le Web. Ce format introduit le graphisme interactif en temps réel, en agissant directement sur les autres éléments d'un document HTML.

Naissance du SVG

SVG : Scalable Vector Graphics. Ce langage permet d'écrire des graphiques vectoriels 2D en XML.. Il a été inventé en 1998 par un groupe de travail (comprenant Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, ILOG ...) pour répondre à un besoin de graphiques légers, dynamiques et interactifs.
Une première ébauche du langage est sortie en octobre 1998 et en juin 2000 apparaît la première version du Viewer Adobe (plugin permettant de visualiser le SVG). Le SVG s'est très vite placé comme un concurrent de Flash et à ce titre, Adobe a intégré ce langage dans la plupart de ses éditeurs (dont les principaux sont Illustrator et Golive).

Exemple de code

Ci-dessous un exemple de code SVG. On notera dans cette portion de code :

- La déclaration de la version du XML
- La balise DOCTYPE (définissant la norme SVG en vigueur)
- La balise <svg> comprenant la syntaxe propre au SVG.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd"> <svg width="9cm" height="4.5cm" viewBox="0 0 600 300"> <rect id="RectElement" x="100" y="75" width="400" height="150" style="fill:blue"></rect> <text id="TextElement" x="200" y="160" style="fill:white; font-family:Vernada; fill-opacity:0.7; font-size:60;">SVG</text> <text id="TextElement" x="310" y="180" style="fill:white; font-family:Vernada; fill-opacity:1; font-size:40;">SVG</text> </svg>

Avantages du SVG

Le SVG comprend de nombreux avantages, notamment :

a) Au niveau de la conception

- Langage libre de droit (aucune licence demandée)
- Etant issu du XML, il offre la possibilité d'utiliser tous les outils XML dont les parsers, les outils de transformations et les bases de données
- Prise en compte des méthodes XML telles que les CSS2, XSL et XLINK
- Langage supporté par les technologies d'Internet les plus communes (HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, PHP, Javascript)
- le SVG peut créer du SVG
- Compression possible d'un fichier SVG jusqu'a 95% (en utilisant la compression gzip)

b) Au niveau du rendu graphique

- Intégration des trois types d'objets graphiques : Formes vectorielles, images, texte
- Utilisation de nombreux effets graphiques
- Les balises SVG sont considérées comme des objets et peuvent ainsi recevoir des propriétés ou des attributs de styles ; chaque élément du SVG peut être groupé, transformé et composé en objet
- Possibilité de zoomer et de retailler une zone de vision
- Les graphiques SVG peuvent intégrer des scripts internes ou externes (ECMAscript ou javascript)
- Possibilité d'effectuer des recherches de vocabulaire dans le graphique

Inconvénients du SVG

Comme tous les langages récents, le plug-in SVG (viewer) est encore très peu implanté sur les navigateurs actuels (il devrait être intégré dans les futures versions d'Internet Explorer). De plus, il n'existe pas aujourd'hui de version pour Netscape et Opera. On notera aussi que le SVG risque de se confronter à Flash, qui lui est devenu un vrai standard...