filip-zavadil-bp-2011

ˇCeské vysoké uˇcen´ı technické v Praze
Fakulta stavebn´ı
SVG a XSL transformace vyuˇzitelné
v kartografii
BAKALÁˇRSKÁ PRÁCE
Praha, 2011 Autor: Filip Zavadil

ˇCeské vysoké uˇcen´ı technické v Praze
Fakulta stavebn´ı
BAKALÁˇRSKÁ PRÁCE
v kartografii
SVG and XSL transformations used
in cartography
Vedouc´ı práce: Ing. Jiˇr´ı Cajthaml, Ph.D.
Praha, 2011 Autor: Filip Zavadil
i

CESKE VYSOKE UCENi TECHNICKE vPRAZE
Fakulta stavebni
Thakurova 7, 166 29 Praha 6
, 'V ,
ZADANI BAKALARSKE PRAcE
studijni program:Q~<?~~:z:i~~~~~<?g~~f.i.~
studijni obor: Geoinformatika
akademicky rok: 2010/2011
Jmeno a pfijmeni studenta: Zavadil....C.m.....£ ....m.....:...:..c :.~.cc............................ _ ..........................................................................................................................................................................................................................................................
Zadavajici katedra:
Nazev bakalarske prace:
Nazev 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: ~<?pi.~!~:z:~~I~~t.:1.ip~it.:1.~i.pyp'?~it.~~<?y~~~f.i.~y~~~~j~j~_'? __ _
yYy<?j~:~~!!l~!!~~~t.:1.~~~<?y~~t.:1.LY~~<?E<?Y~~E~~t.~'?y~f'?~y:P~!~~~~~!!l~!!~t.:1.a.:j~!:<.?fM!:~j~~<?
....p<?~P~.I??:~...t.~~~~<?!<?gi.~:....~!~~~j.t.:1.~~~~.~..P~~~.~....~~~.~..y~~<?y~a.:P<?Pi.~~..j~~a.:5y'Q.~..~.~!:..~~~f'?~~~!!!l~ ..
_ !:<.!~~~j~<?~~~i!~It.:1.~y.~~'?g~~~i.:y~~~<?~~!!l~~!~jt.~y~<?~~y!!lLpf..!~!~~Y:
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~;;.:,~········ ···············~~d~~~i·~······
Zadani bakalarske prace prevzal dne: ---.-~~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 odesIe katedra 1 kopii zadani BP na studijni oddeleni
a provede 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áˇsen´ı
Prohlaˇsuji, ˇze jsem svou bakaláˇrskou práci na téma
”
v kartografii“ vypracoval samostatnˇe a pouˇzil jsem pouze podklady uvedené v pˇriloˇzeném
seznamu.
V Praze dne
podpis

Abstrakt
V této práci se pojednává o základech zobrazován´ı poˇc´ıtaˇcové grafiky. Jsou zde
shrnuty základn´ı vlastnosti rastrové a vektorové reprezentace obrazových dat. Dále se
práce podrobnˇe vˇenuje ˇskálovatelnému vektorovému grafickému formátu SVG. Jsou zde
popsány základn´ı prvky a vlastnosti tvoˇr´ıc´ı SVG dokument. Dále je pojednáno o
”
sty-
lových“ jazyc´ıch (CSS, XSL), které je vhodné spolu s SVG vyuˇz´ıvat.
Praktická ukázka je celistvým spojen´ım poznatk˚u o SVG. Je zde demonstrováno
pouˇzit´ı rozliˇsných prvk˚u tohoto jazyka, který je v této práci konfrontován s kartografi´ı.
Kl´ıˇcová 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.
Key Words
graphics, vector, raster, SVG, XML, CSS, XSL, XPath, JavaScript

Obsah
1 Úvod 1
2 Vývoj pˇred SVG 3
2.1 Poˇc´ıtaˇcová grafika obecnˇe . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.1 Geometrické základy . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1.2 Vývoj technologi´ı . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Vektorová a rastrová grafika . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.1 Vektorová reprezentace . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.2 Rastrová reprezentace . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2.3 Výhody a nevýhody . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Vznik a vývoj grafických formát˚u . . . . . . . . . . . . . . . . . . . . . . . 5
2.3.1 Formáty vektorové grafiky . . . . . . . . . . . . . . . . . . . . . . . 6
2.3.2 Formáty rastrové grafiky . . . . . . . . . . . . . . . . . . . . . . . 7
2.4 Úvod do XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4.1 Syntaxe XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4.2 XML dialekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.3 XML pˇridruˇzené technologie . . . . . . . . . . . . . . . . . . . . . . 11
3 Formát SVG 12
3.1 Verze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Kompatibilita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3 Hlaviˇcka SVG dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3.1 Element defs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.3.2 Barevné pˇrechody . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.4 SVG elementy základn´ıch geometrických prvk˚u . . . . . . . . . . . . . . . 16
3.4.1 Element line (úseˇcka) . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4.2 Element rectangle (obdéln´ık) . . . . . . . . . . . . . . . . . . . . . 17
3.4.3 Element circle (kruˇznice) . . . . . . . . . . . . . . . . . . . . . . . 17
3.4.4 Element ellipse (elipsa) . . . . . . . . . . . . . . . . . . . . . . . 17
3.4.5 Element polyline (lomená ˇcára) . . . . . . . . . . . . . . . . . . . 18
3.4.6 Element polygon (mnohoúheln´ık) . . . . . . . . . . . . . . . . . . . 18
3.5 Element path (kˇrivka) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.6 Textové ˇretˇezce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.6.1 Element text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.6.2 Element tspan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.6.3 Element textPath . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.7 Instrukce pro vykreslován´ı . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
iii

3.7.1 Vlastnosti atributu stroke . . . . . . . . . . . . . . . . . . . . . . . 22
3.7.2 Vlastnosti atributu fill . . . . . . . . . . . . . . . . . . . . . . . . 24
3.7.3 Atributy opacity,display,visibility . . . . . . . . . . . . . . . 24
3.7.4 Barevné modely . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.8 Souˇradnicový systém a jeho transformace . . . . . . . . . . . . . . . . . . . 26
3.8.1 Atribut transform . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.9 Rastr v SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.9.1 Element image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.9.2 Element filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.10 Atributová data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.11 Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4 Stylové jazyky 33
4.1 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.2 XSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
4.2.1 Hlaviˇcka XSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2.2 Element xsl:value-of . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.3 XPath výrazy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.2.4 Podm´ıneˇcné zpracován´ı . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.2.5 Cykly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.2.6 Promˇenné . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.2.7 Dalˇs´ı pouˇzité prvky . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5 Aplikace do praxe 41
5.1 Zdroj dat a zp˚usob exportu do XML/SVG . . . . . . . . . . . . . . . . . . . 41
5.1.1 Program shp2svg . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.2 Popis aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.2.1 XML datová ˇcást . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.2.2 Stylová ˇcást . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.3 Popis jednotlivých aplikac´ı . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.3.1 Evropa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.3.2 ˇCeská republika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5.3.3 Plán kampusu ˇCVUT v Dejvic´ıch . . . . . . . . . . . . . . . . . . . 47
5.3.4 Plán mˇesta Pelhˇrimov . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4 Kartografické prvky v SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4.1 Vizualizace liniových znaˇcek . . . . . . . . . . . . . . . . . . . . . . 48
5.4.2 Vizualizace areálových znaˇcek . . . . . . . . . . . . . . . . . . . . . 51
5.4.3 Vizualizace bodových prvk˚u . . . . . . . . . . . . . . . . . . . . . . 51
5.5 SVG v HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.6 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
6 Závˇer 54
Literatura 55
Rejstˇr´ık 56
A Evropa I
iv

B ˇCeská republika II
C Plán kampusu ˇCVUT Praha III
D Plán mˇesta Pelhˇrimov IV
v

Seznam obrázk˚u
2.1 ˇCasová osa vybraných kl´ıˇcových moment˚u . . . . . . . . . . . . . . . . . . 4
2.2 Popis bézierovy kˇrivky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Znázornˇen´ı odliˇsného zp˚usobu záznamu obrazových informac´ı . . . . . . . . 5
2.4 Ikony vybraných grafických formát˚u a editor˚u . . . . . . . . . . . . . . . . 8
2.5 Ukázka struktury dokumentu IBM GML . . . . . . . . . . . . . . . . . . . 8
2.6 Popis nejjednoduˇsˇs´ıho XML dokumentu . . . . . . . . . . . . . . . . . . . 9
2.7 XML dokument popisuj´ıc´ı geobod . . . . . . . . . . . . . . . . . . . . . . . 10
2.8 Stromová struktura XML elementu . . . . . . . . . . . . . . . . . . . . . . 10
3.1 Nˇekterá z oficiáln´ıch log formátu SVG . . . . . . . . . . . . . . . . . . . . 12
3.2 Pod´ıl pouˇz´ıvaných internetových prohl´ıˇzeˇc˚u ve svˇetˇe v lednu 2011 . . . . . 13
3.3 Element path a pˇr´ıkazy M, L pro vykreslován´ı úseˇcek . . . . . . . . . . . . 18
3.4 Element path a pˇr´ıkazy H, V pro vodorovné a svislé úseˇcky . . . . . . . . . 19
3.5 Element path a pˇr´ıkazy C,S pro kubickou Bézierovu kˇrivku . . . . . . . . . 19
3.6 Element path a pˇr´ıkaz arc pro eliptickou výseˇc . . . . . . . . . . . . . . . 20
3.7 Pˇrehled základn´ıch atribut˚u pro práci s textem . . . . . . . . . . . . . . . . 21
3.8 Pˇrehled souˇradnicového systému a délkových jednotek . . . . . . . . . . . . 26
3.9 Ukázka pouˇzit´ı rastrových obrazových dat . . . . . . . . . . . . . . . . . . 28
3.10 Praktické vyuˇzit´ı filtr˚u pro symbol informaˇcn´ıch center . . . . . . . . . . . 31
4.1 Princip XSL transformac´ı . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.2 Pˇrehled vstupn´ıch a výstupn´ıch souboru XSL transformac´ı . . . . . . . . . 36
5.1 Kartogram Evropa, HDP na obyvatele . . . . . . . . . . . . . . . . . . . . 45
5.2 Ukázka kartografických prvk˚u na mapˇe ˇCR . . . . . . . . . . . . . . . . . . 47
5.3 Ukázka nˇekterých symbol˚u vytvoˇrených v SVG . . . . . . . . . . . . . . . 52
5.4 Ukázka autorské funkce v jazyce Javascript . . . . . . . . . . . . . . . . . . 53
5.5 Struktura adresáˇr˚u na doménˇe http://svg.filipzava.cz . . . . . . . . . 53
vi

Kapitola 1. Úvod 1
Kapitola 1
Úvod
V dneˇsn´ı dobˇe se drtivá vˇetˇsina kartografických prac´ı provád´ı v digitáln´ı formˇe na
poˇc´ıtaˇc´ıch a tato skuteˇcnost s sebou nese problém, jak grafická data ukládat. Rastrový
model jako nosiˇc nen´ı vhodný, jelikoˇz nezachovává geometrické vyjádˇren´ı objekt˚u. Proto
je vyuˇz´ıván vektorový formát, kterých je dnes velké mnoˇzstv´ı. Vˇetˇsina vektorových gra-
fických a kartografických editor˚u vyuˇz´ıvá vlastn´ı formát, který je v´ıce ˇci ménˇe otevˇrený.
Tato práce popisuje nejznámˇejˇs´ı a nejpouˇz´ıvanˇejˇs´ı rastrové i vektorové formáty s detailn´ım
zamˇeˇren´ım na formát SVG (Scalable Vector Graphics). Hlavn´ım d˚uvodem pro výbˇer
SVG je jeho otevˇrenost a tedy nezávislost na proprietárn´ıch aplikac´ıch nebo platformách.
Mezi dalˇs´ı klady SVG patˇr´ı jeho jednoznaˇcná kompatibilita s internetovým prostˇred´ım,
zp˚usobená pouˇzit´ım stejných technologi´ı. V pr˚ubˇehu práce, kdy jsou popisovány jednotlivé
prvky SVG jazyka, je uvádˇen jejich vztah a pˇr´ıpadné vyuˇzit´ı pro kartografické úˇcely.
Jak jiˇz bylo ˇreˇceno v úvodn´ı kapitole, práce se zabývá obecnou problematikou
poˇc´ıtaˇcové grafiky. Jsou zde také uvedeny hlavn´ı softwarové firmy a jejich vliv na vývoj
grafických formát˚u. Jelikoˇz formát SVG je dialektem znaˇckovac´ıho jazyka XML, je v práci
uveden také úvod do XML popisuj´ıc´ı jeho vývoj, základn´ı charakteristiky a zp˚usoby
pouˇzit´ı. D˚uleˇzité je také seznámen´ı s ˇcasto vyuˇz´ıvanými pojmy.
Druhá kapitola je vˇenována jazyku SVG. Popis je doprovázen autorskými názornými
obrázky s uvedeným zdrojovým kódem a vizualizac´ı. Krátce je zm´ınˇeno o vývojových
verz´ıch a jejich kompatibilitˇe s dneˇsn´ımi internetovými prohl´ıˇzeˇci. Následuje popis vˇsech
geometrických prvk˚u, jejich zp˚usobu zápisu a základn´ıch vlastnost´ı. Vˇzdy je u kaˇzdého
uveden také význam pro kartografické úˇcely. D˚uleˇzitou souˇcást´ı je styl vykreslován´ı prvk˚u
(barva a tlouˇst’ka tahu, styl výplnˇe atd.). Neopom´ıjeným prvkem je zápis textového ˇretˇezce
a nastaven´ı jeho vlastnost´ı. I kdyˇz je SVG vektorový formát je schopen ukládat rastrová
data a provádˇet s nimi r˚uzné efekty pomoc´ı definovaných filtr˚u. D´ıky XML základ˚um je
zde nab´ıdnuta moˇznost ukládat i jiné neˇz obrazové informace. Tato skuteˇcnost nahrává
pouˇzit´ı SVG jako jednoduchý GIS formát. Moˇzný je také zápis metadat.
Pro urˇcen´ı zp˚usobu vykreslen´ı je vhodné pouˇz´ıt takzvané stylové soubory. Jedná se
o dokumenty, kde jsou nastaveny pravidla zobrazen´ı SVG geometrických prvk˚u. Mezi dva
nejvyuˇz´ıvanˇejˇs´ı patˇr´ı CSS a XSL, kdy kaˇzdý se hod´ı k trochu jinému úˇcelu. V práci jsou
uvedeny základy tˇechto stylových jazyk˚u, doplnˇené o pˇr´ıklady pouˇzit´ı.
Filip Zavadil 13. kvˇetna 2011

Kapitola 1. Úvod 2
Nejlepˇs´ı cestou jak porozumˇet dané problematice je praktické vytvoˇren´ı SVG apli-
kace. Protoˇze je SVG navrˇzeno pro web, m˚uˇze být aplikace interaktivn´ı. Pouˇzit´ım dalˇs´ıch
technologi´ı (JavaScript) je dodána i dynamiˇcnost. V posledn´ı kapitole jsou mimo jiné
uvedeny zp˚usoby z´ıskán´ı ˇci exportu dat do SVG formátu.
Jednotlivé poznatky zjiˇstˇené v pr˚ubˇehu práce a celkové shrnut´ı je uvedeno na sa-
motný závˇer práce.

Kapitola 2. Vývoj pˇred SVG 3
Kapitola 2
Vývoj pˇred SVG
2.1 Poˇc´ıtaˇcová grafika obecnˇe
2.1.1 Geometrické základy
Geometrické základy uˇz´ıvané poˇc´ıtaˇcovým zpracován´ım grafických dat se datuj´ı uˇz
300-250 pˇr.n.l., kdy se jim vˇenoval ˇrecký matematik a geometr Euklides ve svých spisech.
Filippo Brunelleschi (1377-1446) objevil lineárn´ı perspektivu, tedy prvn´ı vizualizaci 3D
prostoru. René Descartes (1596-1650) je jeden ze zakladatel˚u analytické geometrie, za-
vedl také kartézský systém souˇradnic a t´ım základy pro popis objekt˚u v 2D prostoru.
James Joseph Sylvester (1814-1897) popsal maticovou notaci, vyuˇz´ıvanou v informatice
pro geometrické transformace. Pierre Bézier zavedl popis bézierovy kˇrivky vyuˇz´ıvaný ve
vektorových grafických formátech.
2.1.2 Vývoj technologi´ı
Od doby, kdy se zaˇcaly výpoˇcetn´ı technologie rozˇsiˇrovat, zaznamenala oblast poˇc´ı-
taˇcového zpracován´ı grafických dat velký pokrok. V roce 1897 byla nˇemeckým fyzikem
Karlem Ferdinandem vynalezena katodová trubice, která dala vznik televiz´ım a CRT
monitor˚um. Tato skuteˇcnost spolu s vynálezem tranzistoru v roce 1947 v Bellových labo-
ratoˇr´ıch dala základ pro rozvoj poˇc´ıtaˇcové grafiky. Mezi dalˇs´ı významné miln´ıky patˇr´ı
zaveden´ı pojmu poˇc´ıtaˇcová grafika (William Fetter, 1964). O rok pozdˇeji pˇricház´ı na
svˇet tzv. Bresenham˚uv algoritmus, který popisuje vykreslován´ı ˇcar do rastrového pole
(pouˇzit´ı v nynˇejˇs´ıch rastrových monitorech) [Sho00]. Firma Apple Computer v roce 1977
pˇredstavuje prvn´ı barevný grafický mikropoˇc´ıtaˇc Apple II. V 80. letech se pˇredstavuje
ˇrada poˇc´ıtaˇc˚u Apple Macintosh s grafickým uˇzivatelským rozhran´ım (GUI) a poˇc´ıtaˇcovou
myˇs´ı. Od 90. let, kdy pˇricház´ı Bill Gates s operaˇcn´ım systémem Windows 3.0, se osobn´ı
poˇc´ıtaˇce masivnˇe rozˇsiˇruj´ı do pracoviˇst’ a domácnost´ı.
Dalˇs´ım mezn´ıkem pro poˇc´ıtaˇcovou grafiku byl vývoj internetu. V roce 1969 byla
sestavena prvn´ı experimentáln´ı s´ıt’ ARPANET a o ˇctyˇri roky pozdˇeji vyvstaly úvahy
vedouc´ı k nynˇejˇs´ımu protokolu TCP/IP. V roce 1987 je do s´ıtˇe pˇripojeno 27 000 stanic a
vzniká pojem internet. Roku 1992 je oficiálnˇe pˇripojena ˇCeská republika a ˇCVUT v Praze.
Zhruba o 2 roky pozdˇeji se internet komercializuje a t´ım docház´ı k masovému nár˚ustu

uˇzivatel˚u. Po roce 2005 je zaznamenána miliarda uˇzivatel˚u. Stále v´ıce se prosazuje on-line
obsah i v oblasti kartografie. Vznikaj´ı nové grafické formáty zamˇeˇrené pˇr´ımo pro internet.
geometrické
základy
(Euklides)
první použití
perspektivního
zobrazení
(Fillipo Brunelleschi)
počátky analytické
geometrie
(René Descartes)
3.st.př.n.l.
15.století
17.století
18.století
19.století
20.století
21.století
vynález tranzistoru
vynález katodové
trubice
(Karl Ferdinand)
bézierova křivka
(Pierre Bézier)
maticový zápis
(James J. Sylvester)
počátek děrných štítků
(Bouchon, Falcon, Jacquard)
6.st.př.n.l.
Pythagorova věta
(Pythagoras)
první verze SVG
matematické základy
vývoj software & hardware
Obrázek 2.1: ˇCasová osa vybraných kl´ıˇcových moment˚u
2.2 Vektorová a rastrová grafika
2.2.1 Vektorová reprezentace
Vektorová grafika má základy v analytické geometrii. Ukládaj´ı se parametry geo-
metrických tˇeles, jejich poloha, popˇr. výplˇn. Francouzský matematik a konstruktér Pierre
Bézier popsal kˇrivku pomoc´ı ˇctyˇr bod˚u. Jedná se o krajn´ı body a tzv. body kotevn´ı
a kontroln´ı viz. obr.ˇc. 2.2. Krajn´ımi a kotevn´ımi body kˇrivka procház´ı a pomoc´ı kont-
roln´ıch bod˚u (teˇcny kˇrivky) lze urˇcovat jej´ı zakˇriven´ı. Skládán´ım tˇechto kˇrivek lze popsat
libovolný zakˇrivený tvar. Sloˇzitˇejˇs´ı výkres je sloˇzen z primitivn´ıch tvar˚u tzv. objekt˚u.
Napˇr´ıklad jednoduchá kresba snˇehuláka je popsána pomoc´ı tˇr´ı kruˇznic, kde jsou uloˇzeny
jen hodnoty polomˇeru a souˇradnice stˇred˚u kruˇznic. Je zjevné, ˇze takto popsaná kresba
nebude nároˇcná na pamˇet’ poˇc´ıtaˇce a datová velikost souboru bude minimáln´ı. Jelikoˇz jsou
data popsána matematicky, nedocház´ı pˇri zvˇetˇsen´ı výkresu k poklesu kvality. Protoˇze se
jednotlivé kresby ukládaj´ı jako objekty (bod, úseˇcka, polygon, kˇrivka atd.), mohou se
jednoduˇse provádˇ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á k uloˇzen´ı dat ménˇe tvarovˇe
rozmanitých. Vyuˇz´ıvá se pˇri tvorbˇe firemn´ıch log, schématických obrázk˚u a diagram˚u,
technických výkres˚u (CAD) a animac´ı. D´ıky své malé datovˇe objemové nároˇcnosti je
vektorová grafika vhodná pro internet, kde se stále v´ıce prosazuje.
koncový bod
počáteční bod
kotevní body
kontrolní body
Obrázek 2.2: Popis bézierovy kˇrivky

2.2.2 Rastrová reprezentace
Rastrový (ˇcasto téˇz bitmapový) zp˚usob popisu obrazových informac´ı ukládá infor-
mace o jednotlivých prvc´ıch um´ıstˇených na mˇr´ıˇzce. Mˇr´ıˇzka (rastr) m˚uˇze být sloˇzena
z r˚uzných tvar˚u (trojúheln´ık, obdéln´ık, ˇsestiúheln´ık), avˇsak nejˇcastˇeji je tvoˇrena ˇctverci
tzv. pixely. Kaˇzdý prvek mˇr´ıˇzky nese urˇcitou hodnotu (nejˇcastˇeji se jedná o hodnotu
barvy). Pamˇet’ová zátˇeˇz bude logicky silnˇe závislá na rozmˇeru výsledného obrázku. Rastrový
popis výˇse uvedené kresby snˇehuláka bude tedy nároˇcnˇejˇs´ı. Kruˇznice bude reprezentována
vyplnˇenými pixely a jejich poˇcet bude záleˇzet na obrazovém rozliˇsen´ı. Aby se kruˇznice
jevila realisticky a nebyla
”
kostrbatá“, je nutné volit vˇetˇs´ı rozliˇsen´ı, ˇc´ımˇz ale dojde i
ke zvˇetˇsen´ı datové velikosti souboru na pamˇet’ovém médiu. Fotografie jsou typickým
pˇredstavitelem rastrové grafiky, protoˇze obsahuj´ı velký poˇcet rozmanitých a tud´ıˇz tˇeˇzko
matematicky popsatelných tvar˚u. V tomto pˇr´ıpadˇe je vektorový model nevhodný. Také
metoda sbˇeru dat (osv´ıcen´ı CMOS ˇcipu fotoaparátu) zaznamenává skuteˇcnost do mˇr´ıˇzky
a nepopisuje ji matematicky. Nad bitmapovými obrázky lze s výhodou aplikovat spoustu
filtr˚u a efekt˚u.
2.2.3 Výhody a nevýhody
Nelze obecnˇe ˇr´ıci, jaký zp˚usob je výhodnˇejˇs´ı. Vˇzdy záleˇz´ı na rozsahu a rozmani-
tosti kresby, zadanému úˇcelu a zp˚usobu sbˇeru dat. Pro znázornˇen´ı technických výkres˚u je
vhodný vektorový model. Pro výkresy, které se maj´ı bl´ıˇzit realitˇe je zase vhodnˇejˇs´ı rastrový
model. S nadsázkou si lze pˇrestavit, ˇze Pablo Picasso by pro své kubistické malby zvolil
vektorový formát a Claude Monet v obdob´ı impresionismu by pouˇzil vhodnˇejˇs´ı rastrový
formát. V oboru geodézie a kartografie jsou vyuˇz´ıvány oba typy dat. Napˇr. produktem fo-
togrammetrie a dálkového pr˚uzkumu Zemˇe je rastrový obsah. Naopak grafické zpracován´ı
geodetického mˇeˇren´ı je vektorový výkres. Vizuáln´ı rozd´ıly obou zp˚usob˚u jsou zobrazeny
na obr. 2.3
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
S(x,y)
r
Obrázek 2.3: Znázornˇen´ı odliˇsného zp˚usobu záznamu obrazových informac´ı
2.3 Vznik a vývoj grafických formát˚u
Informace jsou na pamˇet’ových medi´ıch ukládána v bitech a tvoˇr´ı posloupnost jedniˇcek
a nul. Formát souboru sdˇeluje procesoru, jak danou posloupnost rozkódovat (ˇcten´ı) nebo
zakódovat (zápis). Pro reprezentaci grafických dat bylo vytvoˇreno mnoho formát˚u pro
vektorová i rastrová data.

2.3.1 Formáty vektorové grafiky
Kaˇzdý významnˇejˇs´ı výrobce softwaru pro zpracován´ı vektorové grafiky si vytváˇr´ı
vlastn´ı výmˇenný formát, který pr˚ubˇeˇznˇe inovuje a doplˇnuje. Vznikaj´ı tak problémy se
zpˇetnou kompatibilitou a nezˇr´ıdka je tato skuteˇcnost ˇreˇsena vydán´ım nového formátu.
Ménˇe ˇcastým jevem je vzájemná kompatibilita mezi aplikacemi. Hlavnˇe tv˚urci pro-
prietárn´ıho softwaru vyv´ıjej´ı a bedlivˇe si stˇreˇz´ı vlastn´ı uzavˇrený formát (tato práce po-
jednává o otevˇreném formátu). Vektorové grafické formáty lze dle [Tiˇs07] rozdˇelit na tyto
skupiny:
Významnˇejˇs´ı souborové formáty urˇcené pro 2D grafiku a CAD
• CDR je sloˇzitˇejˇs´ı proprietárn´ı formát vyv´ıjený spoleˇcnost´ı Corel Corporation, je
vyuˇz´ıvaný v softwaru CorelDRAW. Mezi jeho odvozeniny patˇr´ı: CDX, CDT, CMX.
Formát podporuje v´ıcestránkový dokument.
• AI nativn´ı formát aplikace Adobe Illustrator je velmi podobný formátu PDF. Pod-
poruje vrstvy, ale nepodporuje v´ıcestránkový dokument ani animace.
• DXF (Drawing eXchange Format) je textový formát vyvinutý spoleˇcnost´ı Auto-
Desk. Tento formát podporuje vˇetˇsina CAD systém˚u. Jeho binárn´ı podoba má
pˇr´ıponu DXB.
• DWG (DraWinG) je dalˇs´ım CAD/CAM formátem spoleˇcnosti AutoDesk. Umoˇzˇnuje
ukládat 2D i 3D data.
• DGN (DesiGN) je nativn´ı formát CAD programu MicroStation od Bentley Systems.
• SHP (SHaPefile) je p˚uvodn´ı binárn´ı formát softwaru ESRI ArcMap. Popisuje geo-
metrické prvky (point, line, polygon) a se soubory typu SHX a DBF tvoˇr´ı geoda-
tabázi. Jedná se o nejrozˇs´ıˇrenˇejˇs´ı formát pro GIS aplikace.
• OCD je intern´ı formát kartografického softwaru OCAD.
Formáty urˇcené pro tisk a metaformáty
• PS (PostScript) je jeden z výmˇenných tiskových formát˚u vyvinutý spoleˇcnost´ı Adobe
Systems (1985). Jde o popis dokumentu pomoc´ı programovac´ıho jazyka.
• EPS (Encapsulated PostScript) je odvozenina PS formátu urˇcená pro popis obrázku.
• PDF (Portable Document Format), navrˇzený spoleˇcnost´ı Adobe je na platformˇe
nezávislý výmˇenný formát zaloˇzený na jazyce PostScript a v souˇcasné dobˇe velmi
rozˇs´ıˇren. Formát je schopen nést i rastrová obrazová data a metadata aplikac´ı,
ve kterých byl vytvoˇren. Zejména produkty firmy Adobe jsou schopné si v tomto
formátu uchovat i nastaven´ı, vrstvy nebo objekty vyuˇzitelné pro pozdˇejˇs´ı editaci.
• WMF, EMF (Windows MetaFile, Enhanced Windows MetaFile) je vyv´ıjený spoleˇc-
nost´ı Microsoft pro operaˇcn´ı systém MS Windows. Ukládá geometrické objekty i
vybrané pˇr´ıkazy.

• SWF (Shockwave Flash) je proprietárn´ı multimediáln´ı formát obsahuj´ıc´ı nejen vek-
torové prvky. Byl vyv´ıjen spoleˇcnost´ı Macromedia (nyn´ı Adobe Labs), která také
vydává editor Adobe Flash. I pˇres svou nesvobodu je silnˇe rozˇs´ıˇren na webovém
prostˇred´ı a je konkurentem otevˇreného formátu SVG.
Grafické vektorové formáty zaloˇzené na XML technologii
• SVG (Scalable Vector Language) je pˇredmˇetem této práce. Bliˇzˇs´ı seznámen´ı od
kapitoly 3. W3C standardem se stal v roce 1999.
• VML (Vector Markup Language) je formát starˇs´ı neˇz SVG, který se ale pˇr´ıliˇs ne-
prosadil. 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ý. W3C Standardem se stal v roce 1998.
2.3.2 Formáty rastrové grafiky
Rastrové formáty se od sebe rozliˇsuj´ı pouˇzitými kompresn´ımi algoritmy (LZW,
JPEG, RLE, Huffmanovo kódován´ı).
Nejbˇeˇznˇejˇs´ı rastrové formáty
• PNG (Portable Network Graphics) je nástupce GIFu. Pouˇz´ıvá bezztrátovou kom-
presi a jeho prvn´ı verze vyˇsla v roce 1996 (Standard W3C). Jelikoˇz podporuje
transparentn´ı pozad´ı je hojnˇe pouˇz´ıvaný v internetovém prostˇred´ı.
• JPEG (Joint Photographic Experts Group) je ztrátový komprimaˇcn´ı algoritmus a
také formát souboru. Je vhodný k pouˇzit´ı u obrázk˚u, kde se nevyskytuj´ı ostré hrany
(narozd´ıl od formátu PNG). Je klasickým výstupem digitáln´ıch fotoaparát˚u.
• BMP (Microsoft Windows Bitmap), jeho prvn´ı verze byla pˇredstavena v roce 1988.
Obrázky jsou ukládány po jednotlivých pixelech a proto je souborová velikost znaˇcnˇe
vˇetˇs´ı neˇz u pˇredchoz´ıch formát˚u.
• TIFF (Tag Image File Format) pouˇz´ıvá libovolnou dostupnou kompresi a je schopen
ukládat v´ıcestránkové dokumenty. Vznikl jako vstupn´ı formát pro scannery a faxové
pˇr´ıstroje. Jeho varianta GeoTIFF umoˇzˇnuje nosit také prostorová data.
• GIF (Graphics Interchange Format) vyuˇz´ıvá bezztrátovou kompresi LZW84. Kv˚uli
tomuto komprimaˇcn´ımu algoritmu, který byl patentovˇe chránˇen, je nahrazen formátem
PNG. Je ovˇsem schopen animace, proto byl dˇr´ıve hojnˇe vyuˇz´ıván na internetu v re-
klamn´ıch bannerech.
Formáty rastrových editor˚u
• PSD je nativn´ı formát aplikace Adobe Photoshop. Je schopen ukládat metadata
jako vrstvy, kanály, cesty, nastaven´ı pr˚uhlednosti atd.
• XCF je p˚uvodn´ı formát freewarového programu GIMP (GNU Image Manipulation
Program). Uchovává podobné informace jako pˇredchoz´ı PSD.

Obrázek 2.4: Ikony vybraných grafických formát˚u a editor˚u
2.4 Úvod do XML
Pˇri vývoji výpoˇcetn´ı technologie vyvstal problém jak stroji sdˇelit význam jednot-
livých ˇcást´ı textu a jak je v textu oznaˇcovat. Za analogovou formu lze povaˇzovat ruˇcn´ı
vpisován´ı poznámek mezi autor˚uv text tˇreba pro potˇreby formátován´ı obsahu pro tisk.
Právˇe zde byl inspirován vývoj tzv. znaˇckovac´ıch jazyk˚u. Obsah dokumentu t´ım z´ıskal
hierarchickou strukturu a mohl být pouˇzit k v´ıce úˇcel˚um. Také mohl být jednoduˇseji
transformován pro jiná zaˇr´ızen´ı a stával se tedy kompatibiln´ım prostˇredkem mezi systémy.
Jelikoˇz je pˇredmˇetem této práce formát SVG, který je odvozen z jazyka XML s pevným
DTD, budou v této kapitole popsány základn´ı principy a syntaxe jazyka XML.
IBM GML lze povaˇzovat za prvn´ı znaˇckovac´ı jazyk. Vytvoˇren byl v 60-tých le-
tech minulého stolet´ı v IBM laboratoˇr´ı. Za jeho vývojem stáli pánové Charles Goldfarb,
Edward Mosher a Raymond Lorie1
. Výsledný dokument byl ASCII text s hierarchickým
popisem obsahu. Pˇr´ıklad jeho zápisu je na ukázce ˇ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ázek 2.5: Ukázka struktury dokumentu IBM GML
Dalˇs´ım produktem zaloˇzeným na GML je znaˇckovac´ı jazyk SGML (Standard
Generalized Markup Language) vyvinutý jako univerzáln´ı jazyk pro výmˇenu informac´ı
mezi poˇc´ıtaˇci, který umoˇzˇnoval 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é
závorky
”
<,>“). Poprvé byl pouˇzit DTD (Document Type Definition), kde jsou uvedeny
definice dostupných element˚u (znaˇcek). Jelikoˇz se jedná o bezkontextový jazyk2
, jednotlivé
elementy se nemohou pˇrekrývat, ale mohou se vnoˇrovat. Rozˇs´ıˇren´ı tohoto jazyka pomohlo
americké ministerstvo obrany, které poˇzadovalo od dodavatel˚u dokumentaci právˇe v tomto
formátu [Kos00]. Jazyk SGML byl pˇr´ıliˇs komplexn´ı (umoˇzˇnoval nejen definici vlastn´ıch
znaˇcek, ale i urˇcen´ı oddˇelovaˇc˚u tˇechto znaˇcek) a to ho inhibovalo v praktickém vyuˇzit´ı.
1
V souvislosti s GML je zaj´ımavá zkratka utvoˇrená z poˇcáteˇcn´ıch p´ısmen pˇr´ıjmen´ı autor˚u.
2
Formáln´ı jazyk vyuˇz´ıvaný pˇredevˇs´ım pro programován´ı. Umoˇzˇnuje sjednocen´ı, substituci, iteraci,
morfismus, ale ne pr˚unik ani rozd´ıl.

Jako jedna z nejznámˇejˇs´ıch odvozenin je znaˇckovac´ı jazyk HTML (HyperText Markup
Language) dodnes vyuˇz´ıvaný jako nositel obsahu pro webové prostˇred´ı. HTML má pevnˇe
definované DTD, které bylo s kaˇzdou novou verz´ı m´ırnˇe odliˇsné. Tato skuteˇcnost vedla
k tomu, ˇze se potenciál HTML vyˇcerpal.
XML (Extensible Markup Language) je rozˇsiˇritelný znaˇckovac´ı jazyk, který si jako
podmnoˇzina jazyka SGML zachovává definici vlastn´ıch DTD, ale oddˇelovaˇce znak˚u a
speciáln´ı znaky jsou pevnˇe urˇcené. Také 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ána jej´ı 5. revize.
Verze XML 1.1 byla pˇredstavena v roce 2006 a nyn´ı je ve druhé revizi. Obˇe verze se mezi
sebou m´ırnˇe liˇs´ı v poˇzadavc´ıch na pouˇzité znaky v názvech element˚u a atribut˚u. Verze
1.0 dovoluje pouˇzit´ı znak˚u obsaˇzených v Unicode 2.0. Formát XML by mˇel být nositelem
”
ˇcistých“ informac´ı, tedy oddˇelených od prvk˚u urˇcuj´ıc´ıch vzhled výsledného dokumentu.
K tomu úˇcelu jsou urˇceny stylové jazyky viz. kapitola 4. Asi neznámˇejˇs´ı z nich je CSS
(Cascade Style Sheet, kaskádové styly), které definuj´ı vzhled webových stránek a jsou
také vyuˇz´ıvány u formátu SVG. Dalˇs´ım, avˇsak sloˇzitˇejˇs´ım jazykem, je XSL (eXtensible
Style Language), který se vyuˇz´ıvá pˇri takzvaných XSL transformac´ıch (XSLT) pro úpravu
a transformace dokumentu. XSLT bude také pˇredmˇetem této práce v podkapitole 4.2.
Jak jiˇz bylo ˇreˇceno výˇse, formát XML striktnˇe dodrˇzuje pravidla zápisu. Pro kontrolu
slouˇz´ı program nazývaný parser . Tento program kontroluje správnost dokumentu a odhal´ı
chyby, které by mohly být pˇr´ıˇcinou problém˚u. Implicitnˇe ho obsahuj´ı dneˇsn´ı internetové
prohl´ıˇzeˇce.
2.4.1 Syntaxe XML
Pro lepˇs´ı orientaci v kódu SVG je vhodné znát XML syntaxi a pravidla jeho zápisu,
která mus´ı být narozd´ıl od HTML striktnˇe dodrˇzována. XML dokument je sestaven z ob-
jekt˚u nazývaných elementy . Element je nositelem samotné informace i jej´ıho oznaˇcen´ı.
Kaˇzdý element se skládá z tag˚u , které jsou uzavˇreny do ostrých závorek (tj. mezi znaky
‘<’ a ‘>’). Celý element se skládá z poˇcáteˇcn´ıho tagu, obsahu elementu a koncového tagu,
který je uvozen znakem ‘/’ (pro odliˇsen´ı od poˇcáteˇcn´ıho). Jednotlivé ˇcásti nejjednoduˇsˇs´ıho
XML dokumentu, který obsahuje pouze jeden element, jsou popsány na obr. 2.6. ˇCasto
< titul > SVG a jeho využití v kartografii </ titul >
XML element
obsah elementu
počáteční tag řídící znak
ukončovací znak koncového tagu
název tagu
Obrázek 2.6: Popis nejjednoduˇsˇs´ıho XML dokumentu
nastane situace, kdy element nenese ˇzádný obsah, ale jeho výskyt m˚uˇze m´ıt vliv tˇreba na
formátován´ı. Zp˚usoby, jak takový element napsat jsou tyto:
<titul> </titul> - prosté vynechán´ı obsahu je v souladu s pravidly
<br/> - pouˇz´ıvá se v XHTML pro ukonˇcen´ı ˇrádky (break line)

<text kodovani="utf-8"/> - prázdný element, obsahuj´ıc´ı pouze atribut, se také ˇcasto
vyuˇz´ıvá
V posledn´ı ukázce se vyskytuje atribut, který se zapisuje do poˇcáteˇcn´ıho tagu. Je
to nositel informace o daném tagu. Kaˇzdý atribut se skládá z názvu a hodnoty, která
je uzavˇrena do uvozovek. V ukázce 2.7 jsou hodnoty souˇradnic bodu v souˇradnicovém
systému S-JTSK. Zvolený souˇradnicový systém i ˇc´ıslo bodu jsou ukládány jako atributy.
Zp˚usob zápisu komentáˇre: .
<bod cislo="4001">
<souradnice system="EPSG:5221">
744903.16 , 1040716.70
</souradnice>
</bod>
Obrázek 2.7: XML dokument popisuj´ıc´ı geobod
bod
ELEMENT
system
ATRIBUT
souradnice
ELEMENT
ID
ATRIBUT
popis
ELEMENT
jazyk
ATRIBUT
kořenový element
předek
odstavec
ELEMENT
potomek
sourozenec
<bod ID=4001>
<souradnice system=”EPSG:9221”>
744903.16 , 1040716.70
</souradnice>
<popis jazyk=”cz”>
<odstavec>
Makovice kostela ...
</odstavec>
</popis>
</bod>
Obrázek 2.8: Stromová struktura XML elementu
2.4.2 XML dialekty
Jazyk˚u odvozených z XML je opravdu mnoho3
, zde budou uvedeny ty nejvyuˇz´ıvanˇejˇs´ı
z nich a ty, které maj´ı nˇeco spoleˇcného s oborem geodézie a kartografie.
• XHTML (XML HyperText Markup Language)
Znaˇckovac´ı jazyk nahrazuj´ıc´ı HTML (SGML) je postaven na XML základech. Je
pˇr´ısnˇejˇs´ı na syntaxi a umoˇzˇnuje definici vlastn´ıch sad znaˇcek. Jeho pouˇzit´ı se do-
poruˇcuje spoleˇcnˇe s CSS (Cascade Style Sheet).
• DocBook
Odvozenina XML urˇcená pro psan´ı nejen technické dokumentace. Pouˇz´ıvá se také
3
http://en.wikipedia.org/wiki/List_of_XML_markup_languages

pro psan´ı knih, prezentac´ı, ˇclánk˚u atd. Obsah lze snadno (podle ˇsablon) transfor-
movat pro r˚uzné úˇcely pouˇzit´ı.
• MathML (Mathematical Markup Language)
Matematický znaˇckovac´ı jazyk popisuje matematické vztahy a vzoreˇcky. Je také
uloˇzen logický smysl výrazu. MathML podporuj´ı kanceláˇrské bal´ıky MS Office,
OpenOffice, matematický software Mathematica a webové prohl´ıˇzeˇce.
• SVG (Scalable Vector Graphics)
ˇSkálovatelný vektorový formát urˇcený nejen pro internet. O jeho výhodách, zp˚usobech
pouˇzit´ı a praktických ukázkách pojednává kapitola 3.
• KML (Keyhole Markup Language)
Formát KML4
je standardem Open Geospatial Consortium (OGC5
) a nositelem geo-
grafických dat. Vyuˇz´ıvaj´ı ji Google aplikace (Earth, Maps, SketchUp). D´ıky standar-
dizaci se vyuˇz´ıvá i v GIS aplikac´ıch. Souˇradnice jsou v systému WGS-84 a volitelná
výˇska je v systému EGM96.
• GML (Geographic Markup Language)
Formát ukládá geografické prvky jako geometrii (Point, LineString, Polygon), pouˇzitý
referenˇcn´ı systém, topologii, ˇcas, pouˇzité jednotky mˇeˇren´ı, observace atd. Formát je
také vyv´ıjen a udrˇzován konsorciem OGC.
• GeoRSS
Geografický formát urˇcený pro RSS ˇcteˇcky, tzv.
”
Web feed“ sluˇzby. Nové zprávy
mohou tak nést i geografickou lokalizaci. GeoRSS je také projektem organizace OGC.
• GPX (GPS eXchange Format)
Do tohoto formátu jsou ukládány data nˇekterých GPS pˇrij´ımaˇc˚u (Garmin) a popisuj´ı
trasy.
2.4.3 XML pˇridruˇzené technologie
XML dokumenty mohou být mezi sebou provázány pouˇzit´ım technologie odkaz˚u.
Jazyky XPath, XPointer a XLink nab´ızej´ı vˇetˇs´ı moˇznosti adresován´ı neˇz pˇr´ıkaz
<a href="http://svg.filipzava.cz" > SVG </a> vyuˇz´ıvaný v HTML. Tyto jazyky
také definuje a standardizuje konzorcium W3C. Aplikace, která bude shrnuj´ıc´ım výsledkem
této práce, 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á pro prohledáván´ı XML dokumentu, který je repre-
zentován stromovou hierarchi´ı. Jednotlivé elementy tvoˇr´ı uzly, po kterých je snadné
se s XPath pohybovat. Pouˇz´ıvaj´ı se pojmy jako pˇredek a potomek.
4
http://code.google.com/intl/cs/apis/kml/documentation/kmlreference.html
5
http://www.opengeospatial.org/

Kapitola 3. Formát SVG 12
Kapitola 3
Formát SVG
3.1 Verze
Vektorový formát SVG je vyv´ıjen od roku 1998. Uˇz od prvopoˇcátku byl koncipován,
aby se stal internetovým standardem. Ve vývojovém týmu zasedali zástupci významných
firem (Adobe, Corel, Macromedia, Sun, Microsoft, Hewlett-Packard, Apple, IBM). Je-
den z rozhodných okamˇzik˚u nastal v záˇr´ı 2001, kdy verze SVG 1.0 z´ıskala doporuˇcen´ı od
konsorcia W3 (pˇredstupeˇn standardizace). Standardizován byl formát SVG 1.0 v dubnu
2000. O nˇekolik mˇes´ıc˚u pozdˇeji (leden 2001), vyˇsla verze 1.1, která bere v potaz expanzi
internetu na rozv´ıjej´ıc´ı se mobiln´ı zaˇr´ızen´ı. Pro vzájemnou kompatibilitu mezi tˇemito
zaˇr´ızen´ımi bylo SVG rozvˇetveno na formát pro mobiln´ı zaˇr´ızen´ı SVGB (SVG Basic) a od-
vozeninu SVGT (SVG Tiny) pro mobiln´ı telefony (nezahrnuje pr˚uhlednost, CSS styly nebo
gradient). V dobˇe psan´ı této publikace se verze nacházela ve stádiu SVG 1.2 a je oˇcekáváno
vypuˇstˇen´ı SVG 2.0. V dneˇsn´ı dobˇe nab´ıraj´ı na trhu sv˚uj pod´ıl tablety, které svým doty-
kovým displayem umoˇzˇnuj´ı pˇrirozenˇejˇs´ı ovládán´ı aplikac´ı, tedy i vyuˇzit´ı interaktivity SVG.
V tˇechto zaˇr´ızen´ı je vˇetˇsinou zabudována podpora formátu SVG Full [Eis02].
Obrázek 3.1: Nˇekterá z oficiáln´ıch log formátu SVG
3.2 Kompatibilita
V poˇcáteˇcn´ıch letech byl SVG formát podporován významnou spoleˇcnost´ı Adobe,
která se nejsp´ıˇs d´ıky tomuto formátu chtˇela stát konkurentem flash formátu od Macrome-
dia. Pro zobrazován´ı SVG v prohl´ıˇzeˇc´ıch, které v té dobˇe nemˇely nativn´ı podporu tohoto
formátu, byl vyuˇz´ıván plugin Adobe SVG Viewer. Jeho vývoj 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ém jádru Gecko v roce 2005.
Opera má plnou podporu SVG Tiny 1.1 od verze 8. Prohl´ıˇzeˇce zaloˇzené na WebKit

(Google Chrome, Apple Safari) ˇcásteˇcnˇe podporuj´ı SVG 1.1 od roku 2006. Zat´ım
celosvˇetovˇe nejv´ıce rozˇs´ıˇrený prohl´ıˇzeˇc Internet Explorer od Microsoftu zavedl nativn´ı
podporu teprve v roce 2011 ve verzi IE9.
Internet
Explorer
Mozilla
Firefox
Google
Chrome
Safari
Opera Ostatní
prohlížeče
43.6%
29.0%
13.9%
6.2%
2.7%
4.6%
Obrázek 3.2: Pod´ıl pouˇz´ıvaných internetových
prohl´ıˇzeˇc˚u ve svˇetˇe v lednu 2011
3.3 Hlaviˇcka SVG dokumentu
Tak jako správnˇe formovaný XML dokument by i SVG obrázek mˇel obsahovat
hlaviˇcku. V této ˇcásti jsou uvedeny povinné prvky jako (procesn´ı instrukce, definice typu
dokumentu) a koˇrenový element svg.
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
... obsah ...
</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
Je vhodné pouˇz´ıt i nepovinné elementy pro oznaˇcen´ı obsahu, tzv. metadat (viz. 3.11)
informuj´ıc´ıch o autorovi, formátu a zdroji dat. O zápisu dalˇs´ıch element˚u ve vztahu ke
kartografii je pojednáno v 5.4.
3.3.1 Element defs
Do elementu defs lze zapsat ˇcásti kódu, které mohou být v dokumentu nˇekolikrát
pouˇzity. Jedná se zejména o definován´ı barev, barevných pˇrechod˚u, vzor˚u atd. T´ımto
zp˚usobem lze také pˇredávat ˇcást kódu. Tato skuteˇcnost se hod´ı také u rozm´ıst’ován´ı
kartografických znaˇcek, kdy samotný kód je uveden pouze jednou a následnˇe se jen
um´ıst’uje na zadané souˇradnice. To vede k úspoˇre datového objemu dokumentu a pˇrisp´ıvá
k pˇrehlednosti kódu.

• atribut id
Pro oznaˇcen´ı objektu slouˇz´ı atribut id, jehoˇz hodnota by v dokumentu mˇela být
unikátn´ı, aby nedoˇslo ke kolizi. Podle tohoto oznaˇcen´ı lze prvek kdykoliv zavolat a
inicializovat jeho vykreslen´ı. Identifikátor lze zapsat ke kaˇzdému elementu geomet-
rických tvar˚u, textové sloˇzce nebo rastrovému obrázku.
• element use
Pro vykreslen´ı symbolu v urˇcité ˇcásti 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é znakem ‘#’.
<defs>
<path id="trojuhelnik" stroke="blue" fill="red"
d="M-10,10 L0,-10 L10,10 L-10,10" />
</defs>
...
<use x="40" y="40" xlink:href="#trojuhelnik" />
40
40 +
+
-
-
• element symbol
Mezi tagy s názvem symbol se zapisuje kód objekt˚u urˇcených pro v´ıcenásobné
pouˇzit´ı. Lze zapsat libovolný element geometrických tvar˚u a textu. Ke kaˇzdému
symbolu je nutné také pˇridat atribut id, který vede k jednoznaˇcné identifikaci sym-
bolu. Atribut overflow (nastavený na visible) zajiˇst’uje vykreslen´ı celého prvku.
Objekt je zapsán relativn´ımi souˇradnicemi, proto je vhodné tˇeˇziˇstˇe objektu um´ıstit
na poˇcátek soustavy souˇradnic. T´ımto zp˚usobem lze vytváˇret a pouˇz´ıvat kartogra-
fické znaˇcky. Podobného výsledku lze dosáhnout pouˇzit´ım identifikátoru pro skupinu
: <g id="znacka" > ... obsah znaˇcky ... </g>
<defs>
<symbol id=”znacka” overflow=”visible”>
<rect x="-20" y="-20" width="40" height="40"
r="20" fill="#A2DFF4" stroke="black"
stroke-width="2" rx="5"/>
</symbol>
</defs>
...
<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áteˇcn´ı, stˇredn´ı nebo koncové znaˇcky pomoc´ı elementu marker. Typické pouˇzit´ı
je znázornˇen´ı smˇeru ˇsipkou. Atributy, které lze vyuˇz´ıt pro formátován´ı jsou:
- id - identifikátor, povinný parametr
- refX, refY - souˇradnice referenˇcn´ıho bodu
- markerUnits - definice souˇradnicového systému hodnoty: strokeWidth, user-
SpaceOnUse
- markerWidth, markerHeight - velikost znaˇcky v závislosti na SS

- orient - nastaven´ı orientace znaˇcek, hodnota ‘auto’ natoˇc´ı znaˇcku automaticky
dle teˇcny ke zvolenému bodu, lze také zadat ú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>
<marker id="bod" refX="0" refY="0"
markerUnits="strokeWidth"
overflow="visible"/>
<circle cx="0" cy="0" r="2" />
</marker>
</defs>
...
<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ý objekt urˇcený k vykreslen´ı. Pro pouˇzit´ı znaˇcky
slouˇz´ı atributy:
- marker-start poˇcáteˇcn´ı znaˇcka
- marker-mid znaˇcka lomových bod˚u
- marker-end znaˇcka koncového bodu
Hodnota je odkaz na danou znaˇcku ve tvaru "url(#adresa)".
3.3.2 Barevné pˇrechody
Plynulý pˇrestup jedné barvy do druhé se nazývá
”
barevný pˇrechod“ (gradient).
SVG nemá ˇzádný gradient nastavený a uˇzivatel si mus´ı definovat vlastn´ı. Samotná defi-
nice je um´ıstˇena do hlaviˇcky dokumentu v elementu defs. Existuj´ı dva druhy barevných
pˇrechod˚u: lineárn´ı a radiáln´ı pˇrechod.
• element linearGradient
Pˇrechod je nutné pojmenovat atributem id. Následuj´ı atributy x1,y1,x2,y2 udávaj´ı
(v procentech) smˇer pˇr´ımky, podle které je barevný pˇrechod veden. Obsahem ele-
mentu linearGradient jsou barevné body <stop>, které maj´ı nastaven odstup
(offset), barvu v atributu (style) hodnotou (stop-color) nebo nepr˚uhlednost
(stop-opacity).

<defs>
<linearGradient id="modro_cervena"
x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue; stop-opacity:1"/>
<stop offset="100%" style="stop-color:red; stop-opacity:1"/>
</linearGradient>
</defs>
...
<rect width="400" height="50" r="20" fill="url(#modro_cervena)"/>
0% 100%
• element radialGradient
Podobné atributy jako lineárn´ı pˇrechod má i element radialGradient. Je ale na-
staven atributy cx,cy (souˇradnice stˇredu) a fx,fy, které po osách posunuj´ı barevné
body.
<defs>
<radialGradient id="modro_cervena" cx="50%" cy="50%"
r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:blue; stop-opacity:1"/>
<stop offset="100%" style="stop-color:red; stop-opacity:1"/>
</radialGradient>
</defs>
...
<rect width="200" height="200" fill="url(#modro_cervena)"/>
0%
100%
fy
fx
C
0%
100%
0% 100%
0%
100%
fy
fx
C =100%
=0%
Barevné pˇrechody lze pouˇz´ıt jako barvu výplnˇe (fill), barvu tahu (stroke) nebo barvu
textu. Na definovaný gradient je odkázáno pouˇzit´ım jeho identifikátoru:
fill="url(#prechod)";
Mezi dalˇs´ı prvky, které se zapisuj´ı do hlaviˇcky defs patˇr´ı typografické definice. Tyto
prvky nejsou v kartografii pˇr´ıliˇs pouˇz´ıvané, proto také nebudou podrobnˇeji zmiˇnovány.
3.4 SVG elementy základn´ıch geometrických prvk˚u
Jako u vˇetˇsiny formát˚u a editor˚u vektorové grafiky je výsledný obrázek sloˇzen ze
základn´ıch prvk˚u jako jsou obdéln´ıky, kruˇznice, kˇrivky nebo úseˇcky. Tyto prvky jsou mate-
maticky popsány dle parametr˚u nutných k jejich sestrojen´ı. V následuj´ıc´ıch podkapitolách
jsou popsány tzv.
”
SVG primitiva“. Je také uvedena jejich kartografická hodnota (zp˚usob
jejich vyuˇzit´ı pro zákres map). Stylová sloˇzka (barva a tlouˇst’ka ˇcáry, barva výplnˇe atd.)
je ˇreˇsena v kapitole 4.

3.4.1 Element line (úseˇcka)
<line x1="10" y1="10" x2="70" y2 ="30"/>
[0;0]
[10;10]
[70;30]
p1
p2
x
y
Jeden z nejjednoduˇsˇs´ıch tvar˚u je úseˇcka. Je
popsána pouze poˇcáteˇcn´ım (x1,y1) a kon-
covým bodem (x2,y2). V kartografii tento
tvar sám o sobˇe nenacház´ı velkého uplatnˇen´ı,
je ale vyuˇz´ıván jako základn´ı prvek kˇrivek,
kde tvoˇr´ı spojnici mezi lomovými body. Pr-
vek je ˇcasto zastupován elementem path.
3.4.2 Element rectangle (obdéln´ık)
<rectangle x="20" y="10"
width="30" height="20"/>
[0;0]
[20;10] p
x
y
height
width = 30
= 20
Obdéln´ık je tvoˇren elementem rectangle.
Pro sestrojen´ı jsou udány souˇradnice seve-
rozápadn´ıho rohu (x,y) a ˇs´ıˇrka s výˇskou
tˇelesa (width,height). V mapˇe m˚uˇze
být tento prvek pouˇzit u zákresu budov
obdéln´ıkového tvaru. Ve vˇetˇsinˇe pˇr´ıpadech by
vˇsak musel být pootoˇcen. V aplikaci tvoˇr´ı ta-
bulky.
3.4.3 Element circle (kruˇznice)
<circle cx="30" cy="20" r="10" />
[0;0]
[30;20]
c
x
y
r=10
Dalˇs´ı lehce popsatelný 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á nejsp´ıˇse jako kruh (s vyplnˇen´ım)
pˇri znaˇcen´ı bodových prvk˚u (napˇr. bodová
vrstva obc´ı). K tomuto úˇcelu je také element
pouˇzit v aplikaci.
3.4.4 Element ellipse (elipsa)
<ellipse cx="30" cy="20"
rx="20" ry="10" />
[0;0]
[30;20]
c
x
y
ry
rx = 20
= 10
Podobný element jako pˇredcházej´ıc´ı kruˇznice
je ellipse. Je zˇrejmé, ˇze kruˇznice je zvláˇstn´ı
pˇr´ıpad elipsy (stejné poloosy). V mapˇe m˚uˇze
být pouˇzit k podobným úˇcel˚um jako kruh.
Oproti circle je pˇridán attribut (rx,ry),
coˇz jsou délky poloos. Tento element se
v aplikaci nenalézá.

3.4.5 Element polyline (lomená ˇcára)
<polyline points=" 0,0 20,10 30,20
50,10 60,30" />
x
y
[0;0] p1
[20;10]
p2
[30;20]
p3
[50;10]p4
[60;30]
p5
Lomená ˇcára je sloˇzena z úseˇcek a je popsána
pomoc´ı lomových bod˚u v atributu points.
Formát zápisu obsahuje vˇzdy páry souˇradnic
(x, y) oddˇelených ˇcárkou. V kartografii m˚uˇze
být vyuˇzit ke znázornˇen´ı lini´ı jako jsou komu-
nikace, vodn´ı toky, ˇzeleznice atd. V aplikaci
je tento prvek pouˇzit u liniových prvk˚u.
3.4.6 Element polygon (mnohoúheln´ık)
<polygon points="30,0 50,10 30,15
20,30 20,10" />
[0;0]
p1
p2
p3
p4
p5
x
y
Jedn´ım z prvk˚u pro vykreslován´ı
mnohoúheln´ık˚u je element polygon. Je
reprezentován posloupnost´ı pár˚u souˇradnic,
stejnˇe jako element polyline v atributu
points. Tento objekt je vhodný pro areálové
(ploˇsné) znaˇcky, jako lesy, vodn´ı plochy,
budovy atd.
3.5 Element path (kˇrivka)
Trochu sloˇzitˇejˇs´ım a zároveˇn obecnˇejˇs´ım popisem geometrického prvku je kˇrivka
(path). Pomoc´ı tohoto elementu je moˇzné popsat výˇse uvedené tvary, ovˇsem ve sloˇzitˇejˇs´ı
a datovˇe objemnˇejˇs´ı formˇe. Tento prvek vyuˇz´ıvá tvz. virtuáln´ıho pera, které se ˇr´ıd´ı pˇr´ıkazy
uvedenými v atributu s názvem d (data). Za pˇr´ıkazy následuj´ı páry souˇradnic pro udán´ı
pozice. Pokud je pˇr´ıkaz velkým p´ısmenem, udává absolutn´ı souˇradnice, pokud je zapsán
malým p´ısmenem, souˇradnice jsou chápány jako relativn´ı (pˇr´ır˚ustky k pˇredchoz´ımu bodu).
Dostupné pˇr´ıkazy pro element path:
• M (move) - virtuáln´ı pero je pˇresunuto na danou pozici, aniˇz by byla kreslena ˇcára
• L (line) - z pˇredchoz´ıho bodu je vedena úseˇcka na souˇradnice uvedené za t´ımto
pˇr´ıkazem
<path d="M10,10 L90,40" />
[0;0]
[10;10]
[90;40]
p1
p2
x
y
<path d="M30,0 l20,10 L30,15
l-10,15 L20,10 Z" />
[0;0]
p1
p2
p3
p4
p5
x
y
Obrázek 3.3: Element path a pˇr´ıkazy M, L pro vykreslován´ı úseˇcek

Jak lze odvodit z obrázku, t´ımto zp˚usobem lze nahradit elementy line, polyline,
rectangle, polygon, circle a ellipse, (kresba mapy by ˇsla provést za pouˇzit´ı
pouze toho typu elementu, ovˇsem datová objemová nároˇcnost a pˇrehlednost by
znaˇcnˇe utrpˇela). Na obrázku vpravo jsou pouˇzity absolutn´ı i relativn´ı souˇradnice.
• H (horizontal line) - vodorovná ˇcára, nen´ı zadávána y-ová souˇradnice
• V (vertical line) - svislá ˇcára, nen´ı zadávána x-ová souˇradnice, zápis tvaru obdéln´ıku
ˇci ˇctverce je t´ımto zp˚usobem sice kratˇs´ı, ale ménˇe pˇrehledný pro editaci
<path d="M20,10 H50 V30 H20 V10" />
[0;0]
[20;10]
x
y
[50;10]
[20;30] [50;30]
<path d="M20,10 h30 v20 h-30 v-20" />
Zápis absolutními souřadnicemi:
Analogický zápis s relativními souřadnicemi:
Obrázek 3.4: Element path a pˇr´ıkazy H, V pro vodorovné a svislé úseˇcky
• C (curve) - nástroj pro vykreslován´ı kubické Bézierovy kˇrivky
• S (smooth curve) - nástroj pro vykreslován´ı kubické Bézierovy kˇrivky s hladkým
napojen´ım, tento typ elementu path je vhodný pro vykreslen´ı zaoblených spojitých
<path d="M20,30
C10,20 40,20 30,30" />
[0;0] x
y
[20;30]
[30;30]
[10;20] [40;20]
[0;0] x
y
[20;30] [30;30]
[10;20] [40;20]
[40;30]
[50;40]
<path d="M2 0,30
C10,20 40,20 30,30
S50,40 40,30" />
Obrázek 3.5: Element path a pˇr´ıkazy C,S pro kubickou Bézierovu kˇrivku
kˇrivek, parabol a hyperbol, vyuˇz´ıvá 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ých Bézierových kˇrivek formou
hladkého napojován´ı
• Q (quadratic Béziere curve) - sestrojen´ı kvadratické Bézierovy kˇrivky
• T (smooth quadratic Béziere curve) - sestrojen´ı kvadratické Bézierovy kˇrivky
s hladkým napojen´ım, kvadratické Bézierovy kˇrivky nejsou ve vektorových editorech
bˇeˇznˇe vyuˇz´ıvány, pro uspokojivou aproximaci vyhovuj´ı kubické Béz. kˇrivky

<path d="M10,10 A30,20 0 0,0 50,40 Z" />
[0;0] x
y
[10;10]
[50;40]
30
20
A
30,
20
0
0,
0
50,
40
hlavní polosa
vedlejší polosa
rotace (stupně)
kratší/delší výseč (0/1)
orientace výseče (0/1)
x - koncový bod
y - koncový bod
Obrázek 3.6: Element path a pˇr´ıkaz arc pro eliptickou výseˇc
• A (elliptical arc) - eliptický oblouk, prvek má sice sloˇzitˇejˇs´ı zápis, ale mohl by být
vyuˇz´ıván pro tvorbu diagram˚u
• Z (close path) - pˇr´ıkaz pro oznaˇcen´ı konce kˇrivky
3.6 Textové ˇretˇezce
Jedn´ım ze stˇeˇzejn´ıch prvk˚u vektorových grafických formát˚u je moˇznost implemen-
tace textových ˇretˇezc˚u. Ani formát SVG nez˚ustává v tomto ohledu pozadu a umoˇzˇnuje
ˇsiroké moˇznosti nastaven´ı jeho vykreslen´ı. Také v oboru kartografie je tento prvek hojnˇe
pouˇz´ıván zejména v popisc´ıch ulic, m´ıstn´ıch názv˚u atd. Zde nacház´ı uplatnˇen´ı veden´ı
textu po kˇrivce.
3.6.1 Element text
• x,y - souˇradnice bodu, na který je um´ıstˇené poˇcáteˇcn´ı úˇcaˇr´ı textu, pˇridán´ım atribut˚u
dx, dy lze tato pozice jeˇstˇe
”
doladit“
• font-size - velikost p´ısma dle jednotek uvedených 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álky (normal, small-caps)
• font-weight - nastaven´ı tuˇcnosti p´ısma (normal, bold, [100-900])
• font-stretch - vodorovné 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)

• rotate - otoˇcen´ı kaˇzdého p´ısmene o zadaný úhel ve stupn´ıch
• textLength - ˇs´ıˇrka, na kterou má text roztáhnout
• lengthAdjust - zp˚usob jakým má text vyplnit zadanou ˇs´ıˇrku (spacing, spacingAn-
dGlyphs)
Lorem ipsum
L o r e m i p s u m
L o r e m i p s u m
1
5
10
L o r e m i p s u m
Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum
L
o
re
m
ip
s
u
m
Lorem ipsum LOREM IPSUM
Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
font-family
letter-spacing
text-decoration
rotate
text-stretch
font-variant
font-size
font-style
text-length
font-weight
Obrázek 3.7: Pˇrehled základn´ıch atribut˚u pro práci 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ást´ı
textu. S výhodou lze také vyuˇz´ıt relativn´ıch souˇradnic. K dispozici jsou stejné atributy
jako u elementu text.
<text font-weight="bold" font-size="30" fill="black"> Lorem ipsum no laoreet nostrum eum.
<tspan dy="15" fill="red"> Etiam euismod efficiantur id sed. </tspan>
<tspan dy="40" dx="-800" font-style="italic">Ius ea intellegat mnesarchum.</tspan>
<tspan dy="30" rotate="10" fill="none" stroke="blue">
Ea dicta legimus pri, mea fabellas assentior curo.</tspan>
</text>

3.6.3 Element textPath
V kartografii uˇz´ıvaný zp˚usob psan´ı textu podél kˇrivky lze v SVG zapsat elemen-
tem textPath. Kˇrivka, která nahrazuje úˇcaˇr´ı p´ısma, je definována v hlaviˇcce dokumentu
v ˇcásti defs. Zm´ınˇená kˇrivka mus´ı také obsahovat identifikátor, dle kterého je jedno-
znaˇcnˇe urˇcena. ˇCást textPath mus´ı být um´ıstˇena mezi tagy <text>,</text>, kde bývá
nastaveno formátován´ı textu. Element textPath m˚uˇze obsahovat atributy:
- xlink:href(#id) - povinný atribut, adresa kˇrivky
- startOffset - odsazen´ı zaˇcátku textu od zaˇcátku kˇrivky
<defs>
<path id="tah" d="M40,70 C0,110 40,150 70,80 S250,20 300,80"/>
</defs>
<text fill="black" font-family="cursive">
<textPath xlink:href="#tah">
Text vedený po křivce využitelný pro popis linií.
</textPath>
</text>
Text
vedený po
křivce využitelný pro popi
slinií.
3.7 Instrukce pro vykreslován´ı
Pro správné vykreslen´ı nestaˇc´ı pouze uvést geometrickou podstatu objekt˚u, ale sdˇelit
parseru, jakým zp˚usobem se má prvek vykreslit (viditelnost ˇcar polygon˚u). Lze také na-
stavovat pravidla napojován´ı hran.
3.7.1 Vlastnosti atributu stroke
Vlastnosti tahu se vztahuj´ı ke vˇsem element˚um uvedených v 3.4. Tedy jak k ploˇsným
objekt˚um, tak i k lini´ım a text˚um.
• stroke
Samotný atribut stroke slouˇz´ı k urˇcen´ı barvy tahu. Jeho hodnoty mohou nabývat
barev dle 3.7.4.
• stroke-width
Tento atribut nastavuje tlouˇst’ku ˇcáry. Hodnotou je ˇc´ıslo s jednotkou uvedenou na
obr. 3.8. Pokud je tlouˇst’ka ˇcáry neudána, je pouˇzita implicitn´ı hodnota (1px). Je
to ˇcasto vyuˇz´ıvaný atribut. M˚uˇze být dynamicky nastavován v závislosti k mˇeˇr´ıtku.
V kartografickém zobrazen´ı je takto nastavena tlouˇst’ka lini´ı (znázorˇnuj´ıc´ı jejich
kvalitu).
1px 2px 6px5px4px3px

• stroke-linecap
Tento typ urˇcuje jakým zp˚usobem má být tah ukonˇcen. Hodnoty nabývaj´ı tvar˚u:
butt, round, square.
butt round square
• stroke-linejoin
Pro urˇcen´ı tvaru napojen´ı jsou k dispozici tyto hodnoty: miter, round, bevel. Pˇri
zobrazován´ı v mapˇe lze pouˇz´ıt r˚uzné hodnoty, v závislosti na zobrazovaném prvku.
Napˇr´ıklad pro vykreslen´ı vodn´ıch tok˚u je vhodné pouˇz´ıt hodnotu round, ale pro
vyobrazen´ı pr˚ubˇehu hranic hodnoty miter.
miter round bevel
• stroke-miterlimit
Nastaven´ı
”
ˇspiˇcatosti“ lze provést jen pro objekty s stroke-linejoin="miter".
Hodnota je zadána ˇc´ıslem. V kartografii nen´ı zobrazován´ı
”
ostrého“ napojován´ı
ˇzádouc´ı a u prvk˚u s vysokou fraktáln´ı dimenz´ı by mˇelo ruˇsivý efekt.
3 2 7 6
• stroke-dasharray
Pro vykreslen´ı pˇreruˇsované ˇcáry je vyuˇz´ıván atribut stroke-dasharray urˇcuj´ıc´ı
vzdálenost jednotlivých ˇcar a mezer. Do hodnot lze zapsat vektor libovolné veli-
kosti, podle kterého se kresl´ı ˇcáry nebo prázdné mezery. Tento zp˚usob lze vyuˇz´ıt
v kartografii pˇri zákresu osy ˇzeleznice.
stroke-dasharray=”20 10” stroke-dasharray=”20 10 5”
20 10 20 10 5 20 10 520 10
• stroke-dashoffset
Tato ˇcást urˇcuje, v jakém bodu se má zaˇc´ıt s vykreslován´ım.
stroke-dashoffset=”40”20 10 20 10
40
• stroke-opacity
Nepr˚uhlednost tahu je zadána ˇc´ıslem v intervalu < 0, 1 >.
1 0.8 0.6 0.4 0.2

3.7.2 Vlastnosti atributu fill
• fill
Barva výplnˇe je nastavena v tomto atributu.
• fill-rule
Pravidlo výplnˇe nabývá hodnot: nonzero, evenodd
nonzero evenodd
• fill-opacity
Nastaven´ı nepr˚uhlednosti je nastaveno hodnotami v intervalu < 0, 1 >.
1 0.8 0.6 0.4 0.2
3.7.3 Atributy opacity,display,visibility
• opacity
Nastaven´ı nepr˚uhlednosti celého objektu nebo skupiny objekt˚u vˇcetnˇe tahu, výplnˇe
a textu je moˇzné nastavit atributem stroke, jehoˇz hodnoty jsou z intervalu
< 0, 1 >. Pro odliˇsen´ı nepr˚uhlednosti tahu nebo výplnˇ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ýt také vyjmuty ze zobrazovan´ı (hodnota
”
none“), i kdyˇz se v do-
kumentu vyskytuj´ı. Této skuteˇcnosti lze vyuˇz´ıt pˇri vyp´ınán´ı vrstev. Stejného efektu
lze dosáhnout nastaven´ım atributu opacity na hodnotu 1, avˇsak pokud je pro tento
objekt nastavena interaktivita, z˚ustává na rozd´ıl od atributu display="none" za-
chována.
• visibility
visible,hidden,collaspse
3.7.4 Barevné modely
Zp˚usob˚u jak do atribut˚u fill, stroke a podobných zapsat urˇcitou barvu je nˇekolik.
Liˇs´ı se pouˇzitým barevným modelem a zápisem. Kromˇe bˇeˇznˇe známých barev obsahuje i
ty ménˇe známé.

• Color names jsou barvy pojmenovány anglickými názvy. Je to nejsnadnˇejˇs´ı a
ˇclovˇeku nejsrozumitelnˇejˇs´ı forma zápisu. Pˇr´ıklad pouˇzit´ı pro výplˇn
”
lososovou“ barvou: fill="salmon".
aquamarine coral
indianredlimegreen
gold
mistyrose moccasin
lightskyblue
• RBG je nejpouˇz´ıvanˇejˇs´ı barevný model, kde výsledná barva vznikne aditivn´ım
m´ıˇsen´ım tˇr´ı barevných sloˇzek (ˇcervená, zelená, modrá). Tento model je pouˇz´ıvaný
v monitorech a projektorech. Hodnota R,G,B kanál˚u je zapsaná 8-bitovými celými
ˇc´ısly v intervalu < 0, 255 >. Hodnoty lze odeˇc´ıst na barevné krychli. Zápis je pro-
veden jako RGB() funkce se tˇremi ˇc´ıselnými hodnotami: fill="RGB(240,32,12)".
Moˇzný je také hexadecimáln´ı zápis (HEX), sestavený ze tˇr´ı dvojic alfanumerických
znak˚u uvozených znakem ‘#’ (fill="#F0200C").
rgb(0,0,0)rgb(255,255,255) rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,0,255) rgb(0,255,255)rgb(255,255,0)
• RGBa má obdobný zápis jako pˇredchoz´ı RGB model, kde ˇctvrtý parametr nasta-
vuje alpha kanál (nepr˚uhlednost). Pˇr´ıklad pouˇzit´ı:
fill="RGBa(255,0,255,0.4)", kde α-kanál je reprezentován hodnotou typu float
v intervalu < 0, 1 >.
• HSL (Hue Saturation Lightness) urˇcuje barvu dle barevného kruhu, sytosti a odst´ınu.
- Hue je úhel (ve stupn´ıch) na barevném kruhu. < 0, 360 > [ve stupn´ıch]
- Saturation (sytost) barev je nastavena procenty. (100% - nejsytˇejˇs´ı barvy)
- Lightness (svˇetlost) je udána také procenty. (100% odpov´ıdá b´ılé barvˇe, 0%
ˇcerné barvˇe)
Tohoto modelu lze vyuˇz´ıt pˇri tvorbˇe kartogramu, kdy svˇetlost barvy (lightness)
územ´ı je nastavena dle hodnot z tabulky. V dobˇe psan´ı práce tento model bohuˇzel
jeˇstˇe nepodporovaly vˇsechny prohl´ıˇzeˇce.
Pˇr´ıklad zápisu: fill="HSL(130,80%,30%)".
• HSLa je obdoba modelu HSL, kde je jako ˇctvrtý parametr hodnota α-kanálu.
0°
180°
90°270°
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)

3.8 Souˇradnicový systém a jeho transformace
Scalable Vector Graphics ˇcesky znamená
”
ˇskálovatelná vektorová grafika“ a proto
také formát SVG nab´ız´ı r˚uzné typy transformac´ı. K jejich popisu se bude vhodné nejprve
seznámit se souˇradnicovým systémem, jak ho chápe SVG. V závislosti se zaˇzitými kon-
vencemi v poˇc´ıtaˇcové grafice a zobrazovac´ıch zaˇr´ızen´ıch byl zvolen souˇradnicový systém
s poˇcátkem v severozápadn´ım rohu.
1
2
3
4
5
6
7
[5;4]
0 x
y
1 2 3 4 5 6 8 9 10
používané délkové jednotky:
(pixels) pixely (implicitní hodnota)
(points) body
(centimeters) centimetry
(milimetres) milimetry
(inches) palce
(current font size) velikost aktuálního fontu
(x-height) velikost písmene x
(pica) [: pajka :], 1 pica = 12 points
(percent) procenta vůči zobrazované oblasti
px
pt
cm
mm
in
em
ex
pc
%
Obrázek 3.8: Pˇrehled souˇradnicového systému a délkových jednotek
3.8.1 Atribut transform
Do vˇetˇsiny element˚u, poˇc´ınaje t´ım koˇrenovým <svg>, lze zapsat atribut transform,
se kterým je moˇzno provádˇet transformace souˇradnic. Tento fakt nahrává pouˇzit´ı SVG ke
kartografickým úˇ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)"
x
y
x’
y’
20
10
Pro posun objekt˚u lze pouˇz´ıt funkci
translate. Jej´ı argumenty jsou
souˇradnice bodu, na který má být
poˇcátek transformované soustavy
um´ıstˇen. Lze vyuˇz´ıt pro pozicován´ı
symbol˚u, které jsou zapsány v m´ıstn´ı
soustavˇe.
• rotate (rotace)
transform="rotate(30)"
x
y
x’
y’
Pootoˇcen´ı poˇcátku SS se provád´ı funkc´ı
rotate(). Úhel je zadáván ve stupn´ıch
a m˚uˇze nabývat záporných hodnot
(protismˇer hodinových ruˇciˇcek). Jedná
se také o ˇcasto pouˇz´ıvanou transfor-
maci, napˇr. pootoˇcen´ı textu v názvech
ulic.

• skew (zeˇsikmen´ı)
transform="skewX(-50)"
x
y
x’
y’
-50°
Funkce má dva tvary zápisu, skewX()
pro zkreslen´ı na ose X a skewY()
pro zkreslen´ı na ose y. V obou
pˇr´ıpadech jako argument vstupuj´ı
stupnˇe vychýlen´ı zvolené osy od osy
p˚uvodn´ı. V kartografii nenacház´ı pˇr´ımé
uplatnˇen´ı.
• scale (mˇeˇr´ıtko)
transform="scale(2,0.5)"
x
y
x’
y’
Vhodná a uˇziteˇcná funkce scale()
urˇcuje zvˇetˇsen´ı nebo zmenˇsen´ı ob-
jekt˚u. Promˇenná je bezrozmˇerná jed-
notka a urˇcuje násobek, kterým se
souˇradnicový systém násob´ı. Funkce
je pˇret´ıˇzená, lze tedy zadávat jak je-
den argument pro zmˇenu mˇeˇr´ıtka obou
os, nebo dva argumenty pro kaˇzdou
osu zvláˇst’. Zmˇena mˇeˇr´ıtka je vztaˇzena
nejen na geometrii, ale i na styl vy-
kreslován´ı. V aplikaci je tato funkce
vyuˇz´ıvána mimo jiné i k
”
zoomován´ı“.
• matrix (transformaˇcn´ı matice)
Pro obecný popis je vhodný zápis pomoc´ı transformaˇcn´ı matice. Pro kaˇzdý výˇse
zm´ınˇený prvek existuje i varianta zapsaná pomoc´ı funkce matrix(). Násoben´ım
matic lze dosáhnout kombinaci jednotlivých transformaˇcn´ıch ˇcinitel˚u (transformace
prob´ıhá ve stejném poˇrad´ı jako násoben´ı matic). Aby se matice mohly násobit a
byly ˇctvercového typu, je jako posledn´ı ˇrádek pˇridán vektor (0,0,1). V kartografii
se transformaˇcn´ı matice vyuˇz´ıvaj´ı zejména pro georeferencován´ı.
transform="matrix(a,b,c,d,e,f)"
1 0 tx
0 1 ty
0 0 1
sx 0 0
0 sy 0
0 0 1
matrix(1,0,0,1,tx,ty)
translate(tx,ty)
translace
matrix(sx,0,0,sy,0,0)
scale(sx,sy)
měřítko
cos(α) -sin(α) 0
sin(α) cos(α) 0
0 0 1
matrix(cos(α),sin(α),-sin(α),cos(α),0,0)
rotate(α)
rotace
1 tan(α) 0
0 1 0
0 0 1
1 0 0
tan(α) 1 0
0 0 1
matrix(1,tan(α),0,1,0,0)
skewY(α)
zešikmení dle osy ‚y‘
matrix(1,0,tan(α),1,0,0)
skewX(α)
zešikmení dle osy ‚x‘
a c e
b d f
0 0 1
obecná
tranformační
matice

3.9 Rastr v SVG
Jak jiˇz bylo zm´ınˇeno dˇr´ıve, SVG umoˇzˇnuje nejen vkládat a ukládat rastrovou grafiku,
ale nab´ız´ı i moˇznosti editace typu transformace nebo aplikaci pˇreddefinovaných filtr˚u.
Jelikoˇz se i v modern´ıch digitáln´ıch kartografických prac´ıch poˇc´ıtá s rastrovým vyjádˇren´ım
(v podobˇe ortofotomap nebo st´ınovaného reliéfu), nalezne i rastrový formát své uplatnˇen´ı.
3.9.1 Element image
Vloˇzen´ı obrázku elementem image je provedeno obdobným zp˚usobem jako v HTML.
Lze vyuˇz´ıt tyto základn´ı atributy:
- x,y - souˇradnice, na které bude um´ıstˇen pravý horn´ı roh obrázku
- width,height - velikost vkládaného obrázku
- xlink:href - absolutn´ı/relativn´ı cesta k obrázku
Pro vloˇzen´ı obrázku pˇr´ımo do dokumentu lze vyuˇz´ıt kódován´ı Base64 (pˇrevod
binárn´ıch dat na znaky ASCII). Rastrový obrázek v binárn´ı formˇe lze po pˇrekódován´ı na
ACSII vloˇzit do dokumentu t´ımto zp˚usobem: xlink:href="data:image/jpeg;base64,
...", kde m´ısto teˇcek je dosazen samotný kód. Rastrový objekt lze transformovat atribu-
tem transform, kde jsou k dispozici vˇsechny typy transformac´ı. Tohoto faktu lze vyuˇz´ıt
tˇreba pˇri georeferencován´ı rastrového podkladu mapy.
<image x="40" y="50" width="512" height="512"
xlink:href="Lenna.bmp" />
<circle cy="160" cx="160" r="130"
fill="red" opacity="0.3"/>
<circle cy="160" cx="440" r="130"
fill="green" opacity="0.3"/>
<circle cy="160" cx="305" r="130"
fill="blue" opacity="0.3"/>
Obrázek 3.9: Ukázka pouˇzit´ı rastrových obrazových dat
3.9.2 Element filter
Na SVG objekty lze aplikovat rastrové filtry známé z editor˚u jako jsou Adobe Photo-
shop, Gimp atd. D˚uvod proˇc na vektorovou grafiku pouˇz´ıvat rastrové filtry je jednoduchý.
Rastrová reprezentace sloˇzitých, rozmanitých a ˇclenitých obrazových dat je výhodnˇejˇs´ı na
výpoˇcet i na vykreslen´ı. Je d˚uleˇzité zm´ınit, ˇze ˇskálován´ı (zmˇena mˇeˇr´ıtka) nemá na výsledné
vyobrazen´ı vliv (v podobˇe ztráty kvality), jelikoˇz docház´ı k novému výpoˇctu prvk˚u pro
kaˇzdou hladinu. I kdyˇz pˇr´ıliˇsné zdoben´ı prvk˚u v mapˇe má ruˇsivý ráz, s drobnými a
rozváˇznými efekty lze pˇrispˇet ke zdokonalen´ı vizuáln´ı i informaˇcn´ı hodnoty výsledné práce.
Filtry se daj´ı aplikovat nejen na geometrické tvary a texty, ale i na rastrové obrázky.

Element filter (zapsaný v hlaviˇcce v ˇcásti defs) slouˇz´ı jako kontejner pro zápis
posloupnosti efekt˚u. Obsahuje jediný atribut id slouˇz´ıc´ı jako identifikátor. K pouˇzit´ı exis-
tuje mnoho elementárn´ıch filtr˚u, ze kterých lze dosáhnout kýˇzeného výsledku. Pˇrehled
základn´ıch filtr˚u1
:
• feBlend
Nastaven´ı zp˚usobu prol´ınán´ı obraz˚u. K dispozici jsou tyto prol´ınac´ı reˇzimy: Normal,
Multiply, Screen, Darken, Lighten. Jedná se o výpoˇcet nové barevné hodnoty ˇcást´ı
obrázk˚u, které se pˇrekrývaj´ı. Pro kartografické úˇcely nen´ı tento filtr vyuˇz´ıván.
• feColorMatrix
Jednou z moˇznost´ı jak ovlivnit barevnost celého výsledného obrazu je pouˇzit´ı tohoto
filtru. Barevnou matic´ı lze upravovat jas, transparentnost nebo posouvat barevné
spektrum. Je moˇzno pouˇz´ıt nˇekolik typ˚u nastaven´ı:
- matrix (obecná barevná matice),
- saturate (úprava jasu, kdy hodnoty leˇz´ı v intervalu < 0, 1 >),
- hueRotate (barevné spektrum, hodnoty stupnˇe na barevném kruhu z model˚u
HSL nebo HSV),
- luminanceToAlpha (transparentnost je nastavena podle jasu bodu, bez hod-
noty)
• feComponentTransfer
V grafických editorech je vyuˇz´ıván histogram jasu, který umoˇzˇnuje dle kˇrivky na-
stavit pomˇer jasu a kontrastu. Histogram je moˇzné upravovat pro kanály RGBA
zapisované feFuncR, feFuncG, feFuncB a feFuncA. Zápis vztah˚u do r˚uzných kanál˚u
atributem type s parametry:
- identity - je pouˇzita p˚uvodn´ı kompozitn´ı barva
- table - podle hodnot v atributu tableValues je provedena lineárn´ı interpolace
kˇrivky
- discrete - kˇrivka sestavena z diskrétn´ıch hodnot z parametr˚u atributu tableValues
- linear - kˇrivka nahrazena pˇr´ımkou, která je urˇcena atributy slope (sklon ve
stupn´ıch) a intercept (posun na svislé ose)
- gamma - kˇrivka urˇcena hodnotou amplitudy (atribut apmlitude), exponentu
(exponent) a svislým posunem (offset)
• feComposite, feMerge
R˚uzné reˇzimy sluˇcován´ı rastr˚u dle algoritmu Porter-Duff.
• feConvolveMatrix
Výpoˇcet hodnoty pixelu v závislosti k sousedn´ım prvk˚um a parametry matice. Ma-
tice (kernel) postupnˇe procház´ı obrazem a pˇrepoˇc´ıtává hodnoty. Matice obsahuje
m×n prvk˚u. Výsledek je ovlivnˇen velikost´ı kernelu a jeho parametry. T´ımto filtrem
je moˇzné provádˇet úlohy typu rozostˇren´ı, zostˇren´ı, detekce hran atd. Známá je apli-
kace na data z´ıskaná dálkovým pr˚uzkumem Zemˇe. Na stejném principu je stavˇena
ˇrada dalˇs´ıch bitmapových operac´ı. Matice je urˇcena základn´ımi atributy:
1
úplný pˇrehled filtr˚u na http://www.w3.org/TR/SVG11/filters.html

- order - rozmˇer matice
- kernelMatrix - po ˇrádc´ıch zapsány prvky matice
- bias - konstanta, která je pˇriˇctena k výsledné hodnotˇe pixelu
- edgeMode - pravidla pro poˇc´ıtán´ı krajn´ıch pixel˚u, kdy sousedn´ı prvky neexis-
tuj´ı, parametry: duplicate (duplikace okrajových bod˚u), wrap (jsou pouˇzity
hodnoty z protilehlého konce bitmapy), none (pouˇzity nulové hodnoty)
- kernelUnitLength - velikost buˇnky matice, implicitnˇe je rovna jednomu pixelu
- preserveAlpha - zachován´ı transparentnosti nastaven´ım atributu na
”
true“
• feGaussianBlur
Velmi vyuˇz´ıvaným filtrem je gaussovské rozostˇren´ı. Je to forma aplikace kernelu
o urˇcitých parametrech. Atributem stdDeviation je nastavena standardn´ı odchylka
tedy
”
velikost“ rozostˇren´ı. Moˇzné je nastaven´ı odchylky pro kaˇzdou osu. Zaj´ımavé
je pouˇzit´ı tohoto filtru pro liniové prvky (napˇr. odliˇsen´ı cyklotras od turistických),
kdy vzr˚ustá ˇ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á data. Nab´ız´ı i
moˇznost nastaven´ı pr˚uhlednosti. Obsahuje atributy flood-color (barva výplnˇe)
a flood-opacity (nepr˚uhlednost v intervalu < 0, 1 >).
• feTurbulence
Pˇridán´ım ˇsumu takzvanou Perlin funkc´ı lze dosáhnout vzniku textury jako jsou
oblaka ˇci mramor. Zvolený typ lze urˇcit atributy:
- type - hodnotou fractalNoise je generován ˇsum a hodnotou turbulence
v´ıˇren´ı
- baseFrequency - frekvence ˇsumové funkce m˚uˇze být pro kaˇzdou osu odliˇsná
- numOctaves - poˇcet period
- seed - startovn´ı ˇc´ıslo generátoru náhodného ˇsumu
• feDisplacementMap
Filtr zajiˇstuj´ıc´ı deformace obrazu.
• feImage
Nástroj pro vloˇzen´ı extern´ıho grafického souboru. Obdobný zápis jako SVG element
image (cesta k souboru atributem xlink:href). Nab´ız´ı i moˇznost vloˇzit dalˇs´ı SVG
obrázek.
• feMorphology
Provád´ı zes´ılen´ı (ztuˇcnˇen´ı) nebo ztenˇcen´ı prvku. Nastaven´ı je provedeno atributy:
operator (parametr erode pro zúˇzen´ı a diletate pro ztuˇcnˇen´ı) a radius urˇcuje
jejich rozsah (velikost).

• feOffset
Posun prvku v ose x, y. Atributy dx,dy pro zadán´ı posunu. Filtr nahraditelný
atributem transform="translate(dx,dy)".
• feSpecularLighting feDiffuseLighting
Filtry vyuˇz´ıvaj´ıc´ı Phong˚uv osvˇetlovac´ı model zejména pro reálné vykreslen´ı 3D gra-
fiky.
• feDistantLight, fePointLight, feSpotLight
Druhy osvˇetlen´ı (smˇerové, bodové, reflektor).
<defs>
<filter id="stin">
<feGaussianBlur stdDeviation="5" />
<feOffset dx="7" dy="7"/>
</filter>
</defs>
...
<rect filter="url(#stin)" x="10" y="330" rx="10"
width="200" height="200" fill="black" />
<rect x="10" y="330" rx="10" width="200" height="200"
fill="#4FA0BA" stroke="black" stroke-width="2"/>
<text filter="url(#stin)" font-style="serif" x="75" y="515" font-weight="bold"
font-size="250" opacity="0.8" fill="black"> i </text>
<text font-style="serif" x="75" y="515" font-weight="bold" font-size="250"
fill="white"> i </text>
Obrázek 3.10: Praktické vyuˇzit´ı filtr˚u pro symbol informaˇcn´ıch center
3.10 Atributová data
V geografických informaˇcn´ıch systémech (GIS) jsou obsahové informace geogra-
ficky urˇceny. Vˇetˇsinou se jedná o soubor popisuj´ıc´ı geometrickou sloˇzku a dalˇs´ı popi-
suj´ıc´ı atributová data. Ta jsou vˇetˇsinou v urˇcitém databázovém systému. Jelikoˇz byl
formát XML p˚uvodnˇe urˇcen jako nositel informac´ı, je v´ıce neˇz vhodné pouˇz´ıt tento formát
k uloˇzen´ı atributových dat. Ke kaˇzdému SVG elementu lze zapsat libovolný atribut.
Pˇr´ıklad zápisu názvu komunikace: <path typ="dálnice" d="..."/>. Pˇridané atributy,
které se nezúˇcastˇnuj´ı vykreslován´ı, je vhodné definovat v DTD, ˇc´ımˇz bude zaruˇcena bez-
chybovost dokumentu.
3.11 Metadata
Metadata lze interpretovat jako
”
data o datech“. Popisuj´ı informace obsaˇzené v do-
kumentu. Je to bˇeˇzný prvek, který je pouˇz´ıván pro popsán´ı obsahu. Jedná se zejména
o p˚uvod obsahu, rok jeho vzniku, údaje o autorovi nebo platnosti dat. V GIS systémech
jsou popisovány geometrické i atributové prvky. Jedná se o popis a urˇcen´ı souˇradného
systému, zp˚usobu poˇr´ızen´ı dat, informace o zhotoviteli atd. Jedn´ım z nejvhodnˇejˇs´ım a
zároveˇn nejpouˇz´ıvanˇejˇs´ım formátem pro zápis metadat je právˇe XML se svou hierarchickou

strukturou. Proto data obsaˇzená v SVG formátu nemus´ı být pouhá obrazová data, ale mo-
hou nést i informaci o referenˇcn´ım systému. Tyto informace jsou zapisovány do elementu
metadata. Následuj´ıc´ı kód je pˇrevzat ze stránek W3C.org2
a popisuje pouˇzit´ı definovaného
geografického systému souˇradnic podle kódu EPSG. V ukázce je vyuˇzit model pro zápis
metadat RDF (Resource Description Framework).
<metadata>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:crs="http://www.ogc.org/crs"
xmlns:svg="http://www.w3.org/2000/svg">
<rdf:Description rdf:about="">

<crs:CoordinateReferenceSystem svg:transform="rotate(-90) scale(2,2)">
<crs:Identifier>
<crs:code>4326</crs:code>
<crs:codeSpace>EPSG</crs:codeSpace>
<crs:edition>5.2</crs:edition>
</crs:Identifier>
</crs:CoordinateReferenceSystem>
</rdf:Description>
</rdf:RDF>
</metadata>
2
http://www.w3.org/TR/SVG/coords.html#GeographicCoordinates

Kapitola 4. Stylové jazyky 33
Kapitola 4
Stylové jazyky
XML jako formát je nositelem obsahu, který by mˇel být oddˇelen od formy, aby v nˇem
obsaˇzené informace mohly být prezentovány v´ıce zp˚usoby. Napˇr´ıklad jiný výstup bude
urˇcen pro tisk, jiný pro internet nebo grafickou vizualizaci. Metodu jak toho dosáhnout
poskytuj´ı stylové jazyky CSS (Cascade Style Sheets) a XSL (XML Style Language). Tyto
jazyky jsou samozˇrejmˇe dostupné i pro XML dialekty SVG nevyj´ımaje.
4.1 CSS
Kaskádové styly jsou známy jiˇz delˇs´ı dobu ve spojen´ı s HTML, kde se trvale us´ıdlily.
Nyn´ı se o vývoj stará W3C a v dobˇe psan´ı této práce se pracuje na verzi CSS31
. Vlast-
nosti a chován´ı element˚u se definuj´ı ve stylovém souboru, který m˚uˇze být intern´ı (souˇcást
dokumentu) nebo extern´ı (samostatný soubor). Jednoduchá ukázka CSS jazyka bude
pˇredvedena na pˇr´ıkladu 2.7.
bod font-size: 20pt;
text-align: center;
font-weight: bold;
color: red;
Názv˚um element˚u bod a souradnice se v CSS ˇr´ıká selektory. Ty urˇcuj´ı k jakým
element˚um se budou uvedené 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ýhodou pouˇz´ıt i pˇri stylován´ı
SVG. Zdrojový soubor s koncovkou ‘.svg’ m˚uˇze nést pouze geometrické vyjádˇren´ı, pˇriˇcemˇz
instrukce pro vykreslován´ı mohou být uvedeny v jiné ˇcásti dokumentu nebo i v jiném
souboru. Dále lze ty samé prvky rozliˇsovat pomoc´ı tˇr´ıd (class) nebo identifikátoru (id).
Tato skuteˇcnost je velice výhodná pro kartografické úˇcely. Kdy docház´ı k zohlednˇen´ı
kvalitativn´ıch prvk˚u (ˇs´ıˇrka vodn´ıho toku). Definován´ım CSS stylového souboru lze utvoˇrit
jazyk mapy, který m˚uˇze být jednoduˇse upraven nebo nahrazen, aniˇz by to mˇelo vliv na
polohovou správnost. Dokonce lze tento styl i dynamicky mˇenit (pouˇzit´ım JavaScriptu).
Mezi prvky, které by mohly být vyuˇzity pro kartografické úˇcely patˇr´ı:
1
http://www.w3.org/Style/CSS/

• barva
Umoˇzˇnuje nastaven´ı barvy do atribut˚u stroke a fill. K dispozici jsou barevné
modely uvedené 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án´ı je nˇekolik. Jedn´ım z nich je pouˇzit´ı v dokumentu
internˇe. Pokud je CSS definován externˇe, je nutné v dokumentu urˇcit url CSS souboru
t´ımto zp˚usobem:
<?xml-stylesheet href="soubor.css" type="text/css"?>
bod.II element bod, který má atribut class nastaven na “II”
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 element bod, který má ID 4001
Tabulka 4.1: Pˇr´ıklady pouˇzit´ı selektor˚u v CSS
4.2 XSL
Dalˇs´ım ze stylových jazyk˚u je XSL (eXtensible Stylesheet Language), ˇcasto téˇz ve
tvaru XSLT (eXtensible Stylesheet Language Transformation). Pˇrináˇs´ı trochu odliˇsný zp˚usob
neˇz pˇredchoz´ı CSS, kdy se
”
stylován´ı“ provád´ı podle pˇredem definovaných ˇsablon. Výsledný
dokument je sestaven programem, kterému se ˇr´ıká XLST Processor. Mezi nejznámˇejˇs´ı
patˇr´ı Saxon2
od Michaela Kaye a Xalan3
(Apache project). Oba jsou napsané v jazyce
Java(Xalan je implementován i v C++). Dnes je jiˇz standardem, ˇze internetové prohl´ıˇzeˇce
maj´ı takový XSLT procesor implementován. XSL nab´ız´ı moˇznost pouˇzit´ı XPath výraz˚u,
které umoˇzˇnuj´ı nejen navigaci ve zdrojovém dokumentu, ale i logické ˇr´ızen´ı [Her10]. Vývoj
XSL je pˇribliˇznˇe stejnˇe dlouhý jako SVG. XSL z´ıskalo W3C doporuˇcen´ı v listopadu 1999.
Jmenný prostor je deklarován t´ımto zp˚usobem:
<xsl:stylesheet version="1.2"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
2
http://sourceforge.net/projects/saxon
3
http://xalan.apache.org/

Zp˚usob jak prob´ıhá transformace je zˇrejmý na obrázku 4.1. Jeden ˇci v´ıce XML soubor˚u
vstupuj´ı spoleˇcnˇe se stylovým souborem (koncovka .xsl) do XSLT procesoru na jehoˇz
výstupu je dokument libovolného typu. M˚uˇze to být dalˇs´ı XML, HTML, TXT nebo SVG
dokument. Výstupn´ıch dokument˚u m˚uˇze být také v´ıce, pro r˚uzné typy zaˇr´ızen´ı (obrazovka,
tiskárna atd.)
xml xsl xsl
processor
svg
xml
html
Obrázek 4.1: Princip XSL transformac´ı
Extern´ı stylový soubor je definován obdobným zp˚usobem jako v CSS. Daný kód
odkazuje na XSL soubor sablona.xsl:
<?xml-stylesheet type="text/xsl" href="sablona.xsl"?>
Jak uˇz bylo ˇreˇceno výˇse, transformace je provádˇena podle ˇsablon, které se zapisuj´ı
mezi tagy <xsl:template match="/" > </ xsl:teplate >. Znak ‘/’ oznaˇcuje koˇrenový
(root) element, na který bude ˇsablona aplikována. M´ısto toho znaku m˚uˇze být jakýkoliv
platný Xpath výraz, který oznaˇcuje urˇcitý uzel v dokumentu. V´ıce o moˇznostech adre-
sován´ı v 4.2.3.
4.2.1 Hlaviˇcka XSL
Kromˇe povinného uveden´ı jmenného prostoru a verze v elementu xsl:stylesheet
je vhodné také specifikovat výstupn´ı formát 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">
<xsl:output method="xml" version="1.2" encoding="windows-1250"
doctype-public="-//W3C//DTD SVG 1.1//EN"
doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
indent="yes" omit-xml-declaration="yes" media-type="image/xml+svg"/>
... obsah stylového dokumentu ...
</xsl:stylesheet>
Atribut method urˇcuje typ výstupn´ıho formátu, uˇzité kódován´ı je specifikováno
v atributu encoding. Následuj´ı atributy doctype-public a doctype-system popisuj´ıc´ı
definice typu výstupn´ıho dokumentu. Zarovnán´ı kódu dle XML pravidel je nastaveno
atributem indent s parametrem yes. Atribut omit-xml-declaration="yes" zaruˇcuje
vytisknut´ı klasické XML deklarace. Jako posledn´ı je v ukázce uveden atribut media-type
popisuj´ıc´ı typ (MIME, Content-type) výstupn´ıho dokumentu.

4.2.2 Element xsl:value-of
Zp˚usob jak z´ıskat hodnotu elementu nebo atributu, je pouˇzit´ı tagu value-of ve
jmenném prostoru xsl. Povinný atribut select, zajiˇst’uje uveden´ı pˇresné polohy a názvu
uzlu.
<xsl:value-of select="jmeno"/>
Jedná se o nejv´ıce vyuˇz´ıvaný element, jeho pouˇzit´ı je ukázáno na obrázku 4.2.
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template math="/">
<html>
S-JTSK: <xsl:value-of select="bod/souradnice"> [Y,X](m)
</html>
</xsl:teplate>
</xsl:stylesheet>
<?xml version="1.0" encoding="cp1200"?>
<?xml-stylesheet type="text/xsl" href="styl.xsl"?>
<bod cislo="4001">
744903.16 , 1040716.70
</souradnice>
</bod>
<html>
S-JTSK: 744903.16 , 1040716.70 [Y,X](m)
</html>
vstup
xml
vstup
xsl
výstup
html
Obrázek 4.2: Pˇrehled vstupn´ıch a výstupn´ıch souboru XSL transformac´ı
4.2.3 XPath výrazy
Hierarchická struktura XML dokumentu je zprostˇredkována pomoc´ı tzv. uzl˚u (no-
des). Pro
”
cestován´ı“ po takových uzlech jsou vyuˇz´ıvány XPath identifikátory. D´ıky dˇediˇc-
ným vztah˚um (rodiˇc — potomek) se lze jednoduˇse odkazovat na vnoˇrené elementy. Základn´ı
osy, kam je moˇzno adresovat jsou tyto: (pˇr´ıklady se vztahuj´ı k ukázkovému xml dokumetu,
kdy je aktuáln´ı uzel element bod)[Wil09]:
<mereni>
<bod cislo="4001">
744903.16 , 1040716.70
</souradnice>
<popis encoding="utf-8" delka="90">
Bod se nachází 2m jižně od ...
</popis>
</bod>
</mereni>
aktuální uzel
mereni
popissouradnice
bod aktuální uzel
• absolutn´ı/relativn´ı cesta (aktuáln´ı element bod)
- /bod/popis/ ⇒ absolutn´ı cesta k elementu popis

- popis/ ⇒ relativn´ı cesta k elementu popis
• koˇrenový element
- / ⇒ koˇrenový element mereni
• pˇredek
- identifikátor: parent, ancestor, ancestor-or-self
- ../mereni, parent::bod, /, ancenstor::bod ⇒ vybere element mereni
• potomek
- identifikátor: 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á elementy popis v libovolné hloubce
• sourozenec
- identifikátor: preceding-sibling, preceding, following
- /mereni/bod/popis/, popis/, following::souradnice ⇒ vybere element
popis
- /mereni/bod/souradnice/, souradnice/, preceding::popis ⇒ vybere ele-
ment souradnice
• sám na sebe
- identifikátor: self
- ., self::node() ⇒ vybere element bod
• atribut
- identifikátor: attribute, @
- popis/attribute::encoding, popis/@encoding ⇒ zjist´ı hodnotu atributu
encoding (utf-8)
- popis[@encoding] ⇒ vybere vˇsechny elementy popis, které maj´ı atribut
encoding
• index
Pokud by element bod obsahoval v´ıce element˚u popis, je moˇzné k nim pˇristupovat
pomoc´ı index˚u:
- /bod/popis[1] ⇒ vrát´ı prvn´ı element popis
- /bod/popis[last()] ⇒ vrát´ı posledn´ı element popis
• logická podm´ınka

filip-zavadil-bp-2011

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a filip-zavadil-bp-2011

Semelhante a filip-zavadil-bp-2011 (18)

filip-zavadil-bp-2011