- Vector Markup Language
-
Logo VML
Vector Markup Language (VML) est un langage XML ouvert destiné à la création des graphismes vectoriels élaborés en 2D ou 3D (statiques ou animées) sur les pages Web.
Sommaire
Historique
VML a été soumis comme proposition de standard au W3C en 1998 par Autodesk, Hewlett-Packard, Macromedia, Microsoft et Visio[1], mais il se trouve en concurrence avec le PGML proposé par Adobe Systems et Sun Microsystems. Après un long examen, le W3C décide de combiner ces deux formats, donnant le jour au format SVG[2].
VML est implémenté dans Internet Explorer, Microsoft Office et Silverlight. Il fait partie de la spécification OOXML, où il est défini en complément de DrawingML[3].
Utilisation du format sur le web
Portrait WebArt VML[4].
Cartographie VML[5]Le langage VML peut s'intégrer soit directement au sein du code HTML, soit par l’intermédiaire de lélément
v:vmlframelié à un ou plusieurs fichiers XML. Cet élément permet de placer les graphiques vectoriels de façon analogue aux images bitmap. L’utilisation des attributswidthetheightpermettant d’agrandir ou de réduire les graphismes sans perte de qualité. De nombreux effets de filtre sont possibles sur les images qui peuvent être également placées dans le sous-élémentv:fillet prendre effet des attributs de couleurs et dégradés, avec utilisation du canal alpha pour la transparence. Il existe trois types de dégradé chez VML: gradient (linéaire), gradientRadial et gradientTitle (avec focus variable). L’extrusion 3D permet la mise en relief de tout élément VML. Les effets de lumière apportant profondeur et réalisme aux graphismes.VML est un langage qui permet des réalisations complexes sur fichiers au format XML. VML est manipulable avec JavaScript ou JScript et plus commodément avec HTML + TIME[6] pour les animations.
Google Maps utilise actuellement VML pour le rendu vectoriel avec Internet Explorer, et SVG pour les navigateurs le supportant[7].
Exemples de code
Le code VML suivant intégré dans le code HTML affiche une simple ellipse[8]:
<html xmlns:v> <style>v\:*{behavior:url(#default#VML);position:absolute}</style> <body> <v:oval style="left:0;top:0;width:100;height:50" fillcolor="blue" stroked="f"/> </body> </html>
Les règles CSS sont utilisées pour les positionnements, les dimensions, la mise en forme des textes et les filtres lorsqu'ils peuvent être appliqués. La création d'objets "modèle" et leur duplication s'effectue par l'élément
v:shapetypepour chaque forme vectorielle, et l'élémentv:vmlframepour les groupes d'ojets vectoriels.Inclusion de fichiers externes
Une forme définie par un fichier XML extérieur peut être introduite par l'élément
vmlframesur lequel un filtre est appliqué. D'autres formes périphériques sont calquées sur uneshapetype. Chaque forme descendante de cette dernière peut aussi prendre ses propres attributs distincts du modèle. L'ensemble regroupé par l'élémentv:groupest à son tour reproduit par une nouvellevmlframe.Fichier HTML
Illustration de l'exemple[9]<html xmlns:v> <style> v\:*{behavior:url(#default#VML);position:absolute} v\:shape{width:10000;height:10000} v\:group{width:1000;height:1000} </style> <body> <h1>VML COLORED FIREBALL</h1> <v:shapetype id="arw" path=" m,c2,2,4,5,6,11,5,8,3,5,,2,1,2,,1,,e" fillcolor="red"> <v:stroke color="yellow" weight="4" opacity=".4"/> </v:shapetype> <v:vmlframe src="ball.xml#ball" clip="t" size="32,32" style="top:55;width:580;height:550;background-color:white;filter:blur(Add=1,Strength=140)"/> <v:group id="gr1" style="left:80;top:25"> <v:shape type="#arw" style="left:65;top:50;width:55000;height:4000" fillcolor="aqua" strokecolor="lime"/> <v:shape type="#arw" style="left:460;top:80" fillcolor="fuchsia"/> <v:shape type="#arw" style="left:-1900;top:1430;width:5000;height:4000;rotation:50"/> </v:group> <v:vmlframe src="#gr1" style=" left:390;top:140;width:200;height:150"/> </body> </html>
Fichier XML extérieur
<xml xmlns:v> <v:group id="ball" style="width:2000;height:2000"> <v:shape style="left:4;top:1" path="m9,1l9,r1,2l11,1r,2l12,2v,4,,7,-7,6l6,7,4,6r1,c6,6,6,5,3,4r1,l,2r3,l2,1r3,l4,xnse"> <v:fill color="red" color2="yellow" focusposition=".99,.8" focussize=".01,.01" type="gradientTitle"/> <v:shadow on="t" type="double" color="fuchsia" color2="yellow" opacity=".4" offset="-1pt,-.5pt" offset2="-2pt"/> </v:shape> </v:group> </xml>
Editeurs et logiciels
Microsoft Office permet d'éditer des graphiques VML sans toutefois utiliser intégralement le DOM de VML.
OpenOffice.org permet de créer des fichiers substituables à la suite bureautique de Microsoft avec des graphiques convertis au VML.
Notes et références
- (en) Vector Markup Language (VML) sur w3.org, World Wide Web Consortium, 13 mai 1998. Consulté le 11 novembre 2009
- (en) Jon Frost, Stefan Goessner, Michel Hirtzler, Learn SVG: the web graphics standard, 2003 (ISBN 097417730X) [lire en ligne], p. 7
- Office Open XML Part 4: Markup Language Reference. VML chap.6 sur ecma-international.org, Ecma International, octobre 2006, p. 4343. Consulté le 14 novembre 2009
- Vector Mona Lisa
- Tectonique terrestre
- HTML + TIME sur msdn.microsoft.com, Microsoft Corporation
- (en) Google Maps API Concepts - XHTML and VML, Google
- Exemple VML1
- Exemple VML2
Voir aussi
Liens et démonstrations
- (en) Comparaison VML-SVG.net
- (en) Exemples basiques.
- (fr) Autre exemples remarquables.
- (en) Gallerie VML.
- (fr) Graphismes animés VML + Javascript.
Tutoriels, didacticiels
Catégories :- Format de fichier graphique
- Dialecte XML
Wikimedia Foundation. 2010.
