VML - Vector Markup Language
11. 02. 2004 | Šimon Grimmich | Webová grafika | Komentáře: 0
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
- 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.
<!-- 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:
Praktická ukázka - graf
Že je VML využitelné i v praxi, dokazuje následující sloupcový graf, k jehož vytvoření bylo použito spojení JavaScriptu a VML.
Další zdroje
- W3C VML specifikace - přehledně a anglicky
- www.p-richards.demon.co.uk - ukázky grafiky
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Průvodce SVG - Scalable Vector Graphics v polovině roku 2006
- Kurz SVG - grafická primitiva
- Kurz SVG - není to Flash a přece se točí!
- Kurz SVG - text
- Kurz SVG - animace (časování)
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
