1 České vysoké učení technické v Praze Fakulta stavební SVG a XSL transformace využitelné v kartografii BAKALÁŘSKÁ PRÁCE Praha, 2011 Autor: Filip Zava...
ˇ ´ ˇen´ı technick´ Cesk e vysok´ e uc e v Praze Fakulta stavebn´ı
SVG a XSL transformace vyuˇ ziteln´ e v kartografii ´ RSK ˇ ´ PRACE ´ BAKALA A
Praha, 2011
Autor: Filip Zavadil
ˇ ´ ˇen´ı technick´ Cesk e vysok´ e uc e v Praze Fakulta stavebn´ı
´ RSK ˇ ´ PRACE ´ BAKALA A SVG a XSL transformace vyuˇ ziteln´ e v kartografii SVG and XSL transformations used in cartography Vedouc´ı pr´ ace: Ing. Jiˇ r´ı Cajthaml, Ph.D.
Praha, 2011
Autor: Filip Zavadil
i
CESKE VYSOKE UCENi TECHNICKE
v PRAZE
Fakulta stavebni
Thakurova 7, 166 29 Praha 6
,
'V
,
ZADANI BAKALARSKE PRAcE studijni program:Q~
Geoinformatika
akademicky rok:
2010/2011
Jmeno a pfijmeni studenta:
Zavadil
....C.m .....£ ....m.....: ...: .. c :.~.cc............................
Nazev bakalarske prace: N azev bakalarske prace v anglickem jazyce
~yQ.~ . ?f~!:!~~~~f'?~~~~~~~!~!t.:1..~ . y~~~'?~~f.i.i. SVG and XSL transformations used in cartography
Ramcov}' obsah bakalarske prace:
~
yYy
. . p
Datum zadani bakalarske prace:
16.2.2011
Termin odevzdani:
13.5.2011 (vyplr1te posledni den vYuky pi'islusneho semestru)
Pokud student neodevzdal bakalarskou praci v urcenem terminu, tuto skutecnost predem pisemne zduvodnil a omluva byla dekanem umana, stanovi dekan studentovi nahradni termin odevzdani bakalarske prace. Pokud se vsak student radne neomluvil nebo omluva nebyla dekanem uznana, muze si student zapsat bakalarskou praci podruhe. Studentovi, ktery pri opakovanem zapisu bakalarskou praci neodevzdal v urcenem terminu a tuto skutecnost rarlne neomluvil nebo omluva nebyla dekanem umana, se ukoncuje studium podle § 56 zakona 0 VS c. 11111998. (SZR CVUT cl. 21 , odst. 4)
Student bere na vedomi, i e je povinen vypracovat bakalarskou praci samostatne, bez cizi pomoci, s vyjimkou poskytnurych konzultaci. Seznam pouiite literatury, jinych pramenu a jmen konzultantu je tfeba uvest v balmldfskt! praci. ~
· · · ~~d~::[b~i~; .:,~· · · · Zadani bakalarske prace prevzal dne:
· · · · · · · · ~~d~~~i·~· · · · ---.-~~S:-~.-
-
..
.../-~............................. . student
Formular nutno vyhotovit ve 3 yYtiscich - Ix katedra, Ix student, Ix studijni odd. (zasle katedra) Nejpozdeji do konce 2. rydne ryuky v semestru odes Ie katedra 1 kopii zadani BP na studijni oddeleni a prove de zapis udaju rykajicich se BP do databaze KOS. BP zadava katedra nejpozdeji 1. ryden semestru, v nemz rna student BP zapsanou. (Smernice dekana pro realizaci studijnich programu a SZZ na FSv CVUT cl. 5, odst. 7)
Prohl´ aˇsen´ı Prohlaˇsuji, ˇze jsem svou bakal´aˇrskou pr´aci na t´ema SVG a XSL transformace vyuˇziteln´e ” v kartografii“ vypracoval samostatnˇe a pouˇzil jsem pouze podklady uveden´e v pˇriloˇzen´em seznamu.
V Praze dne podpis
Abstrakt V t´eto pr´aci se pojedn´av´a o z´akladech zobrazov´an´ı poˇc´ıtaˇcov´e grafiky. Jsou zde shrnuty z´akladn´ı vlastnosti rastrov´e a vektorov´e reprezentace obrazov´ych dat. D´ale se pr´ace podrobnˇe vˇenuje ˇsk´alovateln´emu vektorov´emu grafick´emu form´atu SVG. Jsou zde pops´any z´akladn´ı prvky a vlastnosti tvoˇr´ıc´ı SVG dokument. D´ale je pojedn´ano o sty” lov´ych“ jazyc´ıch (CSS, XSL), kter´e je vhodn´e spolu s SVG vyuˇz´ıvat. Praktick´a uk´azka je celistv´ym spojen´ım poznatk˚ u o SVG. Je zde demonstrov´ano pouˇzit´ı rozliˇsn´ych prvk˚ u tohoto jazyka, kter´y je v t´eto pr´aci konfrontov´an s kartografi´ı.
Kl´ıˇ cov´ a slova grafika, vektor, rastr, SVG, XML, CSS, XSL, XPath, JavaScript
Abstract This thesis shows the basics of computer graphics. There is a summary of key properties of raster and vector image data. The main emphasis is on Scalable Vector Graphics which is explained in detail. In addition, styling languages (like CSS, XSL) are also covered thanks to a close relationship with SVG. A sample study demonstrates the application of various SVG elements into practice and its confrontation with cartography.
Seznam obr´ azk˚ u 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
ˇ Casov´ a osa vybran´ych kl´ıˇcov´ych moment˚ u . . . . . . . . . . . Popis b´ezierovy kˇrivky . . . . . . . . . . . . . . . . . . . . . . Zn´azornˇen´ı odliˇsn´eho zp˚ usobu z´aznamu obrazov´ych informac´ı . Ikony vybran´ych grafick´ych form´at˚ u a editor˚ u . . . . . . . . . Uk´azka struktury dokumentu IBM GML . . . . . . . . . . . . Popis nejjednoduˇsˇs´ıho XML dokumentu . . . . . . . . . . . . XML dokument popisuj´ıc´ı geobod . . . . . . . . . . . . . . . . Stromov´a struktura XML elementu . . . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. 4 . 4 . 5 . 8 . 8 . 9 . 10 . 10
3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10
Nˇekter´a z ofici´aln´ıch log form´atu SVG . . . . . . . . . . . . . . . Pod´ıl pouˇz´ıvan´ych internetov´ych prohl´ıˇzeˇc˚ u ve svˇetˇe v lednu 2011 Element path a pˇr´ıkazy M, L pro vykreslov´an´ı u ´ seˇcek . . . . . . . Element path a pˇr´ıkazy H, V pro vodorovn´e a svisl´e u ´ seˇcky . . . . Element path a pˇr´ıkazy C,S pro kubickou B´ezierovu kˇrivku . . . . Element path a pˇr´ıkaz arc pro eliptickou v´yseˇc . . . . . . . . . . Pˇrehled z´akladn´ıch atribut˚ u pro pr´aci s textem . . . . . . . . . . . Pˇrehled souˇradnicov´eho syst´emu a d´elkov´ych jednotek . . . . . . . Uk´azka pouˇzit´ı rastrov´ych obrazov´ych dat . . . . . . . . . . . . . Praktick´e vyuˇzit´ı filtr˚ u pro symbol informaˇcn´ıch center . . . . . .
Kartogram Evropa, HDP na obyvatele . . . . . . . . . . . ˇ . . . . . . . . . Uk´azka kartografick´ych prvk˚ u na mapˇe CR Uk´azka nˇekter´ych symbol˚ u vytvoˇren´ych v SVG . . . . . . Uk´azka autorsk´e funkce v jazyce Javascript . . . . . . . . . Struktura adres´aˇr˚ u na dom´enˇe http://svg.filipzava.cz
vi
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
45 47 52 53 53
´ Kapitola 1. Uvod
1
Kapitola 1 ´ Uvod V dneˇsn´ı dobˇe se drtiv´a vˇetˇsina kartografick´ych prac´ı prov´ad´ı v digit´aln´ı formˇe na poˇc´ıtaˇc´ıch a tato skuteˇcnost s sebou nese probl´em, jak grafick´a data ukl´adat. Rastrov´y model jako nosiˇc nen´ı vhodn´y, jelikoˇz nezachov´av´a geometrick´e vyj´adˇren´ı objekt˚ u. Proto je vyuˇz´ıv´an vektorov´y form´at, kter´ych je dnes velk´e mnoˇzstv´ı. Vˇetˇsina vektorov´ych grafick´ych a kartografick´ych editor˚ u vyuˇz´ıv´a vlastn´ı form´at, kter´y je v´ıce ˇci m´enˇe otevˇren´y. Tato pr´ace popisuje nejzn´amˇejˇs´ı a nejpouˇz´ıvanˇejˇs´ı rastrov´e i vektorov´e form´aty s detailn´ım zamˇeˇren´ım na form´at SVG (Scalable Vector Graphics). Hlavn´ım d˚ uvodem pro v´ybˇer SVG je jeho otevˇrenost a tedy nez´avislost na propriet´arn´ıch aplikac´ıch nebo platform´ach. Mezi dalˇs´ı klady SVG patˇr´ı jeho jednoznaˇcn´a kompatibilita s internetov´ym prostˇred´ım, zp˚ usoben´a pouˇzit´ım stejn´ych technologi´ı. V pr˚ ubˇehu pr´ace, kdy jsou popisov´any jednotliv´e prvky SVG jazyka, je uv´adˇen jejich vztah a pˇr´ıpadn´e vyuˇzit´ı pro kartografick´e u ´ˇcely. Jak jiˇz bylo ˇreˇceno v u ´ vodn´ı kapitole, pr´ace se zab´yv´a obecnou problematikou poˇc´ıtaˇcov´e grafiky. Jsou zde tak´e uvedeny hlavn´ı softwarov´e firmy a jejich vliv na v´yvoj grafick´ych form´at˚ u. Jelikoˇz form´at SVG je dialektem znaˇckovac´ıho jazyka XML, je v pr´aci uveden tak´e u ´ vod do XML popisuj´ıc´ı jeho v´yvoj, z´akladn´ı charakteristiky a zp˚ usoby pouˇzit´ı. D˚ uleˇzit´e je tak´e sezn´amen´ı s ˇcasto vyuˇz´ıvan´ymi pojmy. Druh´a kapitola je vˇenov´ana jazyku SVG. Popis je doprov´azen autorsk´ymi n´azorn´ymi obr´azky s uveden´ym zdrojov´ym k´odem a vizualizac´ı. Kr´atce je zm´ınˇeno o v´yvojov´ych verz´ıch a jejich kompatibilitˇe s dneˇsn´ımi internetov´ymi prohl´ıˇzeˇci. N´asleduje popis vˇsech geometrick´ych prvk˚ u, jejich zp˚ usobu z´apisu a z´akladn´ıch vlastnost´ı. Vˇzdy je u kaˇzd´eho uveden tak´e v´yznam pro kartografick´e u ´ˇcely. D˚ uleˇzitou souˇc´ast´ı je styl vykreslov´an´ı prvk˚ u (barva a tlouˇst’ka tahu, styl v´yplnˇe atd.). Neopom´ıjen´ym prvkem je z´apis textov´eho ˇretˇezce a nastaven´ı jeho vlastnost´ı. I kdyˇz je SVG vektorov´y form´at je schopen ukl´adat rastrov´a data a prov´adˇet s nimi r˚ uzn´e efekty pomoc´ı definovan´ych filtr˚ u. D´ıky XML z´aklad˚ um je zde nab´ıdnuta moˇznost ukl´adat i jin´e neˇz obrazov´e informace. Tato skuteˇcnost nahr´av´a pouˇzit´ı SVG jako jednoduch´y GIS form´at. Moˇzn´y je tak´e z´apis metadat. Pro urˇcen´ı zp˚ usobu vykreslen´ı je vhodn´e pouˇz´ıt takzvan´e stylov´e soubory. Jedn´a se o dokumenty, kde jsou nastaveny pravidla zobrazen´ı SVG geometrick´ych prvk˚ u. Mezi dva nejvyuˇz´ıvanˇejˇs´ı patˇr´ı CSS a XSL, kdy kaˇzd´y se hod´ı k trochu jin´emu u ´ˇcelu. V pr´aci jsou uvedeny z´aklady tˇechto stylov´ych jazyk˚ u, doplnˇen´e o pˇr´ıklady pouˇzit´ı.
Filip Zavadil
13. kvˇetna 2011
´ Kapitola 1. Uvod
2
Nejlepˇs´ı cestou jak porozumˇet dan´e problematice je praktick´e vytvoˇren´ı SVG aplikace. Protoˇze je SVG navrˇzeno pro web, m˚ uˇze b´yt aplikace interaktivn´ı. Pouˇzit´ım dalˇs´ıch technologi´ı (JavaScript) je dod´ana i dynamiˇcnost. V posledn´ı kapitole jsou mimo jin´e uvedeny zp˚ usoby z´ısk´an´ı ˇci exportu dat do SVG form´atu. Jednotliv´e poznatky zjiˇstˇen´e v pr˚ ubˇehu pr´ace a celkov´e shrnut´ı je uvedeno na samotn´y z´avˇer pr´ace.
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
3
Kapitola 2 V´ yvoj pˇ red SVG 2.1 2.1.1
Poˇ c´ıtaˇ cov´ a grafika obecnˇ e Geometrick´ e z´ aklady
Geometrick´e z´aklady uˇz´ıvan´e poˇc´ıtaˇcov´ym zpracov´an´ım grafick´ych dat se datuj´ı uˇz 300-250 pˇr.n.l., kdy se jim vˇenoval ˇreck´y matematik a geometr Euklides ve sv´ych spisech. Filippo Brunelleschi (1377-1446) objevil line´arn´ı perspektivu, tedy prvn´ı vizualizaci 3D prostoru. Ren´e Descartes (1596-1650) je jeden ze zakladatel˚ u analytick´e geometrie, zavedl tak´e kart´ezsk´y syst´em souˇradnic a t´ım z´aklady pro popis objekt˚ u v 2D prostoru. James Joseph Sylvester (1814-1897) popsal maticovou notaci, vyuˇz´ıvanou v informatice pro geometrick´e transformace. Pierre B´ezier zavedl popis b´ezierovy kˇrivky vyuˇz´ıvan´y ve vektorov´ych grafick´ych form´atech.
2.1.2
V´ yvoj technologi´ı
Od doby, kdy se zaˇcaly v´ypoˇcetn´ı technologie rozˇsiˇrovat, zaznamenala oblast poˇc´ıtaˇcov´eho zpracov´an´ı grafick´ych dat velk´y pokrok. V roce 1897 byla nˇemeck´ym fyzikem Karlem Ferdinandem vynalezena katodov´a trubice, kter´a dala vznik televiz´ım a CRT monitor˚ um. Tato skuteˇcnost spolu s vyn´alezem tranzistoru v roce 1947 v Bellov´ych laboratoˇr´ıch dala z´aklad pro rozvoj poˇc´ıtaˇcov´e grafiky. Mezi dalˇs´ı v´yznamn´e miln´ıky patˇr´ı zaveden´ı pojmu poˇc´ıtaˇcov´a grafika (William Fetter, 1964). O rok pozdˇeji pˇrich´az´ı na svˇet tzv. Bresenham˚ uv algoritmus, kter´y popisuje vykreslov´an´ı ˇcar do rastrov´eho pole (pouˇzit´ı v nynˇejˇs´ıch rastrov´ych monitorech) [Sho00]. Firma Apple Computer v roce 1977 pˇredstavuje prvn´ı barevn´y grafick´y mikropoˇc´ıtaˇc Apple II. V 80. letech se pˇredstavuje ˇrada poˇc´ıtaˇc˚ u Apple Macintosh s grafick´ym uˇzivatelsk´ym rozhran´ım (GUI) a poˇc´ıtaˇcovou myˇs´ı. Od 90. let, kdy pˇrich´az´ı Bill Gates s operaˇcn´ım syst´emem Windows 3.0, se osobn´ı poˇc´ıtaˇce masivnˇe rozˇsiˇruj´ı do pracoviˇst’ a dom´acnost´ı. Dalˇs´ım mezn´ıkem pro poˇc´ıtaˇcovou grafiku byl v´yvoj internetu. V roce 1969 byla sestavena prvn´ı experiment´aln´ı s´ıt’ ARPANET a o ˇctyˇri roky pozdˇeji vyvstaly u ´ vahy vedouc´ı k nynˇejˇs´ımu protokolu TCP/IP. V roce 1987 je do s´ıtˇe pˇripojeno 27 000 stanic a ˇ a republika a CVUT ˇ vznik´a pojem internet. Roku 1992 je ofici´alnˇe pˇripojena Cesk´ v Praze. Zhruba o 2 roky pozdˇeji se internet komercializuje a t´ım doch´az´ı k masov´emu n´ar˚ ustu
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
4
uˇzivatel˚ u. Po roce 2005 je zaznamen´ana miliarda uˇzivatel˚ u. St´ale v´ıce se prosazuje on-line obsah i v oblasti kartografie. Vznikaj´ı nov´e grafick´e form´aty zamˇeˇren´e pˇr´ımo pro internet. vývoj software & hardware
vynález tranzistoru vynález katodové trubice bézierova křivka (Karl Ferdinand) (Pierre Bézier) maticový zápis první verze SVG (James J. Sylvester)
19
to let í
to let í .s 17
to let í .s 15
př 3.
6.
st.
st.
př
.n.
.n.
l.
l.
matematické základy první použití počátky analytické geometrické perspektivního geometrie základy Pythagorova věta zobrazení (Euklides) (Fillipo Brunelleschi) (René Descartes) (Pythagoras)
ˇ Obr´azek 2.1: Casov´ a osa vybran´ych kl´ıˇcov´ych moment˚ u
2.2 2.2.1
Vektorov´ a a rastrov´ a grafika Vektorov´ a reprezentace
Vektorov´a grafika m´a z´aklady v analytick´e geometrii. Ukl´adaj´ı se parametry geometrick´ych tˇeles, jejich poloha, popˇr. v´yplˇ n. Francouzsk´y matematik a konstrukt´er Pierre B´ezier popsal kˇrivku pomoc´ı ˇctyˇr bod˚ u. Jedn´a se o krajn´ı body a tzv. body kotevn´ı a kontroln´ı viz. obr.ˇc. 2.2. Krajn´ımi a kotevn´ımi body kˇrivka proch´az´ı a pomoc´ı kontroln´ıch bod˚ u (teˇcny kˇrivky) lze urˇcovat jej´ı zakˇriven´ı. Skl´ad´an´ım tˇechto kˇrivek lze popsat libovoln´y zakˇriven´y tvar. Sloˇzitˇejˇs´ı v´ykres je sloˇzen z primitivn´ıch tvar˚ u tzv. objekt˚ u. Napˇr´ıklad jednoduch´a kresba snˇehul´aka je pops´ana pomoc´ı tˇr´ı kruˇznic, kde jsou uloˇzeny jen hodnoty polomˇeru a souˇradnice stˇred˚ u kruˇznic. Je zjevn´e, ˇze takto popsan´a kresba nebude n´aroˇcn´a na pamˇet’ poˇc´ıtaˇce a datov´a velikost souboru bude minim´aln´ı. Jelikoˇz jsou data pops´ana matematicky, nedoch´az´ı pˇri zvˇetˇsen´ı v´ykresu k poklesu kvality. Protoˇze se jednotliv´e kresby ukl´adaj´ı jako objekty (bod, u ´ seˇcka, polygon, kˇrivka atd.), mohou se jednoduˇse prov´adˇet modifikace (napˇr. zvˇetˇsen´ı polomˇeru kruˇznice, translace, atd.), aniˇz by to mˇelo vliv na ostatn´ı objekty. Tato struktura je vhodn´a k uloˇzen´ı dat m´enˇe tvarovˇe rozmanit´ych. Vyuˇz´ıv´a se pˇri tvorbˇe firemn´ıch log, sch´ematick´ych obr´azk˚ u a diagram˚ u, technick´ych v´ykres˚ u (CAD) a animac´ı. D´ıky sv´e mal´e datovˇe objemov´e n´aroˇcnosti je vektorov´a grafika vhodn´a pro internet, kde se st´ale v´ıce prosazuje. kotevní body
koncový bod
počáteční bod kontrolní body
Obr´azek 2.2: Popis b´ezierovy kˇrivky
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
2.2.2
5
Rastrov´ a reprezentace
Rastrov´y (ˇcasto t´eˇz bitmapov´y ) zp˚ usob popisu obrazov´ych informac´ı ukl´ad´a informace o jednotliv´ych prvc´ıch um´ıstˇen´ych na mˇ r´ıˇ zce. Mˇr´ıˇzka (rastr) m˚ uˇze b´yt sloˇzena z r˚ uzn´ych tvar˚ u (troj´ uheln´ık, obd´eln´ık, ˇsesti´ uheln´ık), avˇsak nejˇcastˇeji je tvoˇrena ˇctverci tzv. pixely. Kaˇzd´y prvek mˇr´ıˇzky nese urˇcitou hodnotu (nejˇcastˇeji se jedn´a o hodnotu barvy). Pamˇet’ov´a z´atˇeˇz bude logicky silnˇe z´avisl´a na rozmˇeru v´ysledn´eho obr´azku. Rastrov´y popis v´yˇse uveden´e kresby snˇehul´aka bude tedy n´aroˇcnˇejˇs´ı. Kruˇznice bude reprezentov´ana vyplnˇen´ymi pixely a jejich poˇcet bude z´aleˇzet na obrazov´em rozliˇsen´ı. Aby se kruˇznice jevila realisticky a nebyla kostrbat´a“, je nutn´e volit vˇetˇs´ı rozliˇsen´ı, ˇc´ımˇz ale dojde i ” ke zvˇetˇsen´ı datov´e velikosti souboru na pamˇet’ov´em m´ediu. Fotografie jsou typick´ym pˇredstavitelem rastrov´e grafiky, protoˇze obsahuj´ı velk´y poˇcet rozmanit´ych a tud´ıˇz tˇeˇzko matematicky popsateln´ych tvar˚ u. V tomto pˇr´ıpadˇe je vektorov´y model nevhodn´y. Tak´e metoda sbˇeru dat (osv´ıcen´ı CMOS ˇcipu fotoapar´atu) zaznamen´av´a skuteˇcnost do mˇr´ıˇzky a nepopisuje ji matematicky. Nad bitmapov´ymi obr´azky lze s v´yhodou aplikovat spoustu filtr˚ u a efekt˚ u.
2.2.3
V´ yhody a nev´ yhody
Nelze obecnˇe ˇr´ıci, jak´y zp˚ usob je v´yhodnˇejˇs´ı. Vˇzdy z´aleˇz´ı na rozsahu a rozmanitosti kresby, zadan´emu u ´ˇcelu a zp˚ usobu sbˇeru dat. Pro zn´azornˇen´ı technick´ych v´ykres˚ u je vhodn´y vektorov´y model. Pro v´ykresy, kter´e se maj´ı bl´ıˇzit realitˇe je zase vhodnˇejˇs´ı rastrov´y model. S nads´azkou si lze pˇrestavit, ˇze Pablo Picasso by pro sv´e kubistick´e malby zvolil vektorov´y form´at a Claude Monet v obdob´ı impresionismu by pouˇzil vhodnˇejˇs´ı rastrov´y form´at. V oboru geod´ezie a kartografie jsou vyuˇz´ıv´any oba typy dat. Napˇr. produktem fotogrammetrie a d´alkov´eho pr˚ uzkumu Zemˇe je rastrov´y obsah. Naopak grafick´e zpracov´an´ı geodetick´eho mˇeˇren´ı je vektorov´y v´ykres. Vizu´aln´ı rozd´ıly obou zp˚ usob˚ u jsou zobrazeny na obr. 2.3 1 2 3 4 5 6 7 8 9 10 11
Informace jsou na pamˇet’ov´ych medi´ıch ukl´ad´ana v bitech a tvoˇr´ı posloupnost jedniˇcek a nul. Form´at souboru sdˇeluje procesoru, jak danou posloupnost rozk´odovat (ˇcten´ı) nebo zak´odovat (z´apis). Pro reprezentaci grafick´ych dat bylo vytvoˇreno mnoho form´at˚ u pro vektorov´a i rastrov´a data.
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
2.3.1
6
Form´ aty vektorov´ e grafiky
Kaˇzd´y v´yznamnˇejˇs´ı v´yrobce softwaru pro zpracov´an´ı vektorov´e grafiky si vytv´aˇr´ı vlastn´ı v´ymˇenn´y form´at, kter´y pr˚ ubˇeˇznˇe inovuje a doplˇ nuje. Vznikaj´ı tak probl´emy se zpˇetnou kompatibilitou a nezˇr´ıdka je tato skuteˇcnost ˇreˇsena vyd´an´ım nov´eho form´atu. M´enˇe ˇcast´ym jevem je vz´ajemn´a kompatibilita mezi aplikacemi. Hlavnˇe tv˚ urci propriet´arn´ıho softwaru vyv´ıjej´ı a bedlivˇe si stˇreˇz´ı vlastn´ı uzavˇren´y form´at (tato pr´ace pojedn´av´a o otevˇren´em form´atu). Vektorov´e grafick´e form´aty lze dle [Tiˇs07] rozdˇelit na tyto skupiny: V´ yznamnˇ ejˇ s´ı souborov´ e form´ aty urˇ cen´ e pro 2D grafiku a CAD • CDR je sloˇzitˇejˇs´ı propriet´arn´ı form´at vyv´ıjen´y spoleˇcnost´ı Corel Corporation, je vyuˇz´ıvan´y v softwaru CorelDRAW. Mezi jeho odvozeniny patˇr´ı: CDX, CDT, CMX. Form´at podporuje v´ıcestr´ankov´y dokument. • AI nativn´ı form´at aplikace Adobe Illustrator je velmi podobn´y form´atu PDF. Podporuje vrstvy, ale nepodporuje v´ıcestr´ankov´y dokument ani animace. • DXF (Drawing eXchange Format) je textov´y form´at vyvinut´y spoleˇcnost´ı AutoDesk. Tento form´at podporuje vˇetˇsina CAD syst´em˚ u. Jeho bin´arn´ı podoba m´a pˇr´ıponu DXB. • DWG (DraWinG) je dalˇs´ım CAD/CAM form´atem spoleˇcnosti AutoDesk. Umoˇzn ˇ uje ukl´adat 2D i 3D data. • DGN (DesiGN) je nativn´ı form´at CAD programu MicroStation od Bentley Systems. • SHP (SHaPefile) je p˚ uvodn´ı bin´arn´ı form´at softwaru ESRI ArcMap. Popisuje geometrick´e prvky (point, line, polygon) a se soubory typu SHX a DBF tvoˇr´ı geodatab´azi. Jedn´a se o nejrozˇs´ıˇrenˇejˇs´ı form´at pro GIS aplikace. • OCD je intern´ı form´at kartografick´eho softwaru OCAD. Form´ aty urˇ cen´ e pro tisk a metaform´ aty • PS (PostScript) je jeden z v´ymˇenn´ych tiskov´ych form´at˚ u vyvinut´y spoleˇcnost´ı Adobe Systems (1985). Jde o popis dokumentu pomoc´ı programovac´ıho jazyka. • EPS (Encapsulated PostScript) je odvozenina PS form´atu urˇcen´a pro popis obr´azku. • PDF (Portable Document Format), navrˇzen´y spoleˇcnost´ı Adobe je na platformˇe nez´avisl´y v´ymˇenn´y form´at zaloˇzen´y na jazyce PostScript a v souˇcasn´e dobˇe velmi rozˇs´ıˇren. Form´at je schopen n´est i rastrov´a obrazov´a data a metadata aplikac´ı, ve kter´ych byl vytvoˇren. Zejm´ena produkty firmy Adobe jsou schopn´e si v tomto form´atu uchovat i nastaven´ı, vrstvy nebo objekty vyuˇziteln´e pro pozdˇejˇs´ı editaci. • WMF, EMF (Windows MetaFile, Enhanced Windows MetaFile) je vyv´ıjen´y spoleˇcnost´ı Microsoft pro operaˇcn´ı syst´em MS Windows. Ukl´ad´a geometrick´e objekty i vybran´e pˇr´ıkazy.
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
7
• SWF (Shockwave Flash) je propriet´arn´ı multimedi´aln´ı form´at obsahuj´ıc´ı nejen vektorov´e prvky. Byl vyv´ıjen spoleˇcnost´ı Macromedia (nyn´ı Adobe Labs), kter´a tak´e vyd´av´a editor Adobe Flash. I pˇres svou nesvobodu je silnˇe rozˇs´ıˇren na webov´em prostˇred´ı a je konkurentem otevˇren´eho form´atu SVG. Grafick´ e vektorov´ e form´ aty zaloˇ zen´ e na XML technologii • SVG (Scalable Vector Language) je pˇredmˇetem t´eto pr´ace. Bliˇzˇs´ı sezn´amen´ı od kapitoly 3. W3C standardem se stal v roce 1999. • VML (Vector Markup Language) je form´at starˇs´ı neˇz SVG, kter´y se ale pˇr´ıliˇs neprosadil. Jeho pˇr´ıpony jsou .htm nebo .html. W3C Standard v roce 1998. • PGML (Precision Graphics Markup Language) je dalˇs´ı pˇredch˚ udce SVG v dneˇsn´ı dobˇe jiˇz nevyuˇz´ıvan´y. W3C Standardem se stal v roce 1998.
2.3.2
Form´ aty rastrov´ e grafiky
Rastrov´e form´aty se od sebe rozliˇsuj´ı pouˇzit´ymi kompresn´ımi algoritmy (LZW, JPEG, RLE, Huffmanovo k´odov´an´ı). Nejbˇ eˇ znˇ ejˇ s´ı rastrov´ e form´ aty • PNG (Portable Network Graphics) je n´astupce GIFu. Pouˇz´ıv´a bezztr´atovou kompresi a jeho prvn´ı verze vyˇsla v roce 1996 (Standard W3C). Jelikoˇz podporuje transparentn´ı pozad´ı je hojnˇe pouˇz´ıvan´y v internetov´em prostˇred´ı. • JPEG (Joint Photographic Experts Group) je ztr´atov´y komprimaˇcn´ı algoritmus a tak´e form´at souboru. Je vhodn´y k pouˇzit´ı u obr´azk˚ u, kde se nevyskytuj´ı ostr´e hrany (narozd´ıl od form´atu PNG). Je klasick´ym v´ystupem digit´aln´ıch fotoapar´at˚ u. • BMP (Microsoft Windows Bitmap), jeho prvn´ı verze byla pˇredstavena v roce 1988. Obr´azky jsou ukl´ad´any po jednotliv´ych pixelech a proto je souborov´a velikost znaˇcnˇe vˇetˇs´ı neˇz u pˇredchoz´ıch form´at˚ u. • TIFF (Tag Image File Format) pouˇz´ıv´a libovolnou dostupnou kompresi a je schopen ukl´adat v´ıcestr´ankov´e dokumenty. Vznikl jako vstupn´ı form´at pro scannery a faxov´e pˇr´ıstroje. Jeho varianta GeoTIFF umoˇzn ˇ uje nosit tak´e prostorov´a data. • GIF (Graphics Interchange Format) vyuˇz´ıv´a bezztr´atovou kompresi LZW84. Kv˚ uli tomuto komprimaˇcn´ımu algoritmu, kter´y byl patentovˇe chr´anˇen, je nahrazen form´atem PNG. Je ovˇsem schopen animace, proto byl dˇr´ıve hojnˇe vyuˇz´ıv´an na internetu v reklamn´ıch bannerech. Form´ aty rastrov´ ych editor˚ u • PSD je nativn´ı form´at aplikace Adobe Photoshop. Je schopen ukl´adat metadata jako vrstvy, kan´aly, cesty, nastaven´ı pr˚ uhlednosti atd. • XCF je p˚ uvodn´ı form´at freewarov´eho programu GIMP (GNU Image Manipulation Program). Uchov´av´a podobn´e informace jako pˇredchoz´ı PSD.
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
8
Obr´azek 2.4: Ikony vybran´ych grafick´ych form´at˚ u a editor˚ u
2.4
´ Uvod do XML
Pˇri v´yvoji v´ypoˇcetn´ı technologie vyvstal probl´em jak stroji sdˇelit v´yznam jednotliv´ych ˇc´ast´ı textu a jak je v textu oznaˇcovat. Za analogovou formu lze povaˇzovat ruˇcn´ı vpisov´an´ı pozn´amek mezi autor˚ uv text tˇreba pro potˇreby form´atov´an´ı obsahu pro tisk. Pr´avˇe zde byl inspirov´an v´yvoj tzv. znaˇ ckovac´ıch jazyk˚ u. Obsah dokumentu t´ım z´ıskal hierarchickou strukturu a mohl b´yt pouˇzit k v´ıce u ´ˇcel˚ um. Tak´e mohl b´yt jednoduˇseji transformov´an pro jin´a zaˇr´ızen´ı a st´aval se tedy kompatibiln´ım prostˇredkem mezi syst´emy. Jelikoˇz je pˇredmˇetem t´eto pr´ace form´at SVG, kter´y je odvozen z jazyka XML s pevn´ym DTD, budou v t´eto kapitole pops´any z´akladn´ı principy a syntaxe jazyka XML. IBM GML lze povaˇzovat za prvn´ı znaˇckovac´ı jazyk. Vytvoˇren byl v 60-t´ych letech minul´eho stolet´ı v IBM laboratoˇr´ı. Za jeho v´yvojem st´ali p´anov´e Charles Goldfarb, Edward Mosher a Raymond Lorie1 . V´ysledn´y dokument byl ASCII text s hierarchick´ym popisem obsahu. Pˇr´ıklad jeho z´apisu je na uk´azce ˇc. 2.5.
:h1.Kapitola 1: Uvod :p.Znacka uvozujici odstavec :oil :li.prvni polozka seznamu :li.druha polozka seznamu :eol. :p.Nazvy tagu jsou dodnes vyuzivany.
Obr´azek 2.5: Uk´azka struktury dokumentu IBM GML
Dalˇs´ım produktem zaloˇzen´ym na GML je znaˇckovac´ı jazyk SGML (Standard Generalized Markup Language) vyvinut´y jako univerz´aln´ı jazyk pro v´ymˇenu informac´ı mezi poˇc´ıtaˇci, kter´y umoˇzn ˇ oval definici vlastn´ıch znaˇcek. Byl pˇrijat jako ISO norma (8879) v roce 1986. Instrukce pro oznaˇcen´ı obsahu jsou vloˇzeny mezi tzv. ˇ r´ıd´ıc´ı znaky (ostr´e z´avorky <,>“). Poprv´e byl pouˇzit DTD (Document Type Definition), kde jsou uvedeny ” definice dostupn´ych element˚ u (znaˇcek). Jelikoˇz se jedn´a o bezkontextov´y jazyk2 , jednotliv´e elementy se nemohou pˇrekr´yvat, ale mohou se vnoˇrovat. Rozˇs´ıˇren´ı tohoto jazyka pomohlo americk´e ministerstvo obrany, kter´e poˇzadovalo od dodavatel˚ u dokumentaci pr´avˇe v tomto form´atu [Kos00]. Jazyk SGML byl pˇr´ıliˇs komplexn´ı (umoˇzn ˇ oval nejen definici vlastn´ıch znaˇcek, ale i urˇcen´ı oddˇelovaˇc˚ u tˇechto znaˇcek) a to ho inhibovalo v praktick´em vyuˇzit´ı. 1
V souvislosti s GML je zaj´ımav´a zkratka utvoˇren´ a z poˇca´teˇcn´ıch p´ısmen pˇr´ıjmen´ı autor˚ u. Form´aln´ı jazyk vyuˇz´ıvan´ y pˇredevˇs´ım pro programov´an´ı. Umoˇzn ˇuje sjednocen´ı, substituci, iteraci, morfismus, ale ne pr˚ unik ani rozd´ıl. 2
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
9
Jako jedna z nejzn´amˇejˇs´ıch odvozenin je znaˇckovac´ı jazyk HTML (HyperText Markup Language) dodnes vyuˇz´ıvan´y jako nositel obsahu pro webov´e prostˇred´ı. HTML m´a pevnˇe definovan´e DTD, kter´e bylo s kaˇzdou novou verz´ı m´ırnˇe odliˇsn´e. Tato skuteˇcnost vedla k tomu, ˇze se potenci´al HTML vyˇcerpal. XML (Extensible Markup Language) je rozˇsiˇriteln´y znaˇckovac´ı jazyk, kter´y si jako podmnoˇzina jazyka SGML zachov´av´a definici vlastn´ıch DTD, ale oddˇelovaˇce znak˚ u a speci´aln´ı znaky jsou pevnˇe urˇcen´e. Tak´e syntaxe jazyka mus´ı dodrˇzovat pˇr´ısnˇejˇs´ı pravidla neˇz jazyk SGML. Verze XML 1.0 byla dokonˇcena v roce 1998 a nyn´ı je vyd´ana jej´ı 5. revize. Verze XML 1.1 byla pˇredstavena v roce 2006 a nyn´ı je ve druh´e revizi. Obˇe verze se mezi sebou m´ırnˇe liˇs´ı v poˇzadavc´ıch na pouˇzit´e znaky v n´azvech element˚ u a atribut˚ u. Verze 1.0 dovoluje pouˇzit´ı znak˚ u obsaˇzen´ych v Unicode 2.0. Form´at XML by mˇel b´yt nositelem ˇcist´ych“ informac´ı, tedy oddˇelen´ych od prvk˚ u urˇcuj´ıc´ıch vzhled v´ysledn´eho dokumentu. ” K tomu u ´ˇcelu jsou urˇceny stylov´e jazyky viz. kapitola 4. Asi nezn´amˇejˇs´ı z nich je CSS (Cascade Style Sheet, kask´adov´e styly), kter´e definuj´ı vzhled webov´ych str´anek a jsou tak´e vyuˇz´ıv´any u form´atu SVG. Dalˇs´ım, avˇsak sloˇzitˇejˇs´ım jazykem, je XSL (eXtensible Style Language), kter´y se vyuˇz´ıv´a pˇri takzvan´ych XSL transformac´ıch (XSLT) pro u ´ pravu a transformace dokumentu. XSLT bude tak´e pˇredmˇetem t´eto pr´ace v podkapitole 4.2. Jak jiˇz bylo ˇreˇceno v´yˇse, form´at XML striktnˇe dodrˇzuje pravidla z´apisu. Pro kontrolu slouˇz´ı program naz´yvan´y parser . Tento program kontroluje spr´avnost dokumentu a odhal´ı chyby, kter´e by mohly b´yt pˇr´ıˇcinou probl´em˚ u. Implicitnˇe ho obsahuj´ı dneˇsn´ı internetov´e prohl´ıˇzeˇce.
2.4.1
Syntaxe XML
Pro lepˇs´ı orientaci v k´odu SVG je vhodn´e zn´at XML syntaxi a pravidla jeho z´apisu, kter´a mus´ı b´yt narozd´ıl od HTML striktnˇe dodrˇzov´ana. XML dokument je sestaven z objekt˚ u naz´yvan´ych elementy . Element je nositelem samotn´e informace i jej´ıho oznaˇcen´ı. Kaˇzd´y element se skl´ad´a z tag˚ u , kter´e jsou uzavˇreny do ostr´ych z´avorek (tj. mezi znaky ‘<’ a ‘>’). Cel´y element se skl´ad´a z poˇc´ateˇcn´ıho tagu, obsahu elementu a koncov´eho tagu, kter´y je uvozen znakem ‘/’ (pro odliˇsen´ı od poˇc´ateˇcn´ıho). Jednotliv´e ˇc´asti nejjednoduˇsˇs´ıho ˇ XML dokumentu, kter´y obsahuje pouze jeden element, jsou pops´any na obr. 2.6. Casto XML element obsah elementu
< titul > SVG a jeho využití v kartografii počáteční tag
řídící znak ukončovací znak koncového tagu
název tagu
Obr´azek 2.6: Popis nejjednoduˇsˇs´ıho XML dokumentu
nastane situace, kdy element nenese ˇz´adn´y obsah, ale jeho v´yskyt m˚ uˇze m´ıt vliv tˇreba na form´atov´an´ı. Zp˚ usoby, jak takov´y element napsat jsou tyto: - prost´e vynech´an´ı obsahu je v souladu s pravidly - pouˇz´ıv´a se v XHTML pro ukonˇcen´ı ˇr´adky (break line)
Filip Zavadil
13. kvˇetna 2011
Kapitola 2. V´ yvoj pˇred SVG
10
- pr´azdn´y element, obsahuj´ıc´ı pouze atribut, se tak´e ˇcasto vyuˇz´ıv´a V posledn´ı uk´azce se vyskytuje atribut, kter´y se zapisuje do poˇc´ateˇcn´ıho tagu. Je to nositel informace o dan´em tagu. Kaˇzd´y atribut se skl´ad´a z n´azvu a hodnoty, kter´a je uzavˇrena do uvozovek. V uk´azce 2.7 jsou hodnoty souˇradnic bodu v souˇradnicov´em syst´emu S-JTSK. Zvolen´y souˇradnicov´y syst´em i ˇc´ıslo bodu jsou ukl´ad´any jako atributy. Zp˚ usob z´apisu koment´aˇre: . <souradnice system="EPSG:5221"> 744903.16 , 1040716.70
Obr´azek 2.7: XML dokument popisuj´ıc´ı geobod
ATRIBUT ATRIBUT
jazyk
ID
ELEMENT
předek
popis
ELEMENT
bod ELEMENT
souradnice
kořenový element
ATRIBUT
system
sourozenec ELEMENT
potomek
odstavec
<souradnice system=”EPSG:9221”> 744903.16 , 1040716.70 <popis jazyk=”cz”> Makovice kostela ...
Obr´azek 2.8: Stromov´a struktura XML elementu
2.4.2
XML dialekty
Jazyk˚ u odvozen´ych z XML je opravdu mnoho3 , zde budou uvedeny ty nejvyuˇz´ıvanˇejˇs´ı z nich a ty, kter´e maj´ı nˇeco spoleˇcn´eho s oborem geod´ezie a kartografie. • XHTML (XML HyperText Markup Language) Znaˇckovac´ı jazyk nahrazuj´ıc´ı HTML (SGML) je postaven na XML z´akladech. Je pˇr´ısnˇejˇs´ı na syntaxi a umoˇzn ˇ uje definici vlastn´ıch sad znaˇcek. Jeho pouˇzit´ı se doporuˇcuje spoleˇcnˇe s CSS (Cascade Style Sheet). • DocBook Odvozenina XML urˇcen´a pro psan´ı nejen technick´e dokumentace. Pouˇz´ıv´a se tak´e 3
pro psan´ı knih, prezentac´ı, ˇcl´ank˚ u atd. Obsah lze snadno (podle ˇsablon) transformovat pro r˚ uzn´e u ´ˇcely pouˇzit´ı. • MathML (Mathematical Markup Language) Matematick´y znaˇckovac´ı jazyk popisuje matematick´e vztahy a vzoreˇcky. Je tak´e uloˇzen logick´y smysl v´yrazu. MathML podporuj´ı kancel´aˇrsk´e bal´ıky MS Office, OpenOffice, matematick´y software Mathematica a webov´e prohl´ıˇzeˇce. • SVG (Scalable Vector Graphics) ˇ alovateln´y vektorov´y form´at urˇcen´y nejen pro internet. O jeho v´yhod´ach, zp˚ Sk´ usobech pouˇzit´ı a praktick´ych uk´azk´ach pojedn´av´a kapitola 3. • KML (Keyhole Markup Language) Form´at KML4 je standardem Open Geospatial Consortium (OGC5 ) a nositelem geografick´ych dat. Vyuˇz´ıvaj´ı ji Google aplikace (Earth, Maps, SketchUp). D´ıky standardizaci se vyuˇz´ıv´a i v GIS aplikac´ıch. Souˇradnice jsou v syst´emu WGS-84 a voliteln´a v´yˇska je v syst´emu EGM96. • GML (Geographic Markup Language) Form´at ukl´ad´a geografick´e prvky jako geometrii (Point, LineString, Polygon), pouˇzit´y referenˇcn´ı syst´em, topologii, ˇcas, pouˇzit´e jednotky mˇeˇren´ı, observace atd. Form´at je tak´e vyv´ıjen a udrˇzov´an konsorciem OGC. • GeoRSS Geografick´y form´at urˇcen´y pro RSS ˇcteˇcky, tzv. Web feed“ sluˇzby. Nov´e zpr´avy ” mohou tak n´est i geografickou lokalizaci. GeoRSS je tak´e projektem organizace OGC. • GPX (GPS eXchange Format) Do tohoto form´atu jsou ukl´ad´any data nˇekter´ych GPS pˇrij´ımaˇc˚ u (Garmin) a popisuj´ı trasy.
2.4.3
XML pˇ ridruˇ zen´ e technologie
XML dokumenty mohou b´yt mezi sebou prov´az´any pouˇzit´ım technologie odkaz˚ u. Jazyky XPath, XPointer a XLink nab´ızej´ı vˇetˇs´ı moˇznosti adresov´an´ı neˇz pˇr´ıkaz SVG vyuˇz´ıvan´y v HTML. Tyto jazyky tak´e definuje a standardizuje konzorcium W3C. Aplikace, kter´a bude shrnuj´ıc´ım v´ysledkem t´eto pr´ace, bude vyuˇz´ıvat i tyto moduly jazyka XML. V´ıce o jazyku XPath v 4.2.3. • XLink • XPointer • XPath XML Path Language se pouˇz´ıv´a pro prohled´av´an´ı XML dokumentu, kter´y je reprezentov´an stromovou hierarchi´ı. Jednotliv´e elementy tvoˇr´ı uzly, po kter´ych je snadn´e se s XPath pohybovat. Pouˇz´ıvaj´ı se pojmy jako pˇredek a potomek. 4 5
Vektorov´y form´at SVG je vyv´ıjen od roku 1998. Uˇz od prvopoˇc´atku byl koncipov´an, aby se stal internetov´ym standardem. Ve v´yvojov´em t´ymu zasedali z´astupci v´yznamn´ych firem (Adobe, Corel, Macromedia, Sun, Microsoft, Hewlett-Packard, Apple, IBM). Jeden z rozhodn´ych okamˇzik˚ u nastal v z´aˇr´ı 2001, kdy verze SVG 1.0 z´ıskala doporuˇcen´ı od konsorcia W3 (pˇredstupeˇ n standardizace). Standardizov´an byl form´at SVG 1.0 v dubnu 2000. O nˇekolik mˇes´ıc˚ u pozdˇeji (leden 2001), vyˇsla verze 1.1, kter´a bere v potaz expanzi internetu na rozv´ıjej´ıc´ı se mobiln´ı zaˇr´ızen´ı. Pro vz´ajemnou kompatibilitu mezi tˇemito zaˇr´ızen´ımi bylo SVG rozvˇetveno na form´at pro mobiln´ı zaˇr´ızen´ı SVGB (SVG Basic) a odvozeninu SVGT (SVG Tiny) pro mobiln´ı telefony (nezahrnuje pr˚ uhlednost, CSS styly nebo gradient). V dobˇe psan´ı t´eto publikace se verze nach´azela ve st´adiu SVG 1.2 a je oˇcek´av´ano vypuˇstˇen´ı SVG 2.0. V dneˇsn´ı dobˇe nab´ıraj´ı na trhu sv˚ uj pod´ıl tablety, kter´e sv´ym dotykov´ym displayem umoˇzn ˇ uj´ı pˇrirozenˇejˇs´ı ovl´ad´an´ı aplikac´ı, tedy i vyuˇzit´ı interaktivity SVG. V tˇechto zaˇr´ızen´ı je vˇetˇsinou zabudov´ana podpora form´atu SVG Full [Eis02].
Obr´azek 3.1: Nˇekter´a z ofici´aln´ıch log form´atu SVG
3.2
Kompatibilita
V poˇc´ateˇcn´ıch letech byl SVG form´at podporov´an v´yznamnou spoleˇcnost´ı Adobe, kter´a se nejsp´ıˇs d´ıky tomuto form´atu chtˇela st´at konkurentem flash form´atu od Macromedia. Pro zobrazov´an´ı SVG v prohl´ıˇzeˇc´ıch, kter´e v t´e dobˇe nemˇely nativn´ı podporu tohoto form´atu, byl vyuˇz´ıv´an plugin Adobe SVG Viewer. Jeho v´yvoj byl vˇsak ukonˇcen v roce 2009 (vzr˚ ustaj´ıc´ı nativn´ı podpora prohl´ıˇzeˇc˚ u). Mozilla Firefox zavedla plnou podporu SVG 1.1 ve sv´em j´adru Gecko v roce 2005. Opera m´a plnou podporu SVG Tiny 1.1 od verze 8. Prohl´ıˇzeˇce zaloˇzen´e na WebKit
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
13
(Google Chrome, Apple Safari) ˇc´asteˇcnˇe podporuj´ı SVG 1.1 od roku 2006. Zat´ım celosvˇetovˇe nejv´ıce rozˇs´ıˇren´y prohl´ıˇzeˇc Internet Explorer od Microsoftu zavedl nativn´ı podporu teprve v roce 2011 ve verzi IE9. Opera
4.6%
2.7%
Ostatní prohlížeče
Safari % 6.2
13.9%
Google Chrome
43.6% 29.0%
Internet Explorer
Mozilla Firefox
Obr´azek 3.2: Pod´ıl pouˇz´ıvan´ych internetov´ych prohl´ıˇzeˇc˚ u ve svˇetˇe v lednu 2011
3.3
Hlaviˇ cka SVG dokumentu
Tak jako spr´avnˇe formovan´y XML dokument by i SVG obr´azek mˇel obsahovat hlaviˇcku. V t´eto ˇc´asti jsou uvedeny povinn´e prvky jako (procesn´ı instrukce, definice typu dokumentu) a koˇrenov´y element svg. procesní instrukce společné pro všechny xml dokumenty definice typu dokumentu 1.interní, 2. externí zdroj kořenový element, uvedená verze SVG a zdroj jmenného prostoru, všechny ostatní elementy musí být mezi těmito tagy
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> ... obsah ...
Je vhodn´e pouˇz´ıt i nepovinn´e elementy pro oznaˇcen´ı obsahu, tzv. metadat (viz. 3.11) informuj´ıc´ıch o autorovi, form´atu a zdroji dat. O z´apisu dalˇs´ıch element˚ u ve vztahu ke kartografii je pojedn´ano v 5.4.
3.3.1
Element defs
Do elementu defs lze zapsat ˇc´asti k´odu, kter´e mohou b´yt v dokumentu nˇekolikr´at pouˇzity. Jedn´a se zejm´ena o definov´an´ı barev, barevn´ych pˇrechod˚ u, vzor˚ u atd. T´ımto zp˚ usobem lze tak´e pˇred´avat ˇc´ast k´odu. Tato skuteˇcnost se hod´ı tak´e u rozm´ıst’ov´an´ı kartografick´ych znaˇcek, kdy samotn´y k´od je uveden pouze jednou a n´aslednˇe se jen um´ıst’uje na zadan´e souˇradnice. To vede k u ´ spoˇre datov´eho objemu dokumentu a pˇrisp´ıv´a k pˇrehlednosti k´odu. Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
14
• atribut id Pro oznaˇcen´ı objektu slouˇz´ı atribut id, jehoˇz hodnota by v dokumentu mˇela b´yt unik´atn´ı, aby nedoˇslo ke kolizi. Podle tohoto oznaˇcen´ı lze prvek kdykoliv zavolat a inicializovat jeho vykreslen´ı. Identifik´ator lze zapsat ke kaˇzd´emu elementu geometrick´ych tvar˚ u, textov´e sloˇzce nebo rastrov´emu obr´azku. • element use Pro vykreslen´ı symbolu v urˇcit´e ˇc´asti dokumentu je pouˇzit element use s atributy v podobˇe souˇradnic (x,y) a odkazu k symbolu xlink:href, jehoˇz hodnota je id symbolu uvozen´e znakem ‘#’. 40 <defs> <path id="trojuhelnik" stroke="blue" fill="red" d="M-10,10 L0,-10 L10,10 L-10,10" /> ... <use x="40" y="40" xlink:href="#trojuhelnik" />
40 -
+ +
• element symbol Mezi tagy s n´azvem symbol se zapisuje k´od objekt˚ u urˇcen´ych pro v´ıcen´asobn´e pouˇzit´ı. Lze zapsat libovoln´y element geometrick´ych tvar˚ u a textu. Ke kaˇzd´emu symbolu je nutn´e tak´e pˇridat atribut id, kter´y vede k jednoznaˇcn´e identifikaci symbolu. Atribut overflow (nastaven´y na visible) zajiˇst’uje vykreslen´ı cel´eho prvku. Objekt je zaps´an relativn´ımi souˇradnicemi, proto je vhodn´e tˇeˇziˇstˇe objektu um´ıstit na poˇc´atek soustavy souˇradnic. T´ımto zp˚ usobem lze vytv´aˇret a pouˇz´ıvat kartografick´e znaˇcky. Podobn´eho v´ysledku lze dos´ahnout pouˇzit´ım identifik´atoru pro skupinu : ... obsah znaˇcky ... <defs> <symbol id=”znacka” overflow=”visible”> ... <use x="40" y="40" xlink:href="#znacka" />
40
40
T[0,0]
• element marker Pro tvary element˚ u line, polyline, polygon a path je k dispozici nastaven´ı poˇc´ateˇcn´ı, stˇredn´ı nebo koncov´e znaˇcky pomoc´ı elementu marker. Typick´e pouˇzit´ı je zn´azornˇen´ı smˇeru ˇsipkou. Atributy, kter´e lze vyuˇz´ıt pro form´atov´an´ı jsou: - id - identifik´ator, povinn´y parametr - refX, refY - souˇradnice referenˇcn´ıho bodu - markerUnits - definice souˇradnicov´eho syst´emu hodnoty: strokeWidth, userSpaceOnUse - markerWidth, markerHeight - velikost znaˇcky v z´avislosti na SS
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
15
- orient - nastaven´ı orientace znaˇcek, hodnota ‘auto’ natoˇc´ı znaˇcku automaticky dle teˇcny ke zvolen´emu bodu, lze tak´e zadat u ´ hel pootoˇcen´ı <defs> <marker id="sipka" refX="0" refY="0" markerUnits="strokeWidth" orient="auto" overflow="visible"> <polygon points="-5,-5 -5,5 5,0 -5,-5" fill="green" /> <marker id="bod" refX="0" refY="0" markerUnits="strokeWidth" overflow="visible"/> ... <path d="M20,70 L50,20 80,60 150,30 180,40" stroke="green" marker-end="url(#sipka)" marker-mid="url(#bod)" />
Obsah tohoto elementu tvoˇr´ı samotn´y objekt urˇcen´y k vykreslen´ı. Pro pouˇzit´ı znaˇcky slouˇz´ı atributy: - marker-start poˇc´ateˇcn´ı znaˇcka - marker-mid znaˇcka lomov´ych bod˚ u - marker-end znaˇcka koncov´eho bodu Hodnota je odkaz na danou znaˇcku ve tvaru "url(#adresa)".
3.3.2
Barevn´ e pˇ rechody
Plynul´y pˇrestup jedn´e barvy do druh´e se naz´yv´a barevn´y pˇrechod“ (gradient). ” SVG nem´a ˇz´adn´y gradient nastaven´y a uˇzivatel si mus´ı definovat vlastn´ı. Samotn´a definice je um´ıstˇena do hlaviˇcky dokumentu v elementu defs. Existuj´ı dva druhy barevn´ych pˇrechod˚ u: line´arn´ı a radi´aln´ı pˇrechod. • element linearGradient Pˇrechod je nutn´e pojmenovat atributem id. N´asleduj´ı atributy x1,y1,x2,y2 ud´avaj´ı (v procentech) smˇer pˇr´ımky, podle kter´e je barevn´y pˇrechod veden. Obsahem elementu linearGradient jsou barevn´e body <stop>, kter´e maj´ı nastaven odstup (offset), barvu v atributu (style) hodnotou (stop-color) nebo nepr˚ uhlednost (stop-opacity).
• element radialGradient Podobn´e atributy jako line´arn´ı pˇrechod m´a i element radialGradient. Je ale nastaven atributy cx,cy (souˇradnice stˇredu) a fx,fy, kter´e po os´ach posunuj´ı barevn´e body. <defs> <stop offset="0%" style="stop-color:blue; stop-opacity:1"/> <stop offset="100%" style="stop-color:red; stop-opacity:1"/> ... 100%
100%
0%
0%
fy
C
C
fy =100%
0% 100% 0%
fx
100%
fx =0%
Barevn´e pˇrechody lze pouˇz´ıt jako barvu v´yplnˇe (fill), barvu tahu (stroke) nebo barvu textu. Na definovan´y gradient je odk´az´ano pouˇzit´ım jeho identifik´atoru: fill="url(#prechod)"; Mezi dalˇs´ı prvky, kter´e se zapisuj´ı do hlaviˇcky defs patˇr´ı typografick´e definice. Tyto prvky nejsou v kartografii pˇr´ıliˇs pouˇz´ıvan´e, proto tak´e nebudou podrobnˇeji zmiˇ nov´any.
3.4
SVG elementy z´ akladn´ıch geometrick´ ych prvk˚ u
Jako u vˇetˇsiny form´at˚ u a editor˚ u vektorov´e grafiky je v´ysledn´y obr´azek sloˇzen ze z´akladn´ıch prvk˚ u jako jsou obd´eln´ıky, kruˇznice, kˇrivky nebo u ´ seˇcky. Tyto prvky jsou matematicky pops´any dle parametr˚ u nutn´ych k jejich sestrojen´ı. V n´asleduj´ıc´ıch podkapitol´ach jsou pops´any tzv. SVG primitiva“. Je tak´e uvedena jejich kartografick´a hodnota (zp˚ usob ” ’ jejich vyuˇzit´ı pro z´akres map). Stylov´a sloˇzka (barva a tlouˇst ka ˇc´ary, barva v´yplnˇe atd.) je ˇreˇsena v kapitole 4. Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
3.4.1
17
Element line (´ useˇ cka)
x
[0;0]
p1 [10;10]
p2
[70;30]
y
3.4.2
Jeden z nejjednoduˇsˇs´ıch tvar˚ u je u ´ seˇcka. Je pops´ana pouze poˇc´ateˇcn´ım (x1,y1) a koncov´ym bodem (x2,y2). V kartografii tento tvar s´am o sobˇe nenach´az´ı velk´eho uplatnˇen´ı, je ale vyuˇz´ıv´an jako z´akladn´ı prvek kˇrivek, kde tvoˇr´ı spojnici mezi lomov´ymi body. Prvek je ˇcasto zastupov´an elementem path.
Element rectangle (obd´ eln´ık)
x
[0;0]
[20;10]
p height = 20
y
3.4.3
width
= 30
Obd´eln´ık je tvoˇren elementem rectangle. Pro sestrojen´ı jsou ud´any souˇradnice severoz´apadn´ıho rohu (x,y) a ˇs´ıˇrka s v´yˇskou tˇelesa (width,height). V mapˇe m˚ uˇze b´yt tento prvek pouˇzit u z´akresu budov obd´eln´ıkov´eho tvaru. Ve vˇetˇsinˇe pˇr´ıpadech by vˇsak musel b´yt pootoˇcen. V aplikaci tvoˇr´ı tabulky.
Element circle (kruˇ znice)
x
[0;0]
c r=10 [30;20]
y
3.4.4
Dalˇs´ı lehce popsateln´y tvar je kruˇznice. Mezi jej´ı parametry patˇr´ı souˇradnice stˇredu (cx,cy) a polomˇer (r). V kartografii se vyuˇz´ıv´a nejsp´ıˇse jako kruh (s vyplnˇen´ım) pˇri znaˇcen´ı bodov´ych prvk˚ u (napˇr. bodov´a vrstva obc´ı). K tomuto u ´ˇcelu je tak´e element pouˇzit v aplikaci.
Element ellipse (elipsa)
<ellipse cx="30" cy="20" rx="20" ry="10" /> x
[0;0]
ry =
c
[30;20]
y
Filip Zavadil
rx =
10
Podobn´y element jako pˇredch´azej´ıc´ı kruˇznice je ellipse. Je zˇrejm´e, ˇze kruˇznice je zvl´aˇstn´ı pˇr´ıpad elipsy (stejn´e poloosy). V mapˇe m˚ uˇze b´yt pouˇzit k podobn´ym u ´ˇcel˚ um jako kruh. Oproti circle je pˇrid´an attribut (rx,ry), coˇz jsou d´elky poloos. Tento element se v aplikaci nenal´ez´a.
Lomen´a ˇc´ara je sloˇzena z u ´ seˇcek a je pops´ana pomoc´ı lomov´ych bod˚ u v atributu points. Form´at z´apisu obsahuje vˇzdy p´ary souˇradnic (x, y) oddˇelen´ych ˇc´arkou. V kartografii m˚ uˇze b´yt vyuˇzit ke zn´azornˇen´ı lini´ı jako jsou komunikace, vodn´ı toky, ˇzeleznice atd. V aplikaci je tento prvek pouˇzit u liniov´ych prvk˚ u.
Jedn´ım z prvk˚ u pro vykreslov´an´ı mnoho´ uheln´ık˚ u je element polygon. Je reprezentov´an posloupnost´ı p´ar˚ u souˇradnic, stejnˇe jako element polyline v atributu points. Tento objekt je vhodn´y pro are´alov´e (ploˇsn´e) znaˇcky, jako lesy, vodn´ı plochy, budovy atd.
Element path (kˇ rivka)
Trochu sloˇzitˇejˇs´ım a z´aroveˇ n obecnˇejˇs´ım popisem geometrick´eho prvku je kˇrivka (path). Pomoc´ı tohoto elementu je moˇzn´e popsat v´yˇse uveden´e tvary, ovˇsem ve sloˇzitˇejˇs´ı a datovˇe objemnˇejˇs´ı formˇe. Tento prvek vyuˇz´ıv´a tvz. virtu´aln´ıho pera, kter´e se ˇr´ıd´ı pˇr´ıkazy uveden´ymi v atributu s n´azvem d (data). Za pˇr´ıkazy n´asleduj´ı p´ary souˇradnic pro ud´an´ı pozice. Pokud je pˇr´ıkaz velk´ym p´ısmenem, ud´av´a absolutn´ı souˇradnice, pokud je zaps´an mal´ym p´ısmenem, souˇradnice jsou ch´ap´any jako relativn´ı (pˇr´ır˚ ustky k pˇredchoz´ımu bodu). Dostupn´e pˇr´ıkazy pro element path: • M (move) - virtu´aln´ı pero je pˇresunuto na danou pozici, aniˇz by byla kreslena ˇc´ara • L (line) - z pˇredchoz´ıho bodu je vedena u ´ seˇcka na souˇradnice uveden´e za t´ımto pˇr´ıkazem <path d="M10,10 L90,40" />
Obr´azek 3.3: Element path a pˇr´ıkazy M, L pro vykreslov´an´ı u ´ seˇcek
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
19
Jak lze odvodit z obr´azku, t´ımto zp˚ usobem lze nahradit elementy line, polyline, rectangle, polygon, circle a ellipse, (kresba mapy by ˇsla prov´est za pouˇzit´ı pouze toho typu elementu, ovˇsem datov´a objemov´a n´aroˇcnost a pˇrehlednost by znaˇcnˇe utrpˇela). Na obr´azku vpravo jsou pouˇzity absolutn´ı i relativn´ı souˇradnice. • H (horizontal line) - vodorovn´a ˇc´ara, nen´ı zad´av´ana y-ov´a souˇradnice • V (vertical line) - svisl´a ˇc´ara, nen´ı zad´av´ana x-ov´a souˇradnice, z´apis tvaru obd´eln´ıku ˇci ˇctverce je t´ımto zp˚ usobem sice kratˇs´ı, ale m´enˇe pˇrehledn´y pro editaci x
Analogický zápis s relativními souřadnicemi: <path d="M20,10 h30 v20 h-30 v-20" /> y
Obr´azek 3.4: Element path a pˇr´ıkazy H, V pro vodorovn´e a svisl´e u ´ seˇcky
• C (curve) - n´astroj pro vykreslov´an´ı kubick´e B´ezierovy kˇrivky • S (smooth curve) - n´astroj pro vykreslov´an´ı kubick´e B´ezierovy kˇrivky s hladk´ym napojen´ım, tento typ elementu path je vhodn´y pro vykreslen´ı zaoblen´ych spojit´ych <path d="M20,30 C10,20 40,20 30,30" /> x
[0;0]
[10;20]
<path d="M2 0,30 C10,20 40,20 30,30 S50,40 40,30" /> x
[0;0]
[10;20]
[40;20]
[40;20]
[40;30]
[30;30] [20;30]
[20;30]
[30;30]
[50;40]
y
y
Obr´azek 3.5: Element path a pˇr´ıkazy C,S pro kubickou B´ezierovu kˇrivku
kˇrivek, parabol a hyperbol, vyuˇz´ıv´a kotevn´ı body a urˇcen´ı teˇcen ˇr´ıd´ıc´ımi body, sloˇzitˇejˇs´ı tvary jsou utvoˇreny spojen´ım v´ıce kubick´ych B´ezierov´ych kˇrivek formou hladk´eho napojov´an´ı • Q (quadratic B´ eziere curve) - sestrojen´ı kvadratick´e B´ezierovy kˇrivky • T (smooth quadratic B´ eziere curve) - sestrojen´ı kvadratick´e B´ezierovy kˇrivky s hladk´ym napojen´ım, kvadratick´e B´ezierovy kˇrivky nejsou ve vektorov´ych editorech bˇeˇznˇe vyuˇz´ıv´any, pro uspokojivou aproximaci vyhovuj´ı kubick´e B´ez. kˇrivky
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
20
<path d="M10,10 A30,20 0 0,0 50,40 Z" /> x
[0;0]
[10;10]
20
30
[50;40]
y
A 30, 20
hlavní polosa vedlejší polosa
0
rotace (stupně)
0, 0
kratší/delší výseč (0/1) orientace výseče (0/1)
50, 40
x - koncový bod y - koncový bod
Obr´azek 3.6: Element path a pˇr´ıkaz arc pro eliptickou v´yseˇc
• A (elliptical arc) - eliptick´y oblouk, prvek m´a sice sloˇzitˇejˇs´ı z´apis, ale mohl by b´yt vyuˇz´ıv´an pro tvorbu diagram˚ u • Z (close path) - pˇr´ıkaz pro oznaˇcen´ı konce kˇrivky
3.6
Textov´ eˇ retˇ ezce
Jedn´ım ze stˇeˇzejn´ıch prvk˚ u vektorov´ych grafick´ych form´at˚ u je moˇznost implementace textov´ych ˇretˇezc˚ u. Ani form´at SVG nez˚ ust´av´a v tomto ohledu pozadu a umoˇzn ˇ uje ˇsirok´e moˇznosti nastaven´ı jeho vykreslen´ı. Tak´e v oboru kartografie je tento prvek hojnˇe pouˇz´ıv´an zejm´ena v popisc´ıch ulic, m´ıstn´ıch n´azv˚ u atd. Zde nach´az´ı uplatnˇen´ı veden´ı textu po kˇrivce.
3.6.1
Element text
• x,y - souˇradnice bodu, na kter´y je um´ıstˇen´e poˇc´ateˇcn´ı u ´ˇcaˇr´ı textu, pˇrid´an´ım atribut˚ u dx, dy lze tato pozice jeˇstˇe doladit“ ” • font-size - velikost p´ısma dle jednotek uveden´ych v 3.8 • font-family - rodina p´ısem (serif, sans-serif, cursive, monospace atd.) • font-style - styl p´ısma (normal, italic, oblique) • font-variant - kapit´alky (normal, small-caps) • font-weight - nastaven´ı tuˇcnosti p´ısma (normal, bold, [100-900]) • font-stretch - vodorovn´e roztaˇzen´ı p´ısma • letter-spacing, kerning - nastaven´ı mezery mezi p´ısmeny • word-spacing - mezery mezi slovy • text-decoration - dekorace textu (none, underline, overline, line-through, blink)
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
21
• rotate - otoˇcen´ı kaˇzd´eho p´ısmene o zadan´y u ´ hel ve stupn´ıch • textLength - ˇs´ıˇrka, na kterou m´a text rozt´ahnout • lengthAdjust - zp˚ usob jak´ym m´a text vyplnit zadanou ˇs´ıˇrku (spacing, spacingAndGlyphs) font-family Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
letter-spacing 1 5 10
Lorem ipsum L o r e m i p s u m L o r e m i p s u m
text-decoration Lorem ipsum Lorem ipsum rotate
m u s pi m er o L text-stretch Lorem ipsum Lorem ipsum font-variant Lorem ipsum
Lorem ipsum
Lorem ipsum
LOREM IPSUM
font-size Lorem ipsum
Lorem ipsum
Lorem ipsum
text-length Lorem ipsum
font-style Lorem ipsum font-weight Lorem ipsum
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum
Obr´azek 3.7: Pˇrehled z´akladn´ıch atribut˚ u pro pr´aci s textem
3.6.2
Element tspan
Uvnitˇr elementu text lze pouˇz´ıt prvek tspan pro jemnˇejˇs´ı“ pˇrizp˚ usoben´ı ˇc´ast´ı ” textu. S v´yhodou lze tak´e vyuˇz´ıt relativn´ıch souˇradnic. K dispozici jsou stejn´e atributy jako u elementu text. Lorem ipsum no laoreet nostrum eum. Etiam euismod efficiantur id sed. Ius ea intellegat mnesarchum. Ea dicta legimus pri, mea fabellas assentior curo.
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
3.6.3
22
Element textPath
V kartografii uˇz´ıvan´y zp˚ usob psan´ı textu pod´el kˇrivky lze v SVG zapsat elementem textPath. Kˇrivka, kter´a nahrazuje u ´ˇcaˇr´ı p´ısma, je definov´ana v hlaviˇcce dokumentu v ˇc´asti defs. Zm´ınˇen´a kˇrivka mus´ı tak´e obsahovat identifik´ator, dle kter´eho je jednoˇ ast textPath mus´ı b´yt um´ıstˇena mezi tagy ,, kde b´yv´a znaˇcnˇe urˇcena. C´ nastaveno form´atov´an´ı textu. Element textPath m˚ uˇze obsahovat atributy: - xlink:href(#id) - povinn´y atribut, adresa kˇrivky - startOffset - odsazen´ı zaˇc´atku textu od zaˇc´atku kˇrivky <defs> <path id="tah" d="M40,70 C0,110 40,150 70,80 S250,20 300,80"/> Text vedený po křivce využitelný pro popis linií.
3.7
po
kř
ií. in sl
Te x t
v e d e ný
elný pro užit po vy pi e c iv
Instrukce pro vykreslov´ an´ı
Pro spr´avn´e vykreslen´ı nestaˇc´ı pouze uv´est geometrickou podstatu objekt˚ u, ale sdˇelit parseru, jak´ym zp˚ usobem se m´a prvek vykreslit (viditelnost ˇcar polygon˚ u). Lze tak´e nastavovat pravidla napojov´an´ı hran.
3.7.1
Vlastnosti atributu stroke
Vlastnosti tahu se vztahuj´ı ke vˇsem element˚ um uveden´ych v 3.4. Tedy jak k ploˇsn´ym objekt˚ um, tak i k lini´ım a text˚ um. • stroke Samotn´y atribut stroke slouˇz´ı k urˇcen´ı barvy tahu. Jeho hodnoty mohou nab´yvat barev dle 3.7.4. • stroke-width Tento atribut nastavuje tlouˇst’ku ˇc´ary. Hodnotou je ˇc´ıslo s jednotkou uvedenou na obr. 3.8. Pokud je tlouˇst’ka ˇc´ary neud´ana, je pouˇzita implicitn´ı hodnota (1px). Je to ˇcasto vyuˇz´ıvan´y atribut. M˚ uˇze b´yt dynamicky nastavov´an v z´avislosti k mˇeˇr´ıtku. V kartografick´em zobrazen´ı je takto nastavena tlouˇst’ka lini´ı (zn´azorˇ nuj´ıc´ı jejich kvalitu).
1px
Filip Zavadil
2px
3px
4px
5px
6px
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
23
• stroke-linecap Tento typ urˇcuje jak´ym zp˚ usobem m´a b´yt tah ukonˇcen. Hodnoty nab´yvaj´ı tvar˚ u: butt, round, square. round
butt
square
• stroke-linejoin Pro urˇcen´ı tvaru napojen´ı jsou k dispozici tyto hodnoty: miter, round, bevel. Pˇri zobrazov´an´ı v mapˇe lze pouˇz´ıt r˚ uzn´e hodnoty, v z´avislosti na zobrazovan´em prvku. Napˇr´ıklad pro vykreslen´ı vodn´ıch tok˚ u je vhodn´e pouˇz´ıt hodnotu round, ale pro vyobrazen´ı pr˚ ubˇehu hranic hodnoty miter.
miter
round
bevel
• stroke-miterlimit Nastaven´ı ˇspiˇcatosti“ lze prov´est jen pro objekty s stroke-linejoin="miter". ” Hodnota je zad´ana ˇc´ıslem. V kartografii nen´ı zobrazov´an´ı ostr´eho“ napojov´an´ı ” ˇz´adouc´ı a u prvk˚ u s vysokou frakt´aln´ı dimenz´ı by mˇelo ruˇsiv´y efekt.
7
2
3
6
• stroke-dasharray Pro vykreslen´ı pˇreruˇsovan´e ˇc´ary je vyuˇz´ıv´an atribut stroke-dasharray urˇcuj´ıc´ı vzd´alenost jednotliv´ych ˇcar a mezer. Do hodnot lze zapsat vektor libovoln´e velikosti, podle kter´eho se kresl´ı ˇc´ary nebo pr´azdn´e mezery. Tento zp˚ usob lze vyuˇz´ıt v kartografii pˇri z´akresu osy ˇzeleznice. 20
10
20
10
20
stroke-dasharray=”20 10”
10 5 20
10 5
stroke-dasharray=”20 10 5”
• stroke-dashoffset Tato ˇc´ast urˇcuje, v jak´em bodu se m´a zaˇc´ıt s vykreslov´an´ım. 20
10
20
stroke-dashoffset=”40”
10
40
• stroke-opacity Nepr˚ uhlednost tahu je zad´ana ˇc´ıslem v intervalu < 0, 1 >.
1
Filip Zavadil
0.8
0.6
0.4
0.2
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
3.7.2
24
Vlastnosti atributu fill
• fill Barva v´yplnˇe je nastavena v tomto atributu. • fill-rule Pravidlo v´yplnˇe nab´yv´a hodnot: nonzero, evenodd
evenodd
nonzero
• fill-opacity Nastaven´ı nepr˚ uhlednosti je nastaveno hodnotami v intervalu < 0, 1 >.
1
3.7.3
0.8
0.6
0.4
0.2
Atributy opacity,display,visibility
• opacity Nastaven´ı nepr˚ uhlednosti cel´eho objektu nebo skupiny objekt˚ u vˇcetnˇe tahu, v´yplnˇe a textu je moˇzn´e nastavit atributem stroke, jehoˇz hodnoty jsou z intervalu < 0, 1 >. Pro odliˇsen´ı nepr˚ uhlednosti tahu nebo v´yplnˇe lze samostatnˇe nastavit stroke-opacity ˇci fill-opacity.
1
0.8
0.6
0.4
0.2
• display inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, tabel-column, table-cell, table-caption, none Objekty mohou b´yt tak´e vyjmuty ze zobrazovan´ı (hodnota none“), i kdyˇz se v do” kumentu vyskytuj´ı. T´eto skuteˇcnosti lze vyuˇz´ıt pˇri vyp´ın´an´ı vrstev. Stejn´eho efektu lze dos´ahnout nastaven´ım atributu opacity na hodnotu 1, avˇsak pokud je pro tento objekt nastavena interaktivita, z˚ ust´av´a na rozd´ıl od atributu display="none" zachov´ana. • visibility visible,hidden,collaspse
3.7.4
Barevn´ e modely
Zp˚ usob˚ u jak do atribut˚ u fill, stroke a podobn´ych zapsat urˇcitou barvu je nˇekolik. Liˇs´ı se pouˇzit´ym barevn´ym modelem a z´apisem. Kromˇe bˇeˇznˇe zn´am´ych barev obsahuje i ty m´enˇe zn´am´e. Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
25
• Color names jsou barvy pojmenov´any anglick´ymi n´azvy. Je to nejsnadnˇejˇs´ı a ˇclovˇeku nejsrozumitelnˇejˇs´ı forma z´apisu. Pˇr´ıklad pouˇzit´ı pro v´yplˇ n lososovou“ barvou: fill="salmon". ” aquamarine
coral
mistyrose
limegreen
lightskyblue
gold moccasin
indianred
• RBG je nejpouˇz´ıvanˇejˇs´ı barevn´y model, kde v´ysledn´a barva vznikne aditivn´ım m´ıˇsen´ım tˇr´ı barevn´ych sloˇzek (ˇcerven´a, zelen´a, modr´a). Tento model je pouˇz´ıvan´y v monitorech a projektorech. Hodnota R,G,B kan´al˚ u je zapsan´a 8-bitov´ymi cel´ymi ˇc´ısly v intervalu < 0, 255 >. Hodnoty lze odeˇc´ıst na barevn´e krychli. Z´apis je proveden jako RGB() funkce se tˇremi ˇc´ıseln´ymi hodnotami: fill="RGB(240,32,12)". Moˇzn´y je tak´e hexadecim´aln´ı z´apis (HEX), sestaven´y ze tˇr´ı dvojic alfanumerick´ych znak˚ u uvozen´ych znakem ‘#’ (fill="#F0200C"). rgb(255,255,255) rgb(0,255,0)
rgb(0,0,0)
rgb(255,255,0)
rgb(255,0,0)
rgb(0,0,255)
rgb(255,0,255)
rgb(0,255,255)
• RGBa m´a obdobn´y z´apis jako pˇredchoz´ı RGB model, kde ˇctvrt´y parametr nastavuje alpha kan´al (nepr˚ uhlednost). Pˇr´ıklad pouˇzit´ı: fill="RGBa(255,0,255,0.4)", kde α-kan´al je reprezentov´an hodnotou typu float v intervalu < 0, 1 >. • HSL (Hue Saturation Lightness) urˇcuje barvu dle barevn´eho kruhu, sytosti a odst´ınu. - Hue je u ´ hel (ve stupn´ıch) na barevn´em kruhu. < 0, 360 > [ve stupn´ıch] - Saturation (sytost) barev je nastavena procenty. (100% - nejsytˇejˇs´ı barvy) - Lightness (svˇetlost) je ud´ana tak´e procenty. (100% odpov´ıd´a b´ıl´e barvˇe, 0% ˇcern´e barvˇe) Tohoto modelu lze vyuˇz´ıt pˇri tvorbˇe kartogramu, kdy svˇetlost barvy (lightness) u ´ zem´ı je nastavena dle hodnot z tabulky. V dobˇe psan´ı pr´ace tento model bohuˇzel jeˇstˇe nepodporovaly vˇsechny prohl´ıˇzeˇce. Pˇr´ıklad z´apisu: fill="HSL(130,80%,30%)". • HSLa je obdoba modelu HSL, kde je jako ˇctvrt´y parametr hodnota α-kan´alu. 0°
270°
90°
HSL(90,100%,70%)
HSL(300,70%,50%)
HSL(210,60%,80%)
HSL(350,70%,90%)
HSL(50,100%,90%) HSLa(300,70%,50%,0.7)
HSLa(350,70%,90%,0.4)
180°
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
3.8
26
Souˇ radnicov´ y syst´ em a jeho transformace
Scalable Vector Graphics ˇcesky znamen´a ˇsk´alovateln´a vektorov´a grafika“ a proto ” tak´e form´at SVG nab´ız´ı r˚ uzn´e typy transformac´ı. K jejich popisu se bude vhodn´e nejprve sezn´amit se souˇradnicov´ym syst´emem, jak ho ch´ape SVG. V z´avislosti se zaˇzit´ymi konvencemi v poˇc´ıtaˇcov´e grafice a zobrazovac´ıch zaˇr´ızen´ıch byl zvolen souˇradnicov´y syst´em s poˇc´atkem v severoz´apadn´ım rohu. 0
1 2 3 4 5 6 8 9 10 x
1 2 3 4 5 6 7 y
[5;4]
používané délkové jednotky: (pixels) px (points) pt (centimeters) cm (milimetres) mm (inches) in (current font size) em (x-height) ex (pica) pc (percent) %
pixely (implicitní hodnota) body centimetry milimetry palce velikost aktuálního fontu velikost písmene x [: pajka :], 1 pica = 12 points procenta vůči zobrazované oblasti
Obr´azek 3.8: Pˇrehled souˇradnicov´eho syst´emu a d´elkov´ych jednotek
3.8.1
Atribut transform
Do vˇetˇsiny element˚ u, poˇc´ınaje t´ım koˇrenov´ym <svg>, lze zapsat atribut transform, se kter´ym je moˇzno prov´adˇet transformace souˇradnic. Tento fakt nahr´av´a pouˇzit´ı SVG ke kartografick´ym u ´ˇcel˚ um, kde se transformace vyuˇz´ıvaj´ı velmi ˇcasto. K dispozici je nˇekolik typ˚ u: translace, rotace nebo zkosen´ı. Vˇsechny tyto typy lze zahrnout do jednoho prvku pomoc´ı transformaˇcn´ı matice. • translate (translace) transform="translate(20,10)" 20
x
x’
10
y
y’
Pro posun objekt˚ u lze pouˇz´ıt funkci translate. Jej´ı argumenty jsou souˇradnice bodu, na kter´y m´a b´yt poˇc´atek transformovan´e soustavy um´ıstˇen. Lze vyuˇz´ıt pro pozicov´an´ı symbol˚ u, kter´e jsou zaps´any v m´ıstn´ı soustavˇe.
• rotate (rotace) transform="rotate(30)" x
x’
y’
y
Filip Zavadil
Pootoˇcen´ı poˇc´atku SS se prov´ad´ı funkc´ı ´ rotate(). Uhel je zad´av´an ve stupn´ıch a m˚ uˇze nab´yvat z´aporn´ych hodnot (protismˇer hodinov´ych ruˇciˇcek). Jedn´a se tak´e o ˇcasto pouˇz´ıvanou transformaci, napˇr. pootoˇcen´ı textu v n´azvech ulic. 13. kvˇetna 2011
Kapitola 3. Form´ at SVG
27
• skew (zeˇsikmen´ı) transform="skewX(-50)" x
x’ -50°
y’ y
Funkce m´a dva tvary z´apisu, skewX() pro zkreslen´ı na ose X a skewY() pro zkreslen´ı na ose y. V obou pˇr´ıpadech jako argument vstupuj´ı stupnˇe vych´ylen´ı zvolen´e osy od osy p˚ uvodn´ı. V kartografii nenach´az´ı pˇr´ım´e uplatnˇen´ı.
• scale (mˇeˇr´ıtko)
transform="scale(2,0.5)" x’
x
y’ y
Vhodn´a a uˇziteˇcn´a funkce scale() urˇcuje zvˇetˇsen´ı nebo zmenˇsen´ı objekt˚ u. Promˇenn´a je bezrozmˇern´a jednotka a urˇcuje n´asobek, kter´ym se souˇradnicov´y syst´em n´asob´ı. Funkce je pˇret´ıˇzen´a, lze tedy zad´avat jak jeden argument pro zmˇenu mˇeˇr´ıtka obou os, nebo dva argumenty pro kaˇzdou osu zvl´aˇst’. Zmˇena mˇeˇr´ıtka je vztaˇzena nejen na geometrii, ale i na styl vykreslov´an´ı. V aplikaci je tato funkce vyuˇz´ıv´ana mimo jin´e i k zoomov´an´ı“. ”
• matrix (transformaˇcn´ı matice) Pro obecn´y popis je vhodn´y z´apis pomoc´ı transformaˇcn´ı matice. Pro kaˇzd´y v´yˇse zm´ınˇen´y prvek existuje i varianta zapsan´a pomoc´ı funkce matrix(). N´asoben´ım matic lze dos´ahnout kombinaci jednotliv´ych transformaˇcn´ıch ˇcinitel˚ u (transformace prob´ıh´a ve stejn´em poˇrad´ı jako n´asoben´ı matic). Aby se matice mohly n´asobit a byly ˇctvercov´eho typu, je jako posledn´ı ˇr´adek pˇrid´an vektor (0,0,1). V kartografii se transformaˇcn´ı matice vyuˇz´ıvaj´ı zejm´ena pro georeferencov´an´ı. transform="matrix(a,b,c,d,e,f)"
1 0 tx translace 0 1 ty matrix(1,0,0,1,t x ,t y ) 0 0 1 translate(t x ,t y ) 1 tan(α) 0 0 1 0 0 0 1
zešikmení dle osy ‚x‘ matrix(1,0,tan(α),1,0,0) skewX(α)
cos(α) -sin(α) 0 sin(α) cos(α) 0 0 0 1
Filip Zavadil
a c e b d f 0 0 1
obecná tranformační matice
sx 0 0
měřítko matrix(s x ,0,0,s y ,0,0) scale(s x ,sy )
0 0 sy 0 0 1
1 0 0 tan(α) 1 0 0 0 1
zešikmení dle osy ‚y‘ matrix(1,tan(α),0,1,0,0) skewY(α)
Jak jiˇz bylo zm´ınˇeno dˇr´ıve, SVG umoˇzn ˇ uje nejen vkl´adat a ukl´adat rastrovou grafiku, ale nab´ız´ı i moˇznosti editace typu transformace nebo aplikaci pˇreddefinovan´ych filtr˚ u. Jelikoˇz se i v modern´ıch digit´aln´ıch kartografick´ych prac´ıch poˇc´ıt´a s rastrov´ym vyj´adˇren´ım (v podobˇe ortofotomap nebo st´ınovan´eho reli´efu), nalezne i rastrov´y form´at sv´e uplatnˇen´ı.
3.9.1
Element image
Vloˇzen´ı obr´azku elementem image je provedeno obdobn´ym zp˚ usobem jako v HTML. Lze vyuˇz´ıt tyto z´akladn´ı atributy: - x,y - souˇradnice, na kter´e bude um´ıstˇen prav´y horn´ı roh obr´azku - width,height - velikost vkl´adan´eho obr´azku - xlink:href - absolutn´ı/relativn´ı cesta k obr´azku Pro vloˇzen´ı obr´azku pˇr´ımo do dokumentu lze vyuˇz´ıt k´odov´an´ı Base64 (pˇrevod bin´arn´ıch dat na znaky ASCII). Rastrov´y obr´azek v bin´arn´ı formˇe lze po pˇrek´odov´an´ı na ACSII vloˇzit do dokumentu t´ımto zp˚ usobem: xlink:href="data:image/jpeg;base64, ...", kde m´ısto teˇcek je dosazen samotn´y k´od. Rastrov´y objekt lze transformovat atributem transform, kde jsou k dispozici vˇsechny typy transformac´ı. Tohoto faktu lze vyuˇz´ıt tˇreba pˇri georeferencov´an´ı rastrov´eho podkladu mapy.
Obr´azek 3.9: Uk´azka pouˇzit´ı rastrov´ych obrazov´ych dat
3.9.2
Element filter
Na SVG objekty lze aplikovat rastrov´e filtry zn´am´e z editor˚ u jako jsou Adobe Photoshop, Gimp atd. D˚ uvod proˇc na vektorovou grafiku pouˇz´ıvat rastrov´e filtry je jednoduch´y. Rastrov´a reprezentace sloˇzit´ych, rozmanit´ych a ˇclenit´ych obrazov´ych dat je v´yhodnˇejˇs´ı na v´ypoˇcet i na vykreslen´ı. Je d˚ uleˇzit´e zm´ınit, ˇze ˇsk´alov´an´ı (zmˇena mˇeˇr´ıtka) nem´a na v´ysledn´e vyobrazen´ı vliv (v podobˇe ztr´aty kvality), jelikoˇz doch´az´ı k nov´emu v´ypoˇctu prvk˚ u pro kaˇzdou hladinu. I kdyˇz pˇr´ıliˇsn´e zdoben´ı prvk˚ u v mapˇe m´a ruˇsiv´y r´az, s drobn´ymi a rozv´aˇzn´ymi efekty lze pˇrispˇet ke zdokonalen´ı vizu´aln´ı i informaˇcn´ı hodnoty v´ysledn´e pr´ace. Filtry se daj´ı aplikovat nejen na geometrick´e tvary a texty, ale i na rastrov´e obr´azky. Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
29
Element filter (zapsan´y v hlaviˇcce v ˇc´asti defs) slouˇz´ı jako kontejner pro z´apis posloupnosti efekt˚ u. Obsahuje jedin´y atribut id slouˇz´ıc´ı jako identifik´ator. K pouˇzit´ı existuje mnoho element´arn´ıch filtr˚ u, ze kter´ych lze dos´ahnout k´yˇzen´eho v´ysledku. Pˇrehled 1 z´akladn´ıch filtr˚ u : • feBlend Nastaven´ı zp˚ usobu prol´ın´an´ı obraz˚ u. K dispozici jsou tyto prol´ınac´ı reˇzimy: Normal, Multiply, Screen, Darken, Lighten. Jedn´a se o v´ypoˇcet nov´e barevn´e hodnoty ˇc´ast´ı obr´azk˚ u, kter´e se pˇrekr´yvaj´ı. Pro kartografick´e u ´ˇcely nen´ı tento filtr vyuˇz´ıv´an. • feColorMatrix Jednou z moˇznost´ı jak ovlivnit barevnost cel´eho v´ysledn´eho obrazu je pouˇzit´ı tohoto filtru. Barevnou matic´ı lze upravovat jas, transparentnost nebo posouvat barevn´e spektrum. Je moˇzno pouˇz´ıt nˇekolik typ˚ u nastaven´ı: - matrix (obecn´a barevn´a matice), - saturate (´ uprava jasu, kdy hodnoty leˇz´ı v intervalu < 0, 1 >), - hueRotate (barevn´e spektrum, hodnoty stupnˇe na barevn´em kruhu z model˚ u HSL nebo HSV), - luminanceToAlpha (transparentnost je nastavena podle jasu bodu, bez hodnoty) • feComponentTransfer V grafick´ych editorech je vyuˇz´ıv´an histogram jasu, kter´y umoˇzn ˇ uje dle kˇrivky nastavit pomˇer jasu a kontrastu. Histogram je moˇzn´e upravovat pro kan´aly RGBA zapisovan´e feFuncR, feFuncG, feFuncB a feFuncA. Z´apis vztah˚ u do r˚ uzn´ych kan´al˚ u atributem type s parametry: - identity - je pouˇzita p˚ uvodn´ı kompozitn´ı barva - table - podle hodnot v atributu tableValues je provedena line´arn´ı interpolace kˇrivky - discrete - kˇrivka sestavena z diskr´etn´ıch hodnot z parametr˚ u atributu tableValues - linear - kˇrivka nahrazena pˇr´ımkou, kter´a je urˇcena atributy slope (sklon ve stupn´ıch) a intercept (posun na svisl´e ose) - gamma - kˇrivka urˇcena hodnotou amplitudy (atribut apmlitude), exponentu (exponent) a svisl´ym posunem (offset) • feComposite, feMerge R˚ uzn´e reˇzimy sluˇcov´an´ı rastr˚ u dle algoritmu Porter-Duff. • feConvolveMatrix V´ypoˇcet hodnoty pixelu v z´avislosti k sousedn´ım prvk˚ um a parametry matice. Matice (kernel) postupnˇe proch´az´ı obrazem a pˇrepoˇc´ıt´av´a hodnoty. Matice obsahuje m × n prvk˚ u. V´ysledek je ovlivnˇen velikost´ı kernelu a jeho parametry. T´ımto filtrem je moˇzn´e prov´adˇet u ´ lohy typu rozostˇren´ı, zostˇren´ı, detekce hran atd. Zn´am´a je aplikace na data z´ıskan´a d´alkov´ym pr˚ uzkumem Zemˇe. Na stejn´em principu je stavˇena ˇrada dalˇs´ıch bitmapov´ych operac´ı. Matice je urˇcena z´akladn´ımi atributy: 1
u ´pln´ y pˇrehled filtr˚ u na http://www.w3.org/TR/SVG11/filters.html
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
30
- order - rozmˇer matice - kernelMatrix - po ˇr´adc´ıch zaps´any prvky matice - bias - konstanta, kter´a je pˇriˇctena k v´ysledn´e hodnotˇe pixelu - edgeMode - pravidla pro poˇc´ıt´an´ı krajn´ıch pixel˚ u, kdy sousedn´ı prvky neexistuj´ı, parametry: duplicate (duplikace okrajov´ych bod˚ u), wrap (jsou pouˇzity hodnoty z protilehl´eho konce bitmapy), none (pouˇzity nulov´e hodnoty) - kernelUnitLength - velikost buˇ nky matice, implicitnˇe je rovna jednomu pixelu - preserveAlpha - zachov´an´ı transparentnosti nastaven´ım atributu na true“ ” • feGaussianBlur Velmi vyuˇz´ıvan´ym filtrem je gaussovsk´e rozostˇren´ı. Je to forma aplikace kernelu o urˇcit´ych parametrech. Atributem stdDeviation je nastavena standardn´ı odchylka tedy velikost“ rozostˇren´ı. Moˇzn´e je nastaven´ı odchylky pro kaˇzdou osu. Zaj´ımav´e ” je pouˇzit´ı tohoto filtru pro liniov´e prvky (napˇr. odliˇsen´ı cyklotras od turistick´ych), kdy vzr˚ ust´a ˇcitelnost mapy. • feTile Vyplnˇen´ı objektu vzorkem (rastr/vektor). Obsahuje atributy x, y, width, height (um´ıstˇen´ı a velikost vzorku) a pro extern´ı vzorky atribut xlink:href. • feFlood Vyplnˇen´ı vzorku barvou. Analogie atributu fill i pro rastrov´a data. Nab´ız´ı i moˇznost nastaven´ı pr˚ uhlednosti. Obsahuje atributy flood-color (barva v´yplnˇe) a flood-opacity (nepr˚ uhlednost v intervalu < 0, 1 >). • feTurbulence Pˇrid´an´ım ˇsumu takzvanou Perlin funkc´ı lze dos´ahnout vzniku textury jako jsou oblaka ˇci mramor. Zvolen´y typ lze urˇcit atributy: - type - hodnotou fractalNoise je generov´an ˇsum a hodnotou turbulence v´ıˇren´ı - baseFrequency - frekvence ˇsumov´e funkce m˚ uˇze b´yt pro kaˇzdou osu odliˇsn´a - numOctaves - poˇcet period - seed - startovn´ı ˇc´ıslo gener´atoru n´ahodn´eho ˇsumu • feDisplacementMap Filtr zajiˇstuj´ıc´ı deformace obrazu. • feImage N´astroj pro vloˇzen´ı extern´ıho grafick´eho souboru. Obdobn´y z´apis jako SVG element image (cesta k souboru atributem xlink:href). Nab´ız´ı i moˇznost vloˇzit dalˇs´ı SVG obr´azek. • feMorphology Prov´ad´ı zes´ılen´ı (ztuˇcnˇen´ı) nebo ztenˇcen´ı prvku. Nastaven´ı je provedeno atributy: operator (parametr erode pro z´ uˇzen´ı a diletate pro ztuˇcnˇen´ı) a radius urˇcuje jejich rozsah (velikost). Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
31
• feOffset Posun prvku v ose x, y. Atributy dx,dy pro zad´an´ı posunu. Filtr nahraditeln´y atributem transform="translate(dx,dy)". • feSpecularLighting feDiffuseLighting Filtry vyuˇz´ıvaj´ıc´ı Phong˚ uv osvˇetlovac´ı model zejm´ena pro re´aln´e vykreslen´ı 3D grafiky. • feDistantLight, fePointLight, feSpotLight Druhy osvˇetlen´ı (smˇerov´e, bodov´e, reflektor). <defs> ... i i
Obr´azek 3.10: Praktick´e vyuˇzit´ı filtr˚ u pro symbol informaˇcn´ıch center
3.10
Atributov´ a data
V geografick´ych informaˇcn´ıch syst´emech (GIS) jsou obsahov´e informace geograficky urˇceny. Vˇetˇsinou se jedn´a o soubor popisuj´ıc´ı geometrickou sloˇzku a dalˇs´ı popisuj´ıc´ı atributov´a data. Ta jsou vˇetˇsinou v urˇcit´em datab´azov´em syst´emu. Jelikoˇz byl form´at XML p˚ uvodnˇe urˇcen jako nositel informac´ı, je v´ıce neˇz vhodn´e pouˇz´ıt tento form´at k uloˇzen´ı atributov´ych dat. Ke kaˇzd´emu SVG elementu lze zapsat libovoln´y atribut. Pˇr´ıklad z´apisu n´azvu komunikace: <path typ="d´ alnice" d="..."/>. Pˇridan´e atributy, kter´e se nez´ uˇcastˇ nuj´ı vykreslov´an´ı, je vhodn´e definovat v DTD, ˇc´ımˇz bude zaruˇcena bezchybovost dokumentu.
3.11
Metadata
Metadata lze interpretovat jako data o datech“. Popisuj´ı informace obsaˇzen´e v do” kumentu. Je to bˇeˇzn´y prvek, kter´y je pouˇz´ıv´an pro pops´an´ı obsahu. Jedn´a se zejm´ena o p˚ uvod obsahu, rok jeho vzniku, u ´ daje o autorovi nebo platnosti dat. V GIS syst´emech jsou popisov´any geometrick´e i atributov´e prvky. Jedn´a se o popis a urˇcen´ı souˇradn´eho syst´emu, zp˚ usobu poˇr´ızen´ı dat, informace o zhotoviteli atd. Jedn´ım z nejvhodnˇejˇs´ım a z´aroveˇ n nejpouˇz´ıvanˇejˇs´ım form´atem pro z´apis metadat je pr´avˇe XML se svou hierarchickou
Filip Zavadil
13. kvˇetna 2011
Kapitola 3. Form´ at SVG
32
strukturou. Proto data obsaˇzen´a v SVG form´atu nemus´ı b´yt pouh´a obrazov´a data, ale mohou n´est i informaci o referenˇcn´ım syst´emu. Tyto informace jsou zapisov´any do elementu metadata. N´asleduj´ıc´ı k´od je pˇrevzat ze str´anek W3C.org2 a popisuje pouˇzit´ı definovan´eho geografick´eho syst´emu souˇradnic podle k´odu EPSG. V uk´azce je vyuˇzit model pro z´apis metadat RDF (Resource Description Framework). <metadata> 4326EPSG5.2
Kapitola 4 Stylov´ e jazyky XML jako form´at je nositelem obsahu, kter´y by mˇel b´yt oddˇelen od formy, aby v nˇem obsaˇzen´e informace mohly b´yt prezentov´any v´ıce zp˚ usoby. Napˇr´ıklad jin´y v´ystup bude urˇcen pro tisk, jin´y pro internet nebo grafickou vizualizaci. Metodu jak toho dos´ahnout poskytuj´ı stylov´e jazyky CSS (Cascade Style Sheets) a XSL (XML Style Language). Tyto jazyky jsou samozˇrejmˇe dostupn´e i pro XML dialekty SVG nevyj´ımaje.
4.1
CSS
Kask´adov´e styly jsou zn´amy jiˇz delˇs´ı dobu ve spojen´ı s HTML, kde se trvale us´ıdlily. Nyn´ı se o v´yvoj star´a W3C a v dobˇe psan´ı t´eto pr´ace se pracuje na verzi CSS31 . Vlastnosti a chov´an´ı element˚ u se definuj´ı ve stylov´em souboru, kter´y m˚ uˇze b´yt intern´ı (souˇc´ast dokumentu) nebo extern´ı (samostatn´y soubor). Jednoduch´a uk´azka CSS jazyka bude pˇredvedena na pˇr´ıkladu 2.7. bod
N´azv˚ um element˚ u bod a souradnice se v CSS ˇr´ık´a selektory. Ty urˇcuj´ı k jak´ym element˚ um se budou uveden´e vlastnosti vztahovat. Pˇrehled nejd˚ uleˇzitˇejˇs´ıch selektor˚ u je uveden v tabulce 4.1. Vztahu rodiˇc — potomek, lze s v´yhodou pouˇz´ıt i pˇri stylov´an´ı SVG. Zdrojov´y soubor s koncovkou ‘.svg’ m˚ uˇze n´est pouze geometrick´e vyj´adˇren´ı, pˇriˇcemˇz instrukce pro vykreslov´an´ı mohou b´yt uvedeny v jin´e ˇc´asti dokumentu nebo i v jin´em souboru. D´ale lze ty sam´e prvky rozliˇsovat pomoc´ı tˇr´ıd (class) nebo identifik´atoru (id). Tato skuteˇcnost je velice v´yhodn´a pro kartografick´e u ´ˇcely. Kdy doch´az´ı k zohlednˇen´ı kvalitativn´ıch prvk˚ u (ˇs´ıˇrka vodn´ıho toku). Definov´an´ım CSS stylov´eho souboru lze utvoˇrit jazyk mapy, kter´y m˚ uˇze b´yt jednoduˇse upraven nebo nahrazen, aniˇz by to mˇelo vliv na polohovou spr´avnost. Dokonce lze tento styl i dynamicky mˇenit (pouˇzit´ım JavaScriptu). Mezi prvky, kter´e by mohly b´yt vyuˇzity pro kartografick´e u ´ˇcely patˇr´ı: 1
http://www.w3.org/Style/CSS/
Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
34
• barva Umoˇzn ˇ uje nastaven´ı barvy do atribut˚ u stroke a fill. K dispozici jsou barevn´e modely uveden´e v 3.7.4. • definice tahu Vykreslen´ı tahu lze v CSS upravit pouˇzit´ım atribut˚ u jako stroke-width, stroke-linejoin, stroke-dasharray • styl popisu Velikost p´ısma, jeho typ a styl lze CSS nastavit pouˇzit´ım selektor˚ u font-weight, font-family, font-style Zp˚ usob˚ u jak pouˇz´ıt CSS stylov´an´ı je nˇekolik. Jedn´ım z nich je pouˇzit´ı v dokumentu internˇe. Pokud je CSS definov´an externˇe, je nutn´e v dokumentu urˇcit url CSS souboru t´ımto zp˚ usobem: selektor
výběr
*
všechny elementy
bod
všechny elementy bod
bod souradnice
elementy souradnice, které jsou potomkem el. bod
bod > souradnice
analogický zápis: bod souradnice
souradnice[system]
elementy souradnice, která mají atribut system
souradnice[systém="EPSG:9221"]
elementy souradnice, s atributem systém: S-JTSK
bod#4001 bod.II
element bod, který má ID 4001 element bod, který má atribut class nastaven na “II”
Tabulka 4.1: Pˇr´ıklady pouˇzit´ı selektor˚ u v CSS
4.2
XSL
Dalˇs´ım ze stylov´ych jazyk˚ u je XSL (eXtensible Stylesheet Language), ˇcasto t´eˇz ve tvaru XSLT (eXtensible Stylesheet Language Transformation). Pˇrin´aˇs´ı trochu odliˇsn´y zp˚ usob neˇz pˇredchoz´ı CSS, kdy se stylov´an´ı“ prov´ad´ı podle pˇredem definovan´ych ˇsablon. V´ysledn´y ” dokument je sestaven programem, kter´emu se ˇr´ık´a XLST Processor. Mezi nejzn´amˇejˇs´ı patˇr´ı Saxon 2 od Michaela Kaye a Xalan 3 (Apache project). Oba jsou napsan´e v jazyce Java(Xalan je implementov´an i v C++). Dnes je jiˇz standardem, ˇze internetov´e prohl´ıˇzeˇce maj´ı takov´y XSLT procesor implementov´an. XSL nab´ız´ı moˇznost pouˇzit´ı XPath v´yraz˚ u, kter´e umoˇzn ˇ uj´ı nejen navigaci ve zdrojov´em dokumentu, ale i logick´e ˇr´ızen´ı [Her10]. V´yvoj XSL je pˇribliˇznˇe stejnˇe dlouh´y jako SVG. XSL z´ıskalo W3C doporuˇcen´ı v listopadu 1999. Jmenn´y prostor je deklarov´an t´ımto zp˚ usobem: <xsl:stylesheet version="1.2" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 2 3
Zp˚ usob jak prob´ıh´a transformace je zˇrejm´y na obr´azku 4.1. Jeden ˇci v´ıce XML soubor˚ u vstupuj´ı spoleˇcnˇe se stylov´ym souborem (koncovka .xsl ) do XSLT procesoru na jehoˇz v´ystupu je dokument libovoln´eho typu. M˚ uˇze to b´yt dalˇs´ı XML, HTML, TXT nebo SVG dokument. V´ystupn´ıch dokument˚ u m˚ uˇze b´yt tak´e v´ıce, pro r˚ uzn´e typy zaˇr´ızen´ı (obrazovka, tisk´arna atd.)
xml
xsl
xsl processor
svg xml html
Obr´azek 4.1: Princip XSL transformac´ı
Extern´ı stylov´y soubor je definov´an obdobn´ym zp˚ usobem jako v CSS. Dan´y k´od odkazuje na XSL soubor sablona.xsl:
Jak uˇz bylo ˇreˇceno v´yˇse, transformace je prov´adˇena podle ˇsablon, kter´e se zapisuj´ı mezi tagy <xsl:template match="/" > . Znak ‘/’ oznaˇcuje koˇrenov´y (root) element, na kter´y bude ˇsablona aplikov´ana. M´ısto toho znaku m˚ uˇze b´yt jak´ykoliv platn´y Xpath v´yraz, kter´y oznaˇcuje urˇcit´y uzel v dokumentu. V´ıce o moˇznostech adresov´an´ı v 4.2.3.
4.2.1
Hlaviˇ cka XSL
Kromˇe povinn´eho uveden´ı jmenn´eho prostoru a verze v elementu xsl:stylesheet je vhodn´e tak´e specifikovat v´ystupn´ı form´at pomoc´ı elementu xsl:output. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
Atribut method urˇcuje typ v´ystupn´ıho form´atu, uˇzit´e k´odov´an´ı je specifikov´ano v atributu encoding. N´asleduj´ı atributy doctype-public a doctype-system popisuj´ıc´ı definice typu v´ystupn´ıho dokumentu. Zarovn´an´ı k´odu dle XML pravidel je nastaveno atributem indent s parametrem yes. Atribut omit-xml-declaration="yes" zaruˇcuje vytisknut´ı klasick´e XML deklarace. Jako posledn´ı je v uk´azce uveden atribut media-type popisuj´ıc´ı typ (MIME, Content-type) v´ystupn´ıho dokumentu.
Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
4.2.2
36
Element xsl:value-of
Zp˚ usob jak z´ıskat hodnotu elementu nebo atributu, je pouˇzit´ı tagu value-of ve jmenn´em prostoru xsl. Povinn´y atribut select, zajiˇst’uje uveden´ı pˇresn´e polohy a n´azvu uzlu. <xsl:value-of select="jmeno"/>
Jedn´a se o nejv´ıce vyuˇz´ıvan´y element, jeho pouˇzit´ı je uk´az´ano na obr´azku 4.2.
Obr´azek 4.2: Pˇrehled vstupn´ıch a v´ystupn´ıch souboru XSL transformac´ı
4.2.3
XPath v´ yrazy
Hierarchick´a struktura XML dokumentu je zprostˇredkov´ana pomoc´ı tzv. uzl˚ u (nodes). Pro cestov´an´ı“ po takov´ych uzlech jsou vyuˇz´ıv´any XPath identifik´atory. D´ıky dˇediˇc” n´ym vztah˚ um (rodiˇc — potomek) se lze jednoduˇse odkazovat na vnoˇren´e elementy. Z´akladn´ı osy, kam je moˇzno adresovat jsou tyto: (pˇr´ıklady se vztahuj´ı k uk´azkov´emu xml dokumetu, kdy je aktu´aln´ı uzel element bod)[Wil09]: aktuální uzel <mereni> <souradnice system="EPSG:5221"> 744903.16 , 1040716.70 <popis encoding="utf-8" delka="90"> Bod se nachází 2m jižně od ...
mereni bod souradnice
aktuální uzel popis
• absolutn´ı/relativn´ı cesta (aktu´aln´ı element bod) - /bod/popis/ ⇒ absolutn´ı cesta k elementu popis Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
37
- popis/ ⇒ relativn´ı cesta k elementu popis • koˇ renov´ y element - / ⇒ koˇrenov´y element mereni • pˇ redek - identifik´ator: parent, ancestor, ancestor-or-self - ../mereni, parent::bod, /, ancenstor::bod ⇒ vybere element mereni • potomek - identifik´ator: child, descendant, descendant-or-self - /bod/souradnice/, souradnice/ ⇒ vybere element souradnice - descendant::bod, child::bod ⇒ vybere elementy souradnice, popis - descendant-or-self::bod ⇒ vybere elementy bod, souradnice, popis - //popis ⇒ vyhled´a elementy popis v libovoln´e hloubce • sourozenec - identifik´ator: preceding-sibling, preceding, following - /mereni/bod/popis/, popis/, following::souradnice ⇒ vybere element popis - /mereni/bod/souradnice/, souradnice/, preceding::popis ⇒ vybere element souradnice • s´ am na sebe - identifik´ator: self - ., self::node() ⇒ vybere element bod • atribut - identifik´ator: attribute, @ - popis/attribute::encoding, popis/@encoding ⇒ zjist´ı hodnotu atributu encoding (utf-8) - popis[@encoding] ⇒ vybere vˇsechny elementy popis, kter´e maj´ı atribut encoding • index Pokud by element bod obsahoval v´ıce element˚ u popis, je moˇzn´e k nim pˇristupovat pomoc´ı index˚ u: - /bod/popis[1] ⇒ vr´at´ı prvn´ı element popis - /bod/popis[last()] ⇒ vr´at´ı posledn´ı element popis • logick´ a podm´ınka Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
38
- /bod/popis[@delka > 80] ⇒ vybere elementy popis, kter´e maj´ı atribut delka nastaven v´ıce neˇz 80 znak˚ u - /bod/popis[@delka > 80][@delka < 120] ⇒ vybere elementy popis, kter´e maj´ı atribut delka nastaven v´ıce neˇz 80 znak˚ u, ale m´enˇe neˇz 120 • libovoln´ a hodnota Libovoln´y element lze zastoupit znakem ‘*’. - /bod/*, child::* ⇒ vybere vˇsechny libovoln´e elementy, kter´e jsou potomky elementu bod - attribute::* ⇒ vybere vˇsechny atributy aktu´aln´ıho uzlubod • Xpath oper´ atory Na uzly lze aplikovat XPath oper´atory, pˇr´ıklad pouˇzit´ı: /souradnice | /souradnice/@system. u) - |- sjednocen´ı (vr´at´ı hodnoty obou uzl˚ - +, -, *, div - matematick´e oper´atory (ˇc´ıseln´e hodnoty), souˇcet, rozd´ıl, souˇcin, pod´ıl - =, != - rovnost, nerovnost - <, >, <=, => - m´enˇe neˇz, v´ıce neˇz - or - logick´e nebo“ ” n“ - and - logick´e a z´aroveˇ ” - mod - zbytek po celoˇc´ıseln´em dˇelen´ı
4.2.4
Podm´ıneˇ cn´ e zpracov´ an´ı
V XSLT lze prov´adˇet r˚ uzn´e logick´e u ´ kony zn´am´e z ostatn´ıch programovac´ıch jazyk˚ u. Jedn´a se o podm´ınky nebo cykly. Tato skuteˇcnost ˇcin´ı rozd´ıl mezi CSS. Lze t´ımto zp˚ usobem roztˇr´ıdit (seˇradit) nebo klasifikovat data. • xsl:if - jedna ze dvou moˇznost´ı jak pouˇz´ıt podm´ınˇen´y v´yraz je pˇr´ıkaz xsl:if <xsl:if test="podm´ ınka"> ...
Podm´ınka nem´a else ˇc´ast, tato nev´yhoda je odstranˇena pouˇzit´ım pˇr´ıkazu xsl:choose viz. n´ıˇze. • xsl:choose - prvek obsahuj´ıc´ı plnou podm´ınku je xsl:choose spoleˇcnˇe s instrukc´ı xsl:when a xsl:otherwise <xsl:choose> <xsl:when test=" podmínka "> ... tělo podmínky ... <xsl:otherwise test=" 2. podmínka "> ... tělo 2. podmínky ...
první podmínka, obdoba příkazu if druhá podmínka, obdoba příkazu else libovolně násobné použití
Tohoto pˇr´ıkazu lze vyuˇz´ıt pˇri klasifikaci prvk˚ u, napˇr. velikost znaˇcky pro obce dle poˇctu obyvatel nebo ˇs´ıˇrka vodn´ıho toku podle jeho d´elky.
Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
4.2.5
39
Cykly
I stylovac´ı“ jazyk XSLT m´a k dispozici metodu pro iterativn´ı zpracov´an´ı, tedy ob” dobu k programovac´ımu pˇr´ıkazu for. Jedn´a se o ˇc´ast ˇsablony, kter´a je opakovanˇe pouˇzita. Z´akladn´ı syntaxe je tato : <xsl:for-each select="cesta"> ... ,
kde instrukce xsl:for-each znaˇc´ı poˇc´atek cyklu a atribut select nastavuje cestu k uzl˚ um, na kter´e chceme ˇc´ast t´eto ˇsablony aplikovat. Pˇritom lze vyuˇz´ıt vˇsech moˇznost´ı z´apisu cesty podle 4.2.3. vstupní dokument [.xml] <mereni>
... ... ... ... ... ...
transformační šablona [.xsl]
<xsl:for-each select="mereni/bod"> bod č. <xsl:vaule-of select="@cislo"/>
výstup [.html] bod bod bod bod bod bod
č. č. č. č. č. č.
4001 4002 4003 4004 4005 4006
Tabulka 4.2: Uˇzit´ı instrukce xsl:for-each
4.2.6
Promˇ enn´ e
Pojem promˇenn´e nelze u XSLT ch´apat jako u ostatn´ıch programovac´ıch jazyk˚ u. Jedn´a se sp´ıˇse o definici konstanty, jelikoˇz hodnota jiˇz definovan´e promˇenn´e uˇz nelze zmˇenit. I pˇres tuto nev´yhodu je pouˇzit´ı tohoto prvku pˇr´ınosn´e. Do promˇenn´e lze uloˇzit napˇr´ıklad cestu k urˇcit´emu uzlu, ˇc´ıselnou nebo textovou hodnotu. Z´apis hodnoty prob´ıh´a elementem xsl:variable, kter´y obsahuje dva atributy. Prvn´ı (name) nastavuje n´azev a druh´y (select) hodnotu promˇenn´e. Zavol´an´ı hodnoty je zprostˇredkov´ano pˇres element xsl:value-of, kdy v atributu select je urˇcen n´azev promˇenn´e uvozen´e znakem $“. ” <xsl:variable name=" foo1 " select=" 320 " /> <xsl:variable name=" foo2 " select=" 425 " /> Počet vyder je: 745 jednotek ! Počet vyder je: <xsl:value-of select=" $foo1 + $foo2 "/> jednotek !
XSLT se nemus´ı uv´adˇet datov´e typy promˇenn´ych, lze ale zapsat boolean“ hodnoty ” ˇ true() a false() vyuˇziteln´e v podm´ıneˇcn´em zpracov´an´ı. Casto je tak´e do promˇenn´e ukl´ad´ana cesta k urˇcit´emu uzlu, kdy dojde (pˇri vhodn´em pojmenov´an´ı) ke zv´yˇsen´ı ˇcitelnosti a pˇrehlednosti k´odu.
Filip Zavadil
13. kvˇetna 2011
Kapitola 4. Stylov´e jazyky
4.2.7
40
Dalˇ s´ı pouˇ zit´ e prvky
• document() V pˇr´ıpadˇe pouˇzit´ı dalˇs´ı extern´ıch dokument˚ u lze vyuˇz´ıt funkci document(). Ta je vol´ana z elementu xsl:variable. Naˇcten´ı extern´ıho dokumentu dokument2.xml: <xsl:variable name="etapa2" select="document(’C:\ dokument2.xml’)"/>
N´asledn´e pouˇzit´ı uzlu cas v extern´ım dokumentu <xsl:value-of select="$etapa2/cas"/>
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
41
Kapitola 5 Aplikace do praxe Praktick´a uk´azka vyuˇzit´ı SVG a pˇridruˇzen´ych technologi´ı jako (CSS, XSL, JavaScript) v kartografii je vystavena na http://svg.filipzava.cz. D˚ uvod proˇc se nejedn´a o samotn´y soubor SVG je jednoduch´y. Pouˇzit´ım stylov´ych soubor˚ u jako CSS nebo XSL je dosaˇzeno jist´e jednotnosti a pˇrehlednosti. Je tak´e jasnˇe oddˇelena geometrick´a sloˇzka od t´e vizu´aln´ı. Nav´ıc body, kter´e tvoˇr´ı hranice u ´ zemn´ıch jednotek mohou b´yt jednoduˇse exportov´any z ostatn´ıch program˚ u (ArcMap, AutoCad, Kokeˇs atd.) a ihned pouˇzity k vykreslen´ı. Dalˇs´ı v´yhodou stylov´an´ı“ je dynamick´a zmˇena zp˚ usobu vykreslen´ı (v aplikaci ” zmˇena kl´ıˇce mapy u pl´anu Dejvic). JavaScript zajiˇst’uje ovl´ad´an´ı dokumentu (zoom,posun) a dynamiˇcnost dokumentu (vyplˇ nov´an´ı atributov´e tabulky daty po kliknut´ı na pˇr´ısluˇsnou ˇ obec u mapy CR). Aplikace je trvale vystavena na vlastn´ım serveru, kde jsou k dispozici tak´e zdrojov´e k´ody.
5.1
Zdroj dat a zp˚ usob exportu do XML/SVG
Ve vˇetˇsinˇe pˇr´ıpad˚ u byla data z´ısk´ana z form´atu Shapefile spoleˇcnosti ESRI. Data ˇ pro Ceskou republiku a Dejvice byly staˇzeny jako shp bal´ıˇcek ze serveru cloudmade.com1 a poch´az´ı z d´ılny OpenStreet Map. Pr´ava na tyto data jsou oˇsetˇrena licenc´ı CC BY-SA 2.02 . Dalˇs´ı krok byla jejich u ´ prava v GIS aplikaci ArcMap10 s univerzitn´ı licenc´ı. Upravov´ana byla zejm´ena atributov´a data a m´ısty i polohopis jednotliv´ych objekt˚ u.
5.1.1
Program shp2svg
Export do form´atu xml/svg byl zajiˇstˇen aplikac´ı shp2svg. Je to projekt serveru carto.net 3 uvolˇ nov´an pod licenc´ı LGPL. Projekt tak´e vyuˇz´ıv´a program shp2pgsl, kter´y je souˇc´ast´ı projektu PostGis4 . D´ale je vyuˇzit program ogis2svg.pl, kter´y data pˇrevede na SVG form´at. V´ysledn´y dokument m´a tyto vlastnosti: • Bodov´a vrstva je pˇrevedena na elementy point nebo symbol (program se dotazuje). • Polygonov´a vrstva je reprezentov´ana elementy polygon a path. 1
• Liniov´e prvky jsou pˇrevedeny na element path nebo multiline. • V´ystup obsahuje relativn´ı souˇradnice (redukce velikosti dokumentu). • Souˇradnice mohou b´yt tak´e zaokrouhleny. • Vybran´e prvky z atributov´e tabulky(vol´ı uˇzivatel) jsou vloˇzeny k pˇr´ısluˇsn´ym element˚ um jako atributy. Z tohoto d˚ uvodu je tak´e vytvoˇrena definice typu dokumentu (DTD), kter´a umoˇzn ˇ uje pˇrid´an´ı negrafick´ych dat. • Moˇznost vybr´an´ı atributu, kter´y m´a slouˇzit jako unik´atn´ı identifik´ator (id). • K element˚ um je moˇzno pˇriˇradit tak´e event-handlers“ (sloty pro akce) pˇri pouˇzit´ı ” JavaScriptu. Program napsan´y v jazyce C++ je ke staˇzen´ı v bin´arn´ım souboru zkompilovan´ym pro 3 platformy (MS Windows,GNU Linux a MacOSX ). V prostˇred´ı Windows se program spouˇst´ı z pˇr´ıkazov´eho ˇr´adku pˇr´ıkazem: ogis2svg.exe --input yourshapename --output yourshapename.svg --roundval 0.1
Parametry --input a --output nastavuje jm´eno vstupn´ıho/v´ystupn´ıho souboru, parametr --roundval urˇcuje desetinn´e m´ısto pro zaokrouhlen´ı. Seznam nepovinn´ych parametr˚ u: --inputunits, --outputunits - definice vstupn´ıch, v´ystupn´ıch jednotek --viewBox - urˇcen´ı obzoru, hodnoty: ’480000 -300000 350000 220000’ --scale - nastaven´ı mˇeˇr´ıtka, hodnota ’25000’, pro mˇeˇr´ıtko 1: 25 000 --referenceframe - souˇradnice referenˇcn´ıho r´amu (xmin, xmax, ymin, ymax) K v´ysledn´emu SVG dokumentu staˇc´ı pˇripojit stylov´y soubor, kde jsou definov´any znaˇcky mapy. Lze ho tak´e otevˇr´ıt ve vektorov´ych editorech a pˇridat prvky mapy jako grafick´e mˇeˇr´ıtko a tir´aˇz.
5.2
Popis aplikace
V aplikaci je rozliˇsena datov´a sloˇzka (body polygon˚ u, lini´ı nebo symbol˚ u) a vizualizaˇcn´ı sloˇzka (barvy, znaˇcky atd.) . Pomoc´ı XSL transformac´ı jsou tyto sloˇzky pˇrevedeny na v´ysledn´y SVG dokument. Datov´a ˇc´ast je v surov´em“ fom´atu XML, zat´ımco vizua” lizaˇcn´ı (stylov´a) je zaps´ana v jazyc´ıch CSS a XSL.
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
5.2.1
43
XML datov´ aˇ c´ ast
Po pˇrevodu z form´atu Shapefile do SVG byl dokument dodateˇcnˇe upraven v textov´em editoru jEdit, kde byly vymaz´any zbyteˇcn´e (pro poˇzadovan´y u ´ˇcel) atributy a elementy. N´aslednˇe byl dokument uloˇzen ve form´atu XML, protoˇze transformace na SVG byla zajiˇstˇena pouˇzit´ım XSL. Byl kladen d˚ uraz, aby XML data byla co nejjednoduˇsˇs´ı a mˇela co nejmenˇs´ı datov´y objem. Vˇetˇsina XML soubor˚ u obsahuje koˇrenov´y element s n´azvem features oznaˇcuj´ıc´ı geometrick´y obsah. Dalˇs´ı elementy a atributy se liˇs´ı v z´avislosti na typu dat. • Polygonov´ a vrstva Kaˇzd´y polygon (budova, les, vodn´ı plocha atd.) obsahuje souˇradnice definiˇcn´ıch bod˚ u a data z atributov´ych tabulek. Toto vˇse je uzavˇreno do elementu, kter´y m´a ve vˇetˇsinˇe pˇr´ıpad˚ u n´azev path (kv˚ uli pˇrehlednosti je stejn´y jako v SVG). • Liniov´ a vrstva Liniov´e prvky (komunikace, vodn´ı toky, ˇzeleznice atd.) jsou urˇceny souˇradnicemi lomov´ych bod˚ u. Obsahuj´ı tak´e dalˇs´ı atributy jako n´azev nebo typ linie. • Bodov´ a vrstva Souˇradnice pro um´ıstˇen´ı symbol˚ u jsou uloˇzeny v XML dokumentu popisuj´ıc´ı bodovou vrstvu. Mohou to b´yt adresn´ı body, oznaˇcen´ı obc´ı u map vˇetˇs´ıch mˇeˇr´ıtek nebo body z´ajmu. Protoˇze data byla z´ısk´ana ze soubor˚ u .shp a tak´e kv˚ uli pˇrehlednosti jsou tyto typy ’ (polygony, linie a body) kaˇzd´y zvl´aˇst ve sv´em XML souboru. Detailn´ı pohled a rozbor zdrojov´ych XML dokument˚ u je uveden pro kaˇzdou mapu zvl´aˇst’.
5.2.2
Stylov´ aˇ c´ ast
Pomoc´ı XSLT jsou naˇcteny jednotliv´e XML soubory, kter´e se z´ uˇcastˇ nuj´ı vykreslov´an´ı. XSL ˇsablona pomoc´ı cyklu zap´ıˇse do v´ystupn´ıho dokumentu SVG elementy, kter´e maj´ı definov´an styl dle urˇcit´ych pravidel (podm´ınky, klasifikace, atd.). Soubor je tak´e opatˇren SVG deklarac´ı, cestou k JavaScipt knihovnˇe zajiˇst’uj´ıc´ı ovl´adan´ı mapy a dalˇs´ımi d˚ uleˇzit´ymi prvky. Jednotliv´e XML soubory jsou naˇc´ıt´any XSL funkc´ı document. Ve stejn´em poˇrad´ı jako na v´ysledn´e mapˇe je na vrstvy aplikov´an pˇr´ıkaz xsl:for-each, kter´y v cyklu provede z´apis do SVG element˚ u. Prob´ıh´a zde tak´e logick´e zpracov´an´ı (podm´ınky, klasifikace apod.).
5.3
Popis jednotliv´ ych aplikac´ı
Kaˇzd´a z aplikac´ı se snaˇz´ı vyuˇz´ıt trochu jinou ˇc´ast z dovednosti SVG jazyka, aby bylo jeho vyuˇzit´ı co nejv´ıce a co nejn´azornˇeji pops´ano. U kaˇzd´eho odd´ılu je uveden zdroj dat, zp˚ usoby jeho editace se seznamem prvk˚ u a atribut˚ u.
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
5.3.1
44
Evropa
Kartogram Evropa“ zn´azorˇ nuje pod´ıl hrub´eho dom´ac´ıho produktu na hlavu ve ” vybran´ych st´atech Evropy. Odst´ın barvy je nastaven podle pˇrepoˇcten´ych hodnot na procenta a zobrazen pomoc´ı barevn´eho modelu HSL, kde posledn´ı parametr je jas (lightness). U kaˇzd´eho st´atu se tak´e vyskytuje odkaz na str´anku st´atu na serveru cs.wikipedia.org. Ze stejn´eho serveru jsou tak´e z´ısk´av´any miniatury vlajek st´at˚ u ve form´atu png. Kartogram Evropy je v Lambertovˇe azimut´aln´ı projekci s (LAEA Europe, EPSG:3035) 5 a skl´ad´a oznaˇcen´ım z tˇechto vrstev: • europe.xml Kaˇzd´y st´at je uveden v elementu polygon, kter´y obsahuje tyto atributy: - id - identifik´ator, zkratka st´atu dle normy ISO 3166-1 (country codes)6, podle kter´eho doch´az´ı ke spojen´ı hodnot - d - souˇradnice lomov´ych bod˚ u hranic st´at˚ u • eurinfo.xml V koˇrenov´em elementu info je pro kaˇzd´a st´at vyˇclenˇen element country s tˇemito atributy: - id -identifik´ator, k´od zemˇe - name - n´azev st´atu v angliˇctinˇe - cz - n´azev st´atu v ˇceˇstinˇe - x,y - souˇradnice referenˇcn´ıho bodu, pro um´ıstˇen´ı n´azvu textu • euroGDP.xml Data z´ıskan´a ze serveru Eurostat 7 pˇreveden´a do XML. - id -identifik´ator, k´od zemˇe - value - hodnota hrub´eho dom´ac´ıho produktu na obyvatele
5.3.2
ˇ Cesk´ a republika
ˇ e republiky zobrazuje u Mapa Cesk´ ´ zemnˇe spr´avn´ı jednotky kraje (NUTS 3), obce s rozˇs´ıˇrenou p˚ usobnost´ı, d´ale obsahuje silniˇcn´ı a ˇzelezniˇcn´ı s´ıt’, vodn´ı toky a plochy a bodovou vrstvu obc´ı. Data byla z´ısk´ana pˇrevodem z form´atu shapefile. • CZECHrelief.png Rastrov´y podklad zn´azorˇ nuj´ıc´ı reli´ef z´ıskan´y ze serveru http://www.shaded-relief.com. • orp.xml Souˇradnice lomov´ych bod˚ u hranic rozˇs´ıˇren´e p˚ usobnosti obc´ı. 5
Hrubý domácí produkt v USD na obyvatele v roce 2009, zdroj: eurostat
Island
> 30 tis. 25 tis. - 30 tis. 20 tis. - 25 tis.
Finsko
15 tis. - 20 tis.
Norsko
10 tis. - 15 tis.
Estonsko 5 tis. - 10 tis.
Švédsko Lotyšsko Litva
Dánsko Irsko
Bělorusko
Lichtenštejnsko Velká Británie
Holandsko Belgie
Polsko Ukrajina
Německo Česko Slovensko Rakousko
Lucembursko Francie
Švýcarsko Itálie
Moldava
Maďarsko
Rumunsko
Slovinsko Chorvatsko
Srbsko Bulharsko Makedonie Albánie
Portugalsko
Řecko
Španělsko
Černá Hora
Bosna a Hercegovina
Obr´azek 5.1: Kartogram Evropa, HDP na obyvatele
• waterWays.xml Liniov´a vrstva vodn´ıch tok˚ u obsahuje atributy: - id - n´azev ˇreky - length - d´elka ˇreky, podle kter´e se pomoc´ı XSL urˇcuje tlouˇst’ka vykreslen´ı toku - d - posloupnost souˇradnic lomov´ych bod˚ u linie • waterArea.xml Zde jsou pops´any vodn´ı plochy (pˇrehrady, jezera a vˇetˇs´ı rybn´ıky). - name - n´azev vodn´ı plochy - area m2 - ploˇsn´a v´ymˇera v m2 - d - souˇradnice lomov´ych bod˚ u polygonu • roads.xml Liniov´a vsrtva komunikac´ı je vizualizov´ana podle typu silnice. Zde jsou zobrazeny pouze d´alnice a silnice I. tˇr´ıdy. - type - znaˇc´ı typ silnice (motorway,primary) - ref - oznaˇcen´ı komunikace - maxspeed - informace o maxim´aln´ı povolen´e rychlosti - d - souˇradnice lomov´ych bod˚ u lini´ı
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
46
• railways.xml Tento soubor obsahuje liniov´e prvky (osa ˇzeleznice) a bodov´e prvky (ˇzelezniˇcn´ı uzlov´e zast´avky) - way - oznaˇcen´ı ˇzelezniˇcn´ıch trat´ı - length - d´elka tratˇe - ele - typ tratˇe (elektrifikovan´a/neelektrifikovan´a) - kolej - ˇc´ıseln´e oznaˇcen´ı jedno ˇci dvojkolejn´e tratˇe - d - souˇradnice lomov´ych prvk˚ u osy ˇzeleznice ˇ Zelezniˇ cn´ı stanice uzlov´ych trat´ı jsou v elementech circle s atributy: - name - n´azev ˇzelezniˇcn´ı stanice - way - n´azev trat´ı - cx, cy - souˇradnice (S-JTSK) ˇzelezniˇcn´ıch stanic • region.xml V tomto souboru jsou uveden´e souˇradnice lomov´ych bod˚ u hranic kraj˚ u. • places.xml Bodov´a vrstva obc´ı s v´ıce neˇz 500 obyvateli. - nazob - n´azev obce - nazorp - n´azev pˇr´ısluˇsn´e obce s rozˇs´ıˇrenou p˚ usobnost´ı - nk - n´azev kraje - psc - poˇstovn´ı smˇerovac´ı ˇc´ıslo - ob91 - poˇcet obyvatel obc´ı k roku 1991 - cx, cy - souˇradnice (S-JTSK) bod˚ u • volby.xml Zde je pˇredvedena uk´azka uˇzit´ı statistick´ych u ´ daj˚ u. Tento XML dokument obsahuje ˇ U ´ a pˇrevedena na v´ysledky krajsk´ych voleb v roce 2008. Data byla pˇrevzata ze CS XML. Vizualizace se u ´ˇcastn´ı pouze nynˇejˇs´ı parlamentn´ı strany. Koˇrenov´y element doc obsahuje elementy region, kde kaˇzd´y zastupuje kraj, ve kter´em se volilo. - id - identifik´ator, dvojm´ıstn´a zkratka n´azvu kraje - ODS,VV,TOP09,CSSD,KSCM - zkratky politick´ych stran, hodnoty jsou absolutn´ı poˇcty hlas˚ u - cx,cy - souˇradnice referenˇcn´ıho bodu pro um´ıstnˇen´ı grafu Byl zvolen sloupcov´y graf, jelikoˇz jeho implementace byla nejjednoduˇsˇs´ı. Diagram by sice vyhovoval v´ıce, ale pro zpracov´an´ı by byly nutn´e goniometrick´e funkce, kter´e nejsou XSLT 1.0 definov´any. Pouˇzit´ı dalˇs´ıch technologi´ı (JavaScript, php) by bylo v XSL nevhodn´e. Graf je zkonstruov´an z SVG element˚ u rect, line, text.
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
47
ˇ Obr´azek 5.2: Uk´azka kartografick´ych prvk˚ u na mapˇe CR
5.3.3
ˇ Pl´ an kampusu CVUT v Dejvic´ıch
Data byla staˇzena ve form´atu shapefile ze serveru cloudmade.com. Pot´e byla v programu ESRI ArcMap upravena atributov´a tabulka, protoˇze nˇekter´e prvky byly nekompletn´ı. V tomto programu byla tak´e provedeno georeferencov´an´ı a transformace obou rastrov´ych ortofotomap a jejich export do form´atu JPEG. V´yˇcet jednotliv´ych vrstev je proveden ve stejn´em poˇrad´ı jako v SVG aplikaci (mal´ıˇr˚ uv algoritmus). • DejviceBackgorund.xml Polygonov´a vrstva obsahuj´ıc´ı podkladov´e prvky jako zastavˇen´a, zatravnˇen´a ˇci pr˚ umyslov´a plocha. Vrstva jde vypnout, aby mohly b´yt vyuˇzity podkladov´e ortofotomapy. • ortofoto.jpg K dispozici je barevn´a ortofotomapa z roku 2008 od firmy GEODIS Brno pˇr´ıstupn´a na serverech maps.google.cz a mapy.cz. • ortofotoHistorical.jpg Druh´a historick´a ortofotomapa z roku 1953 je ze serveru kontaminace.cenia.cz ´ r v Dobruˇsce. Obˇe fotomapy byly georeferencov´any a transforposkytnut´a VGHMUˇ mov´any na data v syst´emu JTSK. • DejvicePolygon.xml Ploˇsn´e symboly jsou v tomto pl´anu pouˇzity pro vizualizaci budov, hˇriˇst’, park˚ u nebo parkoviˇst’. V koˇrenov´em elementu features jsou polygony uvedeny jako pod tagem path a s atributy: - name - n´azvy veˇrejn´ych budov nebo park˚ u, v pˇr´ıpadˇe ˇz´adn´e hodnoty je uvedeno ‘NULL’ - class - atribut ud´av´a typ zobrazovan´eho mnoho´ uheln´ıku, hodnoty jsou: houses (rodinn´e domy), apartment (byty), university (vysok´a ˇskola), park, parking(parkoviˇstˇe), station (zast´avka), playground (hˇriˇstˇe) Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
48
- d - souˇradnice lomov´ych bod˚ u polygon˚ u • DejviceLines.xml Pod koˇrenov´ym elementem features jsou obsaˇzeny tagy path s atributy: - name - ud´av´a n´azev ulice ˇci komunikace, pokud je neuvedena je atribut nastaven na ‘NULL’ - type - podle tohoto atributu jsou v CSS specifikov´any znaˇcky mapy - d - souˇradnice lomov´ych bod˚ u lini´ı • DejvicePoints.xml
5.3.4
Pl´ an mˇ esta Pelhˇ rimov
Tato ˇc´ast nen´ı stylov´ana XSL transformac´ı ani kask´adov´ymi styly. Je to pˇr´ıklad exportu do form´atu SVG z kartografick´eho programu OCAD. Po exportu byly v textov´em editoru jEdit odstranˇeny zbyteˇcn´e prvky, kter´e zvˇetˇsovaly datov´y objem souboru. I pˇres snahu o u ´ sporu velikosti souboru je dokument pro internetov´e prostˇred´ı se sv´ymi pˇribliˇznˇe 8Mb st´ale trochu objemnˇejˇs´ı a naˇc´ıt´an´ı dokumentu m˚ uˇze trvat delˇs´ı dobu. Pˇri pouˇzit´ı CSS by soubor mohl b´yt menˇs´ı, ale program OCAD moˇznost vytvoˇren´ı stylov´ych soubor˚ u nepodporuje a manu´aln´ı vytvoˇren´ı je obt´ıˇznˇejˇs´ı. Pl´an mˇesta byl vytvoˇren v r´amci pˇredmˇetu 153DIK. Souˇc´ast´ı SVG dokumentu je mimo pl´anu tak´e n´azev, znak mˇesta a legenda.
5.4
Kartografick´ e prvky v SVG
V t´eto podkapitole jsou rozebr´any moˇznosti grafick´eho jazyka SVG ke kartografick´ym u ´ˇcel˚ um. Postupnˇe boudou uvedeny pˇr´ıklady kartografick´ych znaˇcek a zp˚ usoby jejich z´akresu pomoc´ı SVG. U kaˇzd´eho typu znaˇcky je tak´e uveden obr´azek a algoritmus z´apisu znaˇcky v poˇrad´ı v jak´em by se mˇel vyskytovat v SVG dokumentu.
5.4.1
Vizualizace liniov´ ych znaˇ cek
Kartografick´e liniov´e znaˇcky lze v SVG vykreslit opakovan´ym pouˇzit´ım elementu path s odliˇsn´ymi stylov´ymi atributy, ale s identick´ym atributem se souˇradnicemi lomov´ych bod˚ u. D´ale zde najdou vyuˇzit´ı atributy stroke-width, stroke-linecap, stroke-dasharray, stroke-dashoffset. Tato znaˇcka je vyuˇz´ıv´ana pro vizualizaci silnic vyˇsˇs´ıch tˇr´ıd. Osa komunikace je tvoˇrena dvˇema totoˇzn´ymi elementy path, s odliˇsnou barvou a tlouˇst’kou tahu. Algoritmus z´apisu: 1. <path stroke="braun" stroke-width="24px" d="..."/> 2. <path stroke="yellow" stroke-width="20px" d="..."/>
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
49
Dalˇs´ı moˇznost vizualizace pozemn´ı komunikace. Zde je pˇrid´an dalˇs´ı element path, kter´y vykresluje u ´ zkou ˇcernou kˇrivku. 1. <path stroke="braun" stroke-width="24px" d="..."/> 2. <path stroke="yellow" stroke-width="20px" d="..."/> 3. <path stroke="black" stroke-width="4px" d="..."/>
Kartografick´a liniov´a znaˇcka se ˇsipkami m˚ uˇze b´yt vyuˇzita u silnic nebo stezek s pˇrik´azan´ym smˇerem pohybu. Znaˇcka je vytvoˇrena elementem path, kter´y je rozdˇelen na u ´ seky. V ˇc´asti defs je zaps´an element marker, kde je definov´ana ˇsipka viz. 3.3.1 1. <marker id="sipka" > <polygon points="..."/> 2. Segmenty <path marker-end="url(#sipka)" d="..."/>
Jedn´ım ze zp˚ usob˚ u znaˇcen´ı ˇzelezniˇcn´ı tratˇe je vyuˇzit´ı ˇc´arkovan´e kˇrivky. Je tvoˇrena dvˇema elementy, kde prvn´ı je vyplnˇen ˇcernou barvou a druh´y je b´ıl´y, pˇreruˇsovan´y. 1. <path stroke="black" stroke-width="24px" d="..."/> 2. <path stroke="white" stroke-width="20px" stroke-dasharray="20px" d="..."/>
Lanovka nebo vlek je vykreslen dvˇema elementy. Prvn´ı je pln´a ˇc´ara a druh´y je kˇrivka ˇc´arkovan´a s nastaven´ym atributem stroke-linecap na hodnotu round. 1. <path stroke="black" stroke-width="5px" d="..."/> 2. <path stroke="black" stroke-width="25px" d="..." stroke-dasharray="40" stroke-linecap="round"/>
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
50
Chr´anˇen´a u ´ zem´ı ˇci oblasti jsou vyznaˇceny sloˇzitˇejˇs´ım zp˚ usobem. Prvek je tvoˇren dvˇema elementy, pˇriˇcemˇz prvn´ı je ˇsirok´y a ˇc´arkovan´y a druh´y (uˇzˇs´ı) je zvˇetˇsen a m´ırnˇe posunut. 1. <path stroke="green" stroke-width="25px" d="..." stroke-dasharray="40"/> 2. <path stroke="green" stroke-width="5px" d="..." transform="scale(1.1) translate(-5,-5)"/>
Pˇr´ırodn´ı prvky jako alej nebo stromoˇrad´ı m˚ uˇze b´yt tvoˇreno dvˇema ˇc´arkovan´ymi nebo teˇckovan´ymi kˇrivkami. Prvn´ı kˇrivka vykresluje zelen´e kruhy a druh´a b´ıl´e kruhy s menˇs´ım pr˚ umˇerem. T´ım je dosaˇzeno vykreslen´ı mezikruˇz´ı. 1. <path stroke="green" stroke-width="25px" d="..." stroke-dasharray="1 40" stroke-linecap="round"/> 2. <path stroke="white" stroke-width="30px" d="..." stroke-dasharray="1 40" stroke-linecap="round"/>
Liniov´a znaˇcka informuj´ıc´ı o ostr´em ter´enn´ım zlomu (n´asep, skaln´ı linie) je tvoˇrena tˇremi elementy v tomto poˇrad´ı: pln´a fialov´a ˇc´ara, ˇsirok´a fialov´a ˇc´arkovan´a ˇc´ara a pln´a b´ıl´a ˇc´ara. 1. <path stroke="violet" stroke-width="25px" d="..."/> 2. <path stroke="violet" stroke-width="35px" d="..." stroke-dasharray="1 40" stroke-linecap="butt"/> 3. <path stroke="white" stroke-width="20px" d="..."/>
St´atn´ı hranici lze vykreslit pomoc´ı tˇr´ı element˚ u. Prvn´ı (ˇsed´y, ˇsirok´y), druh´y a tˇret´ı je ˇc´arkovan´y s odliˇsn´ym nastaven´ım atributu stroke-linecap. 1. <path stroke="grey" stroke-width="25px" d="..." stroke-dasharray="40"/> 2. <path stroke="black" stroke-width="5px" d="..." stroke-dasharray="30 50" stroke-linecap="square"/> 3. <path stroke="black" stroke-width="5px" d="..." stroke-dasharray="1 70" stroke-linecap="round"/>
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
5.4.2
51
Vizualizace are´ alov´ ych znaˇ cek
Kartografick´e ploˇsn´e znaˇcky lze vytv´aˇret dvˇema zp˚ usoby. Elementem polygon nebo path. Mnoho´ uheln´ık je definov´an lomov´ymi body, kdeˇzto tvar plochy u elementu path lze i Bezi´erov´ymi kˇrivkami. Tento typ znaˇcek se vyuˇz´ıv´a pro z´akres vodn´ıch, lesn´ıch, zatravnˇen´ıch nebo zastavˇen´ych ploch a budov. Barvou vyplnˇen´e are´alov´e znaˇcky jsou nejjednoduˇsˇs´ı pro implementaci. Je moˇzn´e vyuˇzit´ı elementu stroke pro zobrazen´ı okraje. 1. <polygon stroke="darkblue" fill="blue" points="..."/>
I u ploˇsn´ych znaˇcek lze vyuˇz´ıt form´atov´an´ı okraje plochy jako u liniov´ych prvk˚ u. 1. <polygon stroke="green" fill="lightgreen" points="..."/> 2. <polygon stroke="green" stroke-width="25px" stroke-dasharray="40" fill="none"/>
ˇ Srafov´ an´ı lze definovat v hlaviˇckov´e ˇc´asti <defs> elementem pattern, kde je specifikov´ana linka 1. <pattern id="srafovani" > 2. <polygon stroke="braun" stroke-width="25px" fill="url(#srafovani)"/>
K v´yplni ploch lze tak´e vyuˇz´ıt pˇredem definovan´e vzory. Typick´e vyuˇzit´ı se nalezne u vinic, les˚ u, park˚ u, hˇrbitov˚ u atd. V hlaviˇcce SVG dokumentu je definov´an symbol a u elementu polygon odkaz. 1. <symbol id="zatravneni" overflow="visible" > <path fill="darkgreen" d="..."/> <symbol/> 2. <polygon stroke="darkgreen" fill="url(#zatravneni)"/>
5.4.3
Vizualizace bodov´ ych prvk˚ u
Definov´an´ı a opˇetovn´e pouˇzit´ı symbol˚ u je SVG jednoduch´e. Staˇc´ı v ˇc´asti defs pod elementem symbol zapsat k´od bodov´e znaˇcky a n´aslednˇe v dokumentu pouˇz´ıt element use s udan´ymi souˇradnicemi. Cel´y k´od je naps´an v ˇc´asti popisu SVG element˚ u viz. 3.3.1. Na znaˇcky symbol˚ u lze aplikovat vˇsechny vykreslovac´ı moˇznosti SVG. Symboly by ale mˇely b´yt jednoduch´e, aby nebyla ohroˇzena jejich ˇcitelnost. Uk´azka nˇekter´ych autorsk´ych SVG symbol˚ u je na obr. ˇc. 5.3.
Filip Zavadil
13. kvˇetna 2011
Kapitola 5. Aplikace do praxe
ATM
52
€
Obr´azek 5.3: Uk´azka nˇekter´ych symbol˚ u vytvoˇren´ych v SVG
5.5
SVG v HTML
Uˇz bylo zm´ınˇeno, ˇze SVG form´at je urˇcen´y pro internet. Existuje v´ıce zp˚ usob˚ u zaˇclenˇen´ı SVG dokumentu do webov´e str´anky: • embed - tento element nen´ı definov´an ve specifikaci HTML, proto jeho pouˇzit´ı nen´ı doporuˇcov´ano • iframe - vkl´ad´an´ı interaktivn´ıho obsahu do r´amu iframe nen´ı tak´e doporuˇcovanou formou (probl´emy s kompatibilitou) • object - pouˇz´ıvan´y a v t´eto dobˇe doporuˇcovan´y zp˚ usob, pˇr´ıklad pouˇzit´ı:
• svg:namespace - v nov´e specifikaci jazyka HTML 5 se poˇc´ıt´a se z´apisem SVG vyuˇzit´ım jmenn´eho prostoru svg
5.6
JavaScript
Aby aplikace byla dynamick´a, je tˇreba vyuˇz´ıt i programovac´ı jazyk JavaScript. Ovl´adac´ı prvky mapy (pˇribliˇzov´an´ı a posun) vyuˇz´ıvaj´ı knihovnu svgpan8 od autora Andrea Leofreddi. Projekt je vystavov´an pod BSD licenc´ı9 . D´ale se v aplikaci vyskytuj´ı autorsk´e funkce, kter´e pomoc´ı Javascript DOM technologie zajiˇst’uj´ı pˇrep´ın´an´ı viditelnosti vrstev, doplˇ nov´an´ı atribut˚ u do tabulek a zmˇenu naˇcten´eho CSS souboru. Pˇr´ıklad funkce zprostˇredkuj´ıc´ı z´apis do atributov´ych tabulek je uveden na obr´azku ˇc. 5.4.
function setTable(evt) { svgDocument = evt.target.ownerDocument; var target = evt.target; if (target.getAttribute("Y")>10) { e1=svgDocument.getElementById("region"); e1.textContent=target.getAttribute("nk"); }
definice funkce setTable(evt) uložení instance dokuemntu do proměnné svgDocument uložení instance události do porměnné target funkce getAttribute() vrátí hodnotu atributu funkce getElementByID()vrátí uzel e1 s hodnotou id=”region” funkce zapíše do elementu e1 hodnotu z příslušného atributu nk
Obr´azek 5.4: Uk´azka autorsk´e funkce v jazyce Javascript
http://svg.filipzava.cz/
xml_svg/
europe/
cz/
web/
html soubory
Dejvice/
europe.xml
CZECHrelief.png
DejviceBackgorund.xml
eurinfo.xml
orp.xml
ortofoto.jpg
euroGDP.xml
waterWays.xml
ortofotoHistorical.jpg
style.xsl
waterArea.xml
DejvicePolygon.xml
roads.xml
DejviceLines.xml
railways.xml
DejvicePoints.xml
region.xml
Dejvice.xsl
places.xml
switchCSS.js
Pelhrimov/ Pelhrimov.svg
volby.xml CZstyle.xsl
Obr´azek 5.5: Struktura adres´aˇr˚ u na dom´enˇe http://svg.filipzava.cz
Filip Zavadil
13. kvˇetna 2011
Kapitola 6. Z´ avˇer
54
Kapitola 6 Z´ avˇ er Form´at SVG se stal doporuˇcen´ım W3C uˇz v roce 2001, za tu dobu se postupnˇe zav´adˇela jeho podpora v internetov´ych prohl´ıˇzeˇc´ıch. Ale teprve v dobˇe psan´ı t´eto pr´ace zavedl nativn´ı podporu svˇetovˇe nejpouˇz´ıvanˇejˇs´ı prohl´ıˇzeˇc MS Internet Explorer ve verzi 9. Pouˇz´ıv´an´ı SVG na sv´ych str´ank´ach doporuˇcuje i wikipedia.org, kde jsou zat´ım pˇrev´adˇeny do png form´atu s odkazem k SVG obr´azku. Tak´e server Google Maps umoˇzn ˇ uje pouˇzit´ı SVG vrstvy nad mapou. Tyto a mnoho dalˇs´ıch skuteˇcnost´ı pˇrisp´ıvaj´ı ke st´ale vˇetˇs´ı oblibˇe tohoto form´atu. Programy jako OCAD nebo ArcMap jsou dnes schopny ukl´adat mapy ˇci pl´any do r˚ uzn´ych verz´ı form´atu SVG. Vhodn´e je tak´e postupn´e nahrazov´an´ı propriet´arn´ıho flash obsahu form´atem SVG. Co se t´yk´a kartografick´ych prac´ı, mohu ˇr´ıci, ˇze form´at SVG by mohl b´yt nositelem dat, ovˇsem na trhu neexistuje propracovanˇejˇs´ı n´astroj na z´akres SVG map. Jeho v´yhoda oproti ostatn´ım je zˇrejm´a zejm´ena pˇri pouˇzit´ı na internetu. Tam se ovˇsem tak´e skr´yv´a jedna slabina SVG. T´ım, ˇze je to form´at otevˇren´y, nask´yt´a pro ostatn´ı moˇznost st´ahnout mapu z internetu ve vektorov´e podobˇe a vykr´ast“ obsah. Dalˇs´ı nev´yhodou je datov´a veli” kost SVG dokumentu. To je zp˚ usobeno textov´ym form´atem. Soubor lze ale zkomprimovat ZIP kompres´ı a vytvoˇrit tak bin´arn´ı soubor s koncovkou .svgz. V´ysledky pozn´av´an´ı SVG form´atu jsou zpracov´any v internetov´e aplikaci na adrese http://svg.filipzava.cz zobrazuj´ıc´ı mapy velk´ych mˇeˇr´ıtek (Evropa) , stˇredn´ıch ˇ a republika) a mal´ych (pl´an mˇesta Pelhˇrimov, pl´an kampusu CVUT ˇ mˇeˇr´ıtek (Cesk´ v Dejvic´ıch). K v´ysledn´emu efektu musely b´yt pouˇzity dalˇs´ı technologie, kromˇe SVG tak´e JavaScript(zmˇena zoom, posouv´an´ı a tisk atributov´ych tabulek), XSL a CSS (stylov´e jazyky). Vˇetˇs´ı rozd´ıly ani probl´emy s kompatibilitou v r˚ uzn´ych prohl´ıˇzeˇc´ıch nebyly pˇri vykreslov´an´ı SVG grafiky pozorov´any (pˇri pouˇzit´ı aktu´aln´ıch verz´ı).
Filip Zavadil
13. kvˇetna 2011
Literatura
55
Literatura [Eis02] J. David Eisenberg. SVG Essentials. O´Reilly Media, 2002. [Her10] Pavel Herout. XSLT 2.0 a SVG prakticky. Kopp, 2010. [Kos00] Jiˇr´ı Kosek. XML pro kaˇzd´eho, podrobn´y pr˚ uvodce. Grada Publishing, 2000. [Sho00] William Shoaff. A Short History of Computer Graphics. http://www.cs.fit.edu/~ wds/classes/graphics/History/history, June 2000. [Tiˇs07] Pavel Tiˇsnovsk´y. Vektorov´e grafick´e form´aty a metaform´aty. http://www.root.cz/clanky/vektorove-graficke-formaty-a-metaformaty/, March 2007. [Wil09] Ian Williams. Beginning XSLT and Xpath. Wrox, 2009.
