Vector Markup Language

Vector Markup Language (VML) è un linguaggio XML aperto, destinato alla creazione di grafica vettoriale elaborate in 2D o 3D (statiche o animate) sulle pagine Web.

Ritratto sviluppato con codice VML: La Gioconda in VML (33Kb)

Storica

VML fu sottoposto come proposta di standard al W3C nel 1998, per Autodesk, Hewlett-Packard, Macromedia, Microsoft e Visio, ma si trovù in concorrenza con il PGML proposto da Adobe systems e Sun Microsystems. Dopo un lungo esame, il W3C decide di abbinare questi due formati, dando vita al formato SVG.

VML è introdotto in Internet Explorer, Microsoft Office e Silverlight. Fa parte della specificazione OOXML, dove viene definito in complemento di DrawingML.

Utilizzo del formato sul Web

Il linguaggio VML può integrarsi sia direttamente nel codice HTML, sia tramite l'elemento v:vmlframe legato ad un o più file XML. Questo elemento permette di sistemare le immagini vettoriali in modo analogo alle immagini bitmap. L'uso degli attributi width e height permette d'ingrandire o di ridurre le immagini senza perdita di qualità. È possibile applicare numerosi effetti di filtro sulle immagini che possono essere ugualmente messe nel sotto-elemento v:fill e prendere effetto degli attributi di colore e digradati, con utilizzo del canale alpha per la trasparenza. Esistono tre tipi di digradati da VML: gradient (lineare), gradientRadial e gradientTitle (con focus variabile). L'extrusion 3D permette la messa in rilievo di ogni elemento VML: gli effetti di luce apportando profondità e realismo alle grafica.

VML è un linguaggio che permette realizzazioni complesse su file di formato XML. VML è maneggiabile con JavaScript o JScript e più comodamente con HTML + TIME per le animazioni.

Google Maps utilizza attualmente VML per il reso vettoriale con Internet Explorer, e SVG per i navigatori che lo supportano.

Esempi di codice

Risultato del codice esemplificativo

Il codice VML seguente integrato nel codice HTML mostra una semplice ellisse Archiviato il 12 dicembre 2009 in Internet Archive.:

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

Le regole CSS sono utilizzate per i posizionamenti, la formattazione del testo, le dimensioni e i filtri quando essi possono essere applicati.

La creazione di oggetti “modello” e la loro duplicazione si effettua tramite l'elemento v:shapetype per ogni forma vettoriale, e l'elemento v:vmlframe per i gruppi di oggetti vettoriali.

Qui sotto: Esempio più complesso di combinazioni di elementi ed attributi propri a VML dentro il codice HTML.

Una forma definita da un file XML esterna è introdotta da l'elemento vmlframe su il quale un filtro e applicato. Altre forme periferiche sono calcate su una shapetype. Ogni forma discendente di questa ultima può anche prendere i suoi propri attributi distinti del modello. L'insieme raggruppato dall'elemento "v:group" viene a suo tempo riprodotto da una nuova "vmlframe".

Queste proprietà permettono delle composizioni vettoriali molto ricche utilizzando poche scritture.

Illustrazione di esempi: VML COLORED FIREBALL

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

File XML esterna: "ball.xml"

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

Editori e logistica

Microsoft Office permette di pubblicare grafica VML senza tuttavia utilizzare integralmente i DOM di VML.
LibreOffice permette di creare delle cartelle sostituibili al seguito burocratico di Microsoft con delle grafica convertite in VML.

Altri progetti

Wikimedia Commons contiene immagini o altri file su Vector Markup Language

Collegamenti esterni

Rapporto e dimostrazioni

(EN) Paragone VML/SVG Archiviato il 17 gennaio 2010 in Internet Archive.
(EN) Esempi basici., su midiwebconcept.free.fr. URL consultato il 14 dicembre 2009 (archiviato dall'url originale il 23 marzo 2010).
(FR) Altri esempi notevoli., su midiwebconcept.free.fr. URL consultato il 14 dicembre 2009 (archiviato dall'url originale il 20 luglio 2011).
(EN) Galleria VML., su francoisfabie.free.fr. URL consultato il 5 febbraio 2010 (archiviato dall'url originale il 20 luglio 2011).
(FR) Grafica animate VML + JavaScript., su dhteumeuleu.com. URL consultato il 14 dicembre 2009 (archiviato dall'url originale il 23 giugno 2012).

Tutori, didattici

(FR) Midiwebconcept Tutorial VML., su midiwebconcept.free.fr. URL consultato il 14 dicembre 2009 (archiviato dall'url originale il 20 luglio 2011).
(FR) asp-php.net tutoriel., su asp-php.net.