VML – Vector Markup Language

11. února 2004

•

Vector Markup Language (VML) umožňuje vytváření vektorové grafiky. Možná víte, že k prakticky stejnému účelu slouží SVG, v době vzniku VML však jeho standardizace byla v nedohlednu. Microsoft se rozhodl popohnat věci kupředu a tak se stal VML jediným vektorovým formátem s nativní podporou v prohlížeči www stránek.

VML používá syntaxi XML, tudíž se velmi podobá HTML. Stejně jako HTML popisuje vlastnosti textu, tak VML popisuje grafiku. Pomocí vektorů (linií a křivek), vytváří nové tvary, k jejichž formátování využívá CSS. Protože však jde o proprietární technologii Microsoftu, je zatím jeho podpora implementována jen do MSIE5+, nicméně v jiných prohlížečích nepůsobí žádné potíže, jednoduše se nezobrazí. VML lze přitom vytvářet jak v aplikacích Microsoftu (Office2000 a vyšší), tak v aplikacích jiných společností, jednou z posledních je například program AutoCAD map 2004.

Výhody VML oproti jiným typům grafiky

Možná vás napadne otázka, proč používat VML, když si lze vše nakreslit v nějakém bitmapovém editoru. Vytváření VML grafiky jako takové může být trochu složitější proces (záleží na tom, co chcete nakreslit), ale přeci jen je tu několik nesporných výhod:

Manipulace – pokud jste chtěli změnit text nebo barvu obrázku, museli jste si ho otevřít v grafickém editoru a tam provést změny. Manipulace s prvky VML je v tomto případě mnohem snazší, změny textu, barvy, velikostí se provádějí přímo ve zdrojovém kódu stránky.
Interpretace textu – protože text ve VML grafice je tvořen pomocí HTML, je i nadále interpretován jako text a ne jako bitmapa. Takový text je potom možné kopírovat a je vidět ve zdrojovém kódu (takže ho mohou indexovat vyhledávače a podobně).
CSS – nabízí spoustu vlastností, kterými můžete grafiku měnit. Protože podpora je zajištěna až od MSIE5, je možné použít k doplnění vizuálních efektů filtry CSS.
DHTML – prohlížeče podporující dynamické HTML mohou VML grafiku v závislosti na okolních podmínkách měnit k nepoznání. Můžete vytvářet grafy, animace a podobně.
Poloha objektů – objekty VML nemusí být vykresleny v takovém pořadí, v jakém jsou zapsány ve zdrojovém kódu. S pomocí CSS není problém měnit jejich pozice. Každý spoj linií v grafice má přesně dané souřadnice, které je možno měnit.
Menší datový objem – samotná vektorová grafika je méně objemná než její ekvivalent v bitmapě. Navíc VML vystupuje pouze jako jeden nebo více XML elementů, proto je velikost grafiky srovnatelná s textem. Pouze její načítání je trochu pomalejší než načtení textu.
Rozlišení – odpadávají problémy způsobené rozlišením prohlížeče. VML grafice můžete nastavit libovolnou velikost aniž by došlo ke zkreslení. To oceníte třeba při zvětšování části mapy.
Samostatnost objektů – objekty vystupují ve stránce samostatně, nejsou propojeny. Tuto vlastnost můžete využít při tvorbě klikacích map nebo animací.
Kompatibilita – protože VML je založeno na XML, je kompatibilní s jinými XML aplikacemi a není problém do vlastní aplikace podporu VML integrovat.

Zápis VML

VML je značkovací jazyk tak jako HTML. Ale rozdíl mezi VML a HTML je zcela zásadní. Zatímco HTML ve většině případů jen formátuje obsah, VML obsah formátuje a zároveň i vytváří. Přesto platí, že tvorba VML je úplně stejná jako tvorba HTML. Bohatě si přitom vystačíte s textovým editorem a prohlížečem. Veškerá data tvoří elementy a jejich atributy, které popisují, jak mají být linie pospojovány a formátovány. Samotná grafika se v dokumentu chová jako inline prvek (chová se stejně jako element <span>), nijak se od ostatního textu neodsazuje a zabírá pouze vymezený prostor. VML se používá především k tvorbě dynamické grafiky, ale stejně dobře mohou být prvky VML použity jako navigační tlačítka, šipky a mnoho dalších věcí.

Formát stránky s VML

Dost bylo teorie, teď se podíváme na samotnou grafiku. Než začneme kreslit, je nutné pozměnit v dokumentu pár věcí. VML je založeno na XML a proto je třeba deklarovat příslušné namespace a behavior v hlavičce dokumentu. Následující řádky jsou nutné, aby prohlížeč poznal, že budeme pracovat s VML:

<html xmlns:v=“urn:schemas-microsoft-com:vml“>
<style>v\:* {behavior:url(#default#VML);}</style>

Předdefinované základní tvary

Ve VML, podobně jako v jiných formátech, je definováno několik základních tvarů, jejichž tvorba je zjednodušena do určitého schématu. Pro příklad si ukážeme, jak se definuje obdélník (čtverec).

Jak můžete vidět níže, v případě obdélníku je nejprve uvedena syntaxe XML v:rect, která určuje, o který z předdefinovaných tvarů jde. Dále najdeme nastavení velikosti pomocí CSS. Atribut fillcolor="barva" nastavuje barvu výplně. V druhém příkladě se navíc nachází text formátovaný pomocí HTML. Tato ukázka mluví za vše. VML má stejnou strukturu jako XML, je na něj možné aplikovat kaskádové styly CSS a jeho obsahem může být HTML.

Obdélník:
<v:rect style=“width:100px; height:20px“ fillcolor=“#b3c4fd“></v:rect>
<v:rect style=“width:100px; height:20px“ fillcolor=“#b3c4fd“> <v:textbox><small><center> Obdélník </center></small></v:textbox> </v:rect>
- rect – značí, že jde o obdélník nebo čtverec
- fillcolor – barva výplně, tento atribut je možné použít skoro u všech objektů
- style=“width:100px; height:20px“ – výška 20px, šířka 100px
- <v:textbox> – uzavírá text, který může být tvořen i HTML
Obdélník s oblými rohy:
<v:roundrect style=“width:50px;height:50px“ fillcolor=“#b3c4fd“></v:roundrect>
- roundrect – zaoblený obdélník
Elipsa, kružnice:
<v:oval style=“width:50px;height:50px;“ fillcolor=“#b3c4fd“></v:oval>
<v:oval style=“width:20px;height:50px;“ fillcolor=“#b3c4fd“></v:oval>
- oval – kružnice, kruh
Oblouk:
<v:arc style=“width:120px;height:120px“ startangle=“10″ endangle=“300″ fillcolor=“#b3c4fd“></v:arc>
- arc – oblouk
- startangle – počáteční úhel
- endangle – koncový úhel
Pokud dosadíte za počáteční úhel „0“ a za koncový úhel „360“, vykreslí se kružnice. A pokud dosadíte „0“ a „900“, kruh se dva a půl krát obtočí – výsledkem je obrázek vpravo.
Křivka:
<v:curve from=“20px,0px“ to=“140px,60px“ control1=“60px,60px“ control2=“100px,0px“></v:curve>
- curve – křivka
- from – počáteční poloha
- to – koncová poloha
- control1 – první bod, kterým křivka prochází
- control2 – druhý bod, kterým křivka prochází
Linka:
<v:line from=“0,10″ style=“height:70px“ to=“30,70″></v:line>
- line – linka
- from=“0,10″ – kde linka začíná x=0, y=10
- to=’30,40′ – kde linka končí x=30, y=40

Vlastní objekty

Samozřejmě, vystačit si pouze s předdefinovanými tvary nelze. Proto je možné vykreslit libovolný objekt pomocí skupiny souřadnic.

VML - vlastní tvary

<!– trojúhelník //–>
<v:shape style=“width: 60; height: 60″ stroke=“true“ strokecolor=“black“ strokeweight=“1″ fill=“true“ fillcolor=“white“ coordorigin=“0 0″“>
<v:path v=“m 0,0l 60,60,0,60x e“/>
</v:shape>
<!– šestiúhleník //–>
<v:shape style=“width: 60; height: 60″ stroke=“true“ strokecolor=“black“ strokeweight=“1″ fill=“true“ fillcolor=“white“ coordorigin=“0 0″ coordsize=“60 60″>
<v:path v=“m 30,0l 60,15,60,45,30,60,0,45,0,15x e“/>
</v:shape>
<!– věžička //–>
<v:shape style=“width: 60; height: 60″ stroke=“true“ strokecolor=“black“ strokeweight=“1″ fill=“true“ fillcolor=“white“ coordorigin=“0 0″ coordsize=“60 60″>
<v:path v=“m 30,0l 60,15,60,60,0,60,0,15x e“/>
</v:shape>

<v:shape> – nastavuje barvy, ohraničení a velikost zatím neznámého tvaru
atribut coordsize – nastavuje počátky osy x a y
atribut coordsize – nastavuje velikost objektu
<v:shape> určuje body, kterými bude linie postupně procházet. Souřadnice m 30,0l je poloha prvního bodu tvaru (x=30,y=0), souřadnice 0,15x e je poloha posledního bodu, který bude spojen s prvním. Vždy dvojice po počátečním bodu tvoří polohu bodu, který bude spojen s předchozím a následujícím.

Poloha objektů

Již jsem zmínil, že VML grafika se chová jako element <span>. Vždy se zadává pozice bodu, kterým buď linie (křivka) prochází, nebo body, kde vektor začíná a končí. Co se týče jejich pozice, nejde o absolutní pozice vzhledem ke stránce (tu je možné také nastavit pomocí CSS), ale vzhledem k objektu VML, kdy levý horní roh grafiky má pozici [0,0], směrem dolů a doprava se pozice zvyšuje (soustava souřadnic obrácená vzhůru nohama), viz obrázek:

VML - souřadnice