Vector Markup Language

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

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.

Storica

[modifica | modifica wikitesto]

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

[modifica | modifica wikitesto]

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

[modifica | modifica wikitesto]
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

[modifica | modifica wikitesto]

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

[modifica | modifica wikitesto]

Collegamenti esterni

[modifica | modifica wikitesto]

Rapporto e dimostrazioni

[modifica | modifica wikitesto]
  • (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

[modifica | modifica wikitesto]