Le Vector Markup Language est comme son nom l'indique un langage d'images vectorielles permettant de dessiner des figures géométriques et des formes complexes statiques ou animées.

*** VML ANIMATE EXAMPLES *Navigateur famille Internet Explorer obligé, ou autres navigateurs avec option "IE Tab" ***

Animation VML

Figure interactive

VML cubic spline tiger+

Vector Mona Lisa

Pêle-mêle ludique

Cube flottant

Halloween

Caleïdo

Television

Cartographie

Anneaux3

Histogramme 3D

Anneaux4

Sphere1

Bright Side of VML

Sphere4

Voir aussi: >>> Démos VML sample >>> Comparatif VML - SVG >>> VML Frames & Shape-Types >>> Les PNG dans IE >>> Les dégradés coniques

Image Filters effect (with PNG8)

VML effects

Image Filters effect (with PNG24)

QUELS AVANTAGES ?

VML est un standard ouvert de représentations graphiques en 2 ou 3 dimensions contenu dans les pages Web.
L'insertion de schémas ou dessins VML évite la surcharge de ces pages et réduit considérablement leur vitesse de chargement.
Contrairement aux images traditionnelles qui n'admettent que 216 ou 256 couleurs sur Internet, le VML permet d'utiliser une palette de couleur illimitée pour ses illustrations.
Il n'utilise pas d'image bitmap pour les remplissages de couleurs dégradées qui ne subissent aucun tramage des nuances .
Il est souple et maniable d'utilisation.
Il s'accorde avec l'utilisation des css.
Il est manipulable avec JavaScript ou Jscript pour des animations interactives.
Les réalisations VML s'intègrent directement dans le code HTML, comme de simples images.
Les termes du code sont détectés par les moteurs de recherche et améliorent le référencement.
VML (déjà ancien: 1998) n'a subit aucune péjoration par rapport aux nouveaux formats comme le SVG*, inspiré lui-même du VML et du PGML (PGML avec CANVAS, étant plutôt destinés à la simple schématique).
Il reste l'outil le plus simple, le plus pertinant, et aussi le plus performant et le plus expressif en matière d'images vectorielles.
VML est zoomable à l'infini sans perte de qualité.
Il est libre, gratuit et développable avec simple fichier texte.

Cliquez sur l'image ci-dessous pour visualiser la partie constitution d'un modèle de chaussure du site "http://pierre.wostyn.free.fr",
jugée meilleure application VML par Howard L. Cooperstein (Lead Program Manager PowerPoint/OfficeArt Microsoft Corporation US).

Ce site démontre toute la puissance et la supériorité du VML
Hébergé sur pages-persos, le chargement de ce fichier complexe n'excède pas10sec avec modem 56K, ... et quelques secondes sur ADSL.
En générant des fichiers subsidiaires beaucoup trop lourds, les versions SVG et Flash Macromedia ont vectoriellement échoué sur cette application.

Le principe VML repose (comme le HTML) sur l'interprétation de balises et de code en écritures.

Assimilation rapide:
Si vous pensez au mot « rectangle ». Alors dans votre tête se dessine immédiatement un rectangle.
Si vous pensez au mots « rectangle rouge ». Alors vous voyez votre rectangle se colorer en rouge.
Concrétisation sommaire:
Vous écrivez "Rectangle Rouge" en texte, vous enregistrez en page Web (.htm ou .html), et vous ouvrez cette dernière dans votre navigateur pour y voir apparaitre un rectangle rouge.

Le système d'affichage de votre dessin reposera sur un principe aussi simple que celui là.

QUEL SONT LES OUTILS ?

Pour « penser » et dessiner vos formes vous aurez besoin d'ouvrir une page Word ou Excel (Microsoft Office¹), et utiliser les outils de dessin.
Pour créer et optimiser votre page Web vous aurez besoin d'une page de texte brut (Bloc-notes ou Word Pad).
Pour publier votre page et la représenter sur le Web, vous devrez utiliser le navigateur Internet Explorer².
¹ Utilisez de préférence la version 2000 au minimum.
² Utilisez de préférence la version 6 minimum.
*Si vous ne disposez pas de la suite Microsoft Office, il vous est possible d'utiliser OpenOffice (de manière un peu plus limitée mais avec d'excellents outils dessin).

Note : VML fut conçu principalement par des membres de Microsoft, Macromedia et Hewlett-Packard.
Il est homologué par le W3C (World Wide Web Consortium).
http://www.w3.org/TR/1998/NOTE-VML-19980513
La maison Microsoft est aujourd'hui presque la seule à en faire l'application quasi-totale dans sa suite "Office".
Ce qui laisse souvent penser à tort que VML est une technologie attitrée à Microsoft.
Si Office est sans aucun doute le meilleur outil de développement VML, il n'est pas un pur éditeur de ce format.
La déclaration d'environnement xml: <html xmlns:v="urn:schemas-microsoft-com:vml"> n'est d'ailleurs pas imposée.
<html xmlns:v=VML> ou même <html xmlns:v> suffit. Ce qui prouve qu'elle n'est pas propriété d'une maison d'adoption.
Internet Explorer (IE5, IE6, IE7, IE8, IE9, IE10) est aussi le seul à pouvoir interprêter le langage VML.
Heureusement, ce navigateur qui est aujourd'hui le plus complet, est toujours très majoritairement utilisé.

VOTRE PREMIER DESSIN :

Ouvrez votre page Word.
- Avant toute chose allez dans "Outils" > "Options". Cliquez sur le volet « Général » et sur le bouton « Options Web ».
Cochez alors la case « Se fier à VML pour afficher les graphismes dans les navigateurs ».
- Pour les versions récentes de Word, allez dans "Outils" > "Options". Cliquez sur le volet « Général ».
Décochez la case « Créer automatiquement des zones de dessin lors de l'insertion de formes automatiques ». Cet emplacement n'aura pas d'utilité.
- Vérifier si votre barre d'outils de dessin est visible.
Sinon allez dans "Affichage" > Barre d'outils et cochez « dessin ».
- Aérez au maximum votre espace de travail. Dans "Affichage", cochez « Web », et décochez « Volet Office » et « Règle ».

Dans la barre d'outils dessin située au bas de votre écran cliquez sur le petit rectangle.

Votre pointeur marqué d'une croix est prêt à dessiner.
Cliquez sur votre écran, et en restant en appui sur votre souris, allez de gauche à droite et du haut en bas pour tracer votre rectangle.
Relâchez lorsque la dimension du rectangle convient.

DÉCOUVREZ LE CODE VML :

Votre rectangle étant affiché, cliquez sur "Outils" > "Macro" > "Microsoft Script Editor".
Si vous n'avez pas M.S.E, vous pouvez enregistrer votre document en tant que page Web, et l'ouvrir avec le Bloc-notes (clic droit) pour récuperer la source.

Une page de ce logiciel couplé va apparaître après quelques secondes.

Ne vous effrayez pas ! Un charabia d'écritures va remplir l'écran. Rassurez-vous, presque la totalité ne nous concerne absolument pas.
A l'aide de la barre de défilement, descendez en bas de la page.

Lorsque arrivez à la hauteur de <body lang=FR style='tab-interval:35.4pt'> arrêtez-vous !
Regardez les écritures qui suivent et vous verrez comment est décrit votre rectangle.

« <v:rect » est une « balise » d'entrée qui indique que la figure qui suit est un rectangle (rect) décrit en VML (v:)

« id="_x0000_s1026" » est un identifiant (id) permettant de repérer le rectangle par un nom de votre choix (ici : _x0000_s1026)

« style ='position:absolute; » est un attribut de style qui indique que le rectangle est ici en position absolue par apport à l'affichage sur l'écran.

« margin-left:7.5pt;margin-top:7.5pt;width:375pt;height:150pt; » sont les détails du positionnement absolu. Pour notre exemple :
- « margin-left » est la marge de gauche désignant la distance du bord gauche de votre écran au bord gauche de votre rectangle. (ici la valeur est de 7.5pt).
- « margin-top » représente la marge du haut (7.5pt).
- « width » représente la largeur de votre rectangle (375pt).
- « height » représente la hauteur de votre rectangle (150pt).

« z-index:1' » représente la position en profondeur par rapport à d'autres formes dessinées (1er, 2eme, 3eme plan etc.). Cet attribut est ici inutile puisque nous n'avons que notre rectangle unique.

« /> » ferme la balise rectangle.

FAISONS MARCHE ARRIÈRE :

Maintenant que vous connaissez le principe de base du VML, nous allons reconstruire un rectangle et le représenter sur Internet Explorer à partir d'une simple page du Bloc-notes.
Abandonnez Word et allez dans "démarrer" > "Programmes" > "Accessoires" > "Bloc-notes".
Une page de texte brut vierge s'ouvre devant vous.
Sélectionnez et copiez-y le code inscrit ci-dessous :
<html xmlns:v=VML> <head> <style> v\:*{behavior:url(#default#VML)} </style> </head> <body> <v:rect id=rect style='position:absolute;left:10;top:10;width:500;height:200'/> </body> </html>

Lorsque ce code est inscrit dans sa totalité sur votre page de Bloc-notes, cliquez sur "Fichier" > "Enregistrer sous."
Dans la case Nom du fichier : inscrivez « Monrectangle.htm ».
Pour la case Type : sélectionnez « Tous les fichiers ».
Cliquez enfin sur « Enregistrer ».
N'oubliez pas (pour les distraits) de voir où vous avez enregistré votre page.

Retrouvez votre page Web nommée « Monrectangle.htm » et ouvrez-la (avec Internet Explorer bien sûr).

Votre fameux rectangle apparait dans votre navigateur:

Afin de comprendre immédiatement un des nombreux avantage du VML, comparons le poids des quatre pages Web ci-dessous. Toutes représentant le même rectangle.
« Monrectangle.swf » = Page html avec rectangle Flash: 250 octets.
« Monrectangle.svg (IE5~IE8) » = Page html avec rectangle SVG: 481 octets...
« Monrectangle.svg (IE9) » = Page html avec rectangle SVG: 309 octets...
« Monrectangle.gif » = Page html avec image gif compressée: 1077 octets.
« Monrectangle.htm » = Page html avec rectangle VML: 178 octets !!!...

La simplicité et la légèreté de son code d'écriture font de VML un format des plus avantageux.

CHANGEZ VOTRE RECTANGLE :

Nous allons évoluer très vite et transformer les caractéristiques du rectangle.
Vous le pensiez rouge ? .Aucun problème !
Si vous aviez refermé votre page « Bloc-notes », cliquez à droite dans la fenêtre de votre navigateur et sélectionnez « Afficher la source ».

Vous pouvez ainsi ré-accéder au code de votre page.
Insérez après l'identifiant « fillcolor=red ». Ce qui signifie textuellement : « Couleur de remplissage=rouge »

<v:rect id=rect fillcolor=red style='position:absolute;left:10;top:10;width:500;height:200'/>

Ré-ouvrez votre page « Monrectangle.htm ». Si elle était encore ouverte cliquez sur le bouton « Actualiser » ou actionnez la touche F5 de votre clavier.

Surprise ! votre rectangle a viré au rouge. Note : Si aucune couleur n'est indiquée, la couleur par défaut est « blanc ». Inutile donc de mettre « fillcolor=white » si vous le voulez blanc, vous gaspilleriez 15 octets.

Avançons encore et changeons le contour de notre rectangle.
Insérez après l'attribut de couleur « strokeweight=6 ». Ce qui signifie textuellement : « Force de ligne=6 »

<v:rect id=rect fillcolor=red strokeweight=6 style='position:absolute;left:10;top:10;width:500;height:200'/>

Le contour de votre rectangle va s'épaissir à la valeur de 6 points. Note : Si aucun contour n'est indiqué, l'épaisseur par défaut est de 0.75pt. Par ailleurs il est inutile d'indiquer « pt », l'unité par défaut étant le point.

Finissons notre premier dessin en colorant son contour.
Insérez après l'attribut d'épaisseur « strokecolor=blue ». Ce qui signifie textuellement : « Couleur de ligne=bleu »

<v:rect id=rect fillcolor=red strokeweight=6 strokecolor=blue style='position:absolute;left:10;top:10;width:500;height:200'/>

Vos premiers pas avec VML sont effectués !Cliquez pour poursuivre >>>