Vector Markup Language

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.

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

Le langage VML peut s'intégrer soit directement au sein du code HTML, soit par l’intermédiaire de l'élément v:vmlframe lié à un ou plusieurs fichiers XML. Cet élément permet de placer les graphiques vectoriels de façon analogue aux images bitmap. L’utilisation des attributs width et height permettant 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ément v:fill et 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^[5] pour les animations.

Google Maps utilise actuellement VML pour le rendu vectoriel avec Internet Explorer, et SVG pour les navigateurs le supportant^[6]. Avec la version 10 d'Internet Explorer, le format VML n'est plus supporté par défaut^[7] ; Microsoft conseille d'utiliser à la place le format SVG.

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:shapetype pour chaque forme vectorielle, et l'élément v:vmlframe pour 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 vmlframe sur lequel un filtre est appliqué. D'autres formes périphériques sont calquées sur une shapetype. Chaque forme descendante de cette dernière peut aussi prendre ses propres attributs distincts du modèle. L'ensemble regroupé par l'élément v:group est à son tour reproduit par une nouvelle vmlframe.

Fichier HTML

<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>