Mendelova zemědělská a lesnická univerzita v Brně Provozně ekonomická fakulta
Tvorba statistických grafů s využitím SVG Diplomová práce
Vedoucí práce: Doc. Ing. Arnošt Motyčka, CSc.
Brno 2006
Bc. Naděžda Chalupová
Na tomto místě bych ráda poděkovala doc. ing. Arnoštu Motyčkovi, CSc., za podnětné vedení při tvorbě této práce, za cenné rady a připomínky, bez kterých by bylo možno tuto práci jen stěží realizovat.
Prohlašuji, že jsem tuto práci vyřešila samostatně s použitím literatury, kterou cituji v textu a uvádím v seznamu v závěru práce.
Abstract Chalupová, N. Production of Statistical Graphs Using SVG. Diploma thesis. Brno, 2006. This thesis deals with analysis of possibilities of vector graphic format SVG’s usage for creation of statistical graphs in web environment and with a realization of program component for it’s production in developing e-learning portal at Mendel University of Agriculture and Forestry in Brno. A focus is dedicated to the contemporily application support in SVG graphic’s rendering and server-side generating area and to evaluating of positives and negatives of this technology. The important part is focused on design and implementation of realized component and on clarifying of the reasons, which aimed to choosing of the realization’s way used. A notable point presents a demonstration of realized program component’s application possibilities too. Key words e-learning system ELIS, statistical graphs, SVG, vector graphics, XML
Abstrakt Chalupová, N. Tvorba statistických grafů s využitím SVG. Diplomová práce. Brno, 2006. Práce se zabývá analýzou možností využití vektorového grafického formátu SVG k vytváření statistických grafů ve webovém prostředí a realizací programového celku pro jejich tvorbu ve vyvíjeném e-learningovém portálu na Mendelově zemědělské a lesnické univerzitě v Brně. Pozorost je věnována současné aplikační podpoře v oblasti zobrazování a serverovému generování SVG grafiky a hodnocení kladů a záporů této technologie. Významná část práce se zaměřuje na návrh a implementaci realizované komponenty a na vysvětlení důvodů, které vedly k výběru použitého způsobu realizace. Důležitou součást také představuje prokázání aplikačních možností realizovaného programového celku. Klíčová slova e-learningový systém ELIS, statistické grafy, SVG, vektorová grafika, XML
2 Současný stav řešené problematiky 2.1 Platforma XML . . . . . . . . . . . 2.1.1 Historie a vývoj XML . . . 2.1.2 Základy XML . . . . . . . . 2.1.3 Rozvoj aplikací XML . . . 2.2 Statistické grafy . . . . . . . . . . . 2.2.1 Prvky zobrazované v grafech 2.2.2 Běžně používané typy grafů 2.3 Jazyk SVG . . . . . . . . . . . . . 2.3.1 Základní pojmy a souvislosti 2.3.2 Vývoj a historie normy SVG 2.3.3 Uplatnění formátu SVG . .
5 Závěr práce 59 5.1 Shrnutí výsledků a jejich přínosů . . . . . . . . . . . . . . . . . . . . 59 5.2 Možnosti dalšího pokračování práce . . . . . . . . . . . . . . . . . . . 60 6 Literatura
62
OBSAH
6
Přílohy
64
A Vizuální podoba příkladů ze sekce 3.1 a 3.2
65
B Atributy grafů v modulu SVG::TT::Graph
66
C Graf vytvořený pomocí SVG::TT::Graph
69
1 ÚVOD A CÍL PRÁCE
1
7
Úvod a cíl práce
V posledních letech, v souvislosti s rapidním rozvojem Internetu a informačních a komunikačních technologií, se stále více lidí jen stěží dovede obejít bez použití moderních technických prostředků. Počítače jsou dnes naprostou samozřejmostí už nejen pro několik málo vybraných pracovníků vědecko-výzkumných institucí zainteresovaných v daném oboru jako tomu bylo dříve. Jejich využívání se postupem času zavádí do všech možných oborů lidské činnosti, ať již je to k práci, ke vzdělání, které v jistém smyslu k práci patří také, nebo k zábavě.
1.1
Úvod do problematiky
Doby, kdy byly počítače ovládány výhradně z příkazového řádku již naštestí dávno minuly a počítače se staly více přívětivými hlavně pro ty pro uživatele, kteří nepatří přímo mezi odborníky přes výpočetní techniku. Na tomto pokroku mělo největší zásluhu zavedení grafického uživatelského rozhraní, které je podstatně intuitivnější na ovládání a nevyžaduje dokonalou znalost jednotlivých příkazů výpočetního systému. S tímto počinem se také začala rozvíjet a do stále více různých odvětví pronikat počítačová grafika. Ta se dělí na dvě odlišné skupiny: na rastrovou (bitmapovou) a vektorovou. Vektorová narozdíl od rastrové není popsána barevnými hodnotami všech bodů obrázku, nýbrž pomocí linek, křivek, textu a polygonů v podobě funkcí. Počítačová grafika se postupem času stala velmi významným doplňkem všech možných oblastí internetového publikování, což dokazuje stále rostoucí počet webových stránek, které ji používají nejen k zatraktivnění designu. Grafika zde hraje důležitější roli – slouží jako nositel informace a je tedy v tomto kontextu nepostradatelnou součástí. V současnosti existuje mnoho různých jak rastrových tak samozřejmě i vektorových formátů. Až doposud byla na webu používána převážně bitmapová grafika, ale v souvislosti s neustálým vývojem technologií a rostoucími požadavky uživatelů se stále více díky svým vlastnostem a schopnostem prosazuje grafika vektorová. Současný svět vektorové grafiky je velmi roztříštěn. Množství vektorových formátů a formátů pro uchování grafické informace vůbec se neustále rozrůstá a vznikají nové a nové konkurenční formáty, mnoho z nich proprietárních nebo omezených na úzký segment grafiky. Potřeba nějakého univerzálního a dominantního formátu byla už tedy velmi silná a proto tento problém začala řešit nezávislá organizace pro vývoj Webu, konsorcium W3C, a vyvinula standard SVG. Tato moderní, progresivní a velmi dynamicky se rozšiřující technologie založená na XML umožňuje nejen v rámci internetových stránek využívat jak výhod vektorové grafiky, tak, jakožto aplikace XML, výhod některých z ostatních standardů založených rovněž na XML. Jak bylo zmíněno výše, podstatnou a mnohdy velmi problematicky nahraditelnou nebo zcela nenahraditelnou součástí některých materiálů publikovaných na Internetu jsou jejich grafické doplňky. Těmito vizuálně reprezentovanými prvky pl-
1.2 Cíl práce
8
nícími informační účel jsou například schémata, diagramy, matematické a statistické grafy apod. Poněvadž se jedná vesměs o jednoduché obrazy složené z čar, křivek, bodů a jiných triviálních objektů, pro jejich uchování a vizuální reprezentaci jsou určeny souborové formáty vektorové povahy. Vektorovým obrazovým formátem velmi vhodným k uvedenému účelu je z mnoha důvodů právě SVG.
1.2
Cíl práce
Cílem této práce je analyzovat možnosti využití SVG grafiky k vytváření statistických grafů ve webovém prostředí a na základě zjištěných poznatků navrhnout, realizovat a posoudit praktické přínosy programové komponenty pro jejich tvorbu. K úspěšnému dosažení uvedeného cíle je důležité seznámit se s grafickými možnostmi jazyka SVG a identifikovat jeho výhody a nevýhody, z nichž lze pak usuzovat a diskutovat jeho vhodnost ke zmíněnému účelu. Nezbytnou fází je také poznání současné situace v oblasti statistických grafů, jejichž problematika je poměrně obsáhlá. Zejména je nutné zaměřit pozornost na současně používané typy grafů a na zobrazování dalších prvků s nimi souvisejících. Dalším významným krokem z hlediska efektivity procesu realizace výše uvedeného programového celku je provedení analýzy aktuálního stavu na poli existujících nástrojů jak pro generování SVG grafiky jako takové, tak samozřejmě zejména pro generování statistických grafů ve formátu SVG. Dále je také nevyhnutelné určit a podrobněji se seznámit s konkrétním reálným prostředím, ve kterém bude komponenta realizována. Získané dílčí poznatky z uvedených oblastí lze pak využít jako východiska pro splnění cíle práce, který obnáší nejrve návrh a implementaci softwarového celku produkujícího statistické grafy ve formátu SVG a následně prokázání a zhodnocení jeho aplikačních možností na konkrétním reálném případě.
2 SOUČASNÝ STAV ŘEŠENÉ PROBLEMATIKY
2
9
Současný stav řešené problematiky
Všeobecně více či méně akceptovaným trendem Internetu je hlavně univerzálnost a platformová nezávislost při uchovávání dat, tvorbě aplikací apod., což vyústilo ve vznik technologie XML a její aplikace do mnoha různých oblastí lidského života. V soudobém prostředí Internetu je stále více patrná potřeba univerzálního formátu pro vizuální reprezentaci různých statistických, ekonomických a jiných druhů dat. Ať již se jedná o vládní organizace, vzdělávací instituce nebo organizace v soukromém sektoru, jejich webové prezentace často vyžadují grafické doplňky, které neslouží pouze k „ozdobeníÿ www stránek, ale mají jakousi informační podstatu – např. různá schémata, diagramy, statistické grafy apod. Popsané skutečnosti vedly k požadavku zdokonalení nabídky grafických formátů, tj. rozšíření o takový formát, jež splňuje uvedené vlastnosti a je vhodný k zmíněným účelům. Tato potřeba byla zásadním motivem pro vznik SVG.
2.1
Platforma XML
Termín XML koresponduje s anglickou zkratkou slov eXtensible Markup Language, v překladu do češtiny znamenající rozšířitelný značkovací jazyk. Považuje se za nástupce dnes používaného jazyka HTML a proto bývá označováno jako webový jazyk nové generace. Spíše než o konkrétní jazyk se jedná o metajazyk, rámec pravidel, ve kterém lze navrhovat jazyky vyhovující nejrůznějším účelům. Samotný je relativně jednoduchý, intuitivní a praktický. Není majetkem žádného samostatného komerčního subjektu, byl vyvinut konsorciem W3C a vytvořen podle zkušenosti s předchozími značkovacími jazyky. 2.1.1
Historie a vývoj XML
V šedesátých letech řešila firma IBM problém ukládání velkého množství právních dokumentů. Potřebovala vymyslet formát, který by měl dlouhou životnost, nebyl závislý na používaných programech a podobně. Výsledkem jejich snažení byl obecný značkovací jazyk, který se v praktickém nasazení osvědčil. Jazyk se postupně rozšiřoval, až se z něj v roce 1986 stal jazyk SGML (Standard Generalized Markup Language), který byl přijat za ISO normu s číslem 8879. SGML bylo velice flexibilní, aby vyhovělo různým požadavkům. To byla jeho velká přednost, ale zároveň i největší slabina, neboť byl pro většinu uživatelů velice složitý. Proto bylo vyvinuto postupně několik verzí jazyka HTML, které byly pro uživatelské použití značným zjednodušením. Výrobci prohlížečů však stále přidávali nové tagy a působili tím značné komplikace především autorům stránek. Bylo jasné, že současný stav je neudržitelný a že Web potřebuje novou technologii, která by byla mnohem flexibilnější než HTML. Výsledkem práce několika předních odborníků byl jazyk XML. Byl tak odstraněn největší problém SGML – přílišná složitost. Flexibilita však zůstala zachována, a tak XML narozdíl od HTML umožňuje tvorbu
2.1 Platforma XML
10
dokumentů s vlastními tagy a s možností validace dokumentů oproti DTD, XML Schema a mnoha dalším (Kosek, 1999). Finální verze 1.0, publikovaná v únoru 1998, se ukázala být skutečně promyšleným dokumentem, neboť od svého vydání se dočkala v roce 2000 pouze upřesňující druhé edice XML 1.0 Second Edition a až v únoru roku 2004 edice třetí, která taktéž nepřináší nic nového, pouze upřesňuje formulace a opravuje nepřesnosti předchozího vydání specifikace. Souběžně vyšla i specifikace XML s pořadovým číslem 1.1, jenž také není úplným převratem, ale některé její změny jsou zpětně nekompatibilní s normou 1.0. Zejména se jedná o na první pohled viditelnou změnu v použití všech znaků Unicode (s výjimkou omezeného počtu výslovně zakázaných znaků) ve jménech elementů, atributů a dalších značek, což je v tomto kontextu dosud nevídané. 2.1.2
Základy XML
Jak uvádí (Bradley, 2002), syntax XML používá shodné počáteční a koncové tagy (značky), kterými značkuje informace. Tagy mohou obsahovat vnořené další tagy nebo text nebo mohou být prázdné. Část informace označkovaná tagy se nazývá element. Elementy mohou být dále obohaceny přidáním tzv. atributů, což jsou dvojice řetězců název="hodnota". Takovýto jednoduchý syntax je pro člověka atraktivní díky své srozumitelnosti a umožňuje snadno zapsat libovolné informace uspořádané do stromové struktury. Z tohoto pohledu je možné označit XML také jako datový formát. Tato nová technologie má mnoho předností: • flexibilita – použitelnost prakticky kdekoli (lze stejně dobře jako divadelní hru nebo e-learningový kurz popsat například informace o člověku); • strukturovatelnost – úprava dat do různé úrovně složitosti; • rozšiřitelnost – podle potřeby možnost definování vlastních tagů, které dokáží přesněji označit význam prezentovaných informací; • všeobecnost – schopnost vytváření dokumentů z fragmentů popsaných odlišnými DTD. Díky existenci tzv. namespaces (jmenných prostorů) lze do jednoho XML dokumentu integrovat i části jiných standardů založených rovněž na technologii XML; • validovatelnost – kontrola dokumentu z hlediska jeho strukturální správnosti (tzv. well-formedness) a správnosti s ohledem na definiční soubor DTD, XML Schema, apod (tzv. validity); • nezávislost na médiu – publikování obsahu v různých formátech; • nezávislost na platformě – zpracování jakéhokoliv dokumentu za použití komerčního softwaru nebo i obyčejného nástroje na zpracování textu; • internacionalizace – používání univerzálního kódování Unicode jako primární znakové sady; • variabilita vzhledu – možnost zobrazit si, díky stylopisům, informace v podobě, jaká je uživateli nejpříjemnější. XML oproti HTML pouze specifikuje, co se nachází v dokumentu a neříká nic o tom, jak má daný dokument vypadat. Informace o formátování pro tisk, pro zobrazení na Webu nebo pro jakékoliv
2.1 Platforma XML
11
jiné zobrazení se nacházejí ve stylovém jazyku XSL. Z jedné předlohy lze tedy vygenerovat mnoho cílových verzí dokumentu, a to bez toho, že bychom do dokumentu samotného vůbec zasahovali. Vše se odehrává na úrovni stylů. Jako každá technologie nemá pouze kladné stránky, tak i zde existují z jistého pohledu nevýhody. Jsou to spíše vlastnosti, které nejsou jednoznačně přijímány jako výhody. Zejména jsou XML vytýkány dva různé způsoby „ukládání datÿ (označkování stejných dat). Použití elementů a atributů je totiž záležitostí citu a je jen na tvůrci dokumentu, jak s těmito prostředky naloží. Atributy mají blíže k metadatům popisujícím elementy, ale nejedná se o striktní pravidlo. Následující ukázka objasňuje tuto problematiku: • možnost zápisu bez použití atributů: http://www.pef.mendelu.cz/ Provozně ekonomická fakulta MZLU v Brně
• zápis s použitím atributů: Provozně ekonomická fakulta MZLU v Brně
Dalším sporně přijímaným faktem je zbytečně mnoho textu v souborech, neboť každý údaj je značkován. Ale vzhledem k současným přenosovým kapacitám a k nárůstu přenášených multimediálních dat, se dá s jistotou tvrdit, že textové značky nezabírají významnou část přenosového pásma. Navíc, je-li to třeba, je možné XML soubor účinně zkomprimovat. XML tedy není vhodné použít v případech, kde hraje roli opravdu každý byte. Pro objasnění některých výše uvedených vlastností je třeba uvést alespoň krátký jednoduchý příklad toho, jak může XML dokument vypadat: <jmeno> DocRNDrJan <prijmeni>Novák CScDělostřelecká26a <mesto>Praha <post_cislo>16000
2.1 Platforma XML
2.1.3
12
Rozvoj aplikací XML
Jak již bylo uvedeno, SVG je vlastně, v jistém pojetí, speciální případ XML, tzv. aplikace XML. Na této technologii jsou, kromě SVG, které je podrobněji rozebráno v dalších částech této práce, založeny i další standardy, které se zabývají různými problematikami a jsou aplikovatelné v nejrozmanitějších oblastech lidské činnosti: • XHTML (eXtensible HyperText Markup Language) – je to rodina současných a budoucích typů dokumentů a modulů, které reprodukují a rozšiřují standard HTML 4 přeformulovaný do jazyka XML. Znamená v podstatě možnost, jak zajistit, aby webová stránka psaná v jazyce HTML byla zároveň i dokumentem, který vyhovuje standardu XML, jehož výraznou odlišností oproti HTML je to, že XML se nestará o to, jak se dokument zobrazí, ale pouze o jeho strukturu. HTML je již uzavřeným standardem, navíc XHTML je s HTML zpětně kompatibilní a jeho zatím poslední doporučení je XHTML 1.1. Připravuje se nová verze 2.0, která již nebude zpětně kompatibilní (W3C, 1995–2006). • XSL (eXtensible Stylesheet Language) – je rodina doporučení definujících transformaci a vzhled formátování XML dokumentu. Jako norma se skládá z dvou na sobě nezávislých částí: XSLT a XSL-FO. Jeho jediné doporučení je ve verzi 1.0. – XSL-FO (XSL Formating objects) – soubor typografických objektů jako jsou stránky, odstavce atd., a jejich vlastností jako šířky okrajů, barvy, fonty atd. – XSLT (XSL Transformation) – značkovací jazyk umožňující popsat transformaci z jednoho XML dokumentu do jiného XML dokumentu, HTML dokumentu, nebo libovolného textového výstupu. Popisuje jak je dokument transformován do jiného XML dokumentu, který používá formátovací slovníček (Quin, 2006). • SMIL (Synchronized Multimedia Integration Language) – XML aplikace, která integruje multimediální objekty (obrázky, zvuk, video, text) do synchronizované prezentace. Nepopisuje jednotlivé formáty (např. grafické: GIF, JPG), to nechává na konkrétních aplikacích, ale jen kdy a kde se mají v prezencaci objevit. Obsahuje prostředky jak pro sekvenční, tak i pro paralelní synchronizaci těchto objektů. Poslední verze umožňuje i zpracovávat události, jak generované systémem, tak i generované uživatelem (např. událost generovaná myší) (Thierry, 2006). • MathML (Mathematic Markup Language) – určený k usnadnění používání a znovupoužívání matematického a vědeckého obsahu na Webu a v dalších aplikacích. Tento standard je vyvíjen již od roku 1997 a nyní nejnovější volně dostupná schválená verze je MathML 2.0 second edition (Bos, 2006). • CML (Chemical Markup Language) – teprve se vyvíjející jazyk, vycházející z MathML, pro značkování chemických vzorců. Z předdefinovaných atomů se
2.1 Platforma XML
•
•
•
•
•
•
•
•
13
skládají větší celky – molekuly, a pomocí nich se modelují výsledné chemické vzorce (Murray-Rust, Rzepa, 2001). InkML (Ink Markup Language) – XML datový formát pro reprezentaci dat napsaných elektronickou nebo dotykovou propiskou, jejíž používáním vzniká tzv. „digitální inkoustÿ. Je vyvíjen teprve od začátku roku 2003 a zatím je ve stádiu třetího pracovního návrhu. Tento značkovací jazyk poskytuje formát pro přenos digitálních inkoustových (ve významu rukou psaných) dat mezi zařízeními a softwarovými komponentami. Umožňuje také uchovávat rukou psané trajektorie, oveřovat podpisy, analyzovat dynamiku tahů při psaní a podobně (Froumentin, Raggett, Hoschka, 2005). RDF (Resource Description Framework) – konstrukce pro metadata. Jde o vyjádření obsahu zpravodajských zdrojů a možnost přebírat obsah těchto zdrojů a dále ho používat pro vlastní stránky či služby (Miller, Swick, Brickley, 2006). VML (Vector Markup Language) – standard pro popis jednoduchých grafických objektů pro webové použití. Vznikl zásluhou firmy Microsoft v roce 1998 ještě v době, kdy standardizace SVG byla v nedohlednu (Mathews, 1998). VoiceXML (Voice eXtensible Markup Language) – značkovací jazyk pro vytváření dialogů, kde se objevuje kmitočtovaná řeč, digitalizovaný zvuk, rozpoznávání souvislého mluveného vstupu a tónové volby, zaznamenávání mluveného vstupu, telefonního hovoru a smíšených hovorů. Jedná si o již doporučený standard, dostupný ve verzi 2.0. Uplatnění nachází zejména u poskytovatelů telekomunikačních služeb, kdy uživatelé mobilních telefonů buď tónovou volbou nebo pomocí interaktivních hlasových příkazů získávají informace z internetu – například aktuální zprávy, ceny akcií, ale také mohou díky této technologii vyřizovat elektronickou poštu, či provádět nejrůznější transakce, včetně zabezpečených bankovních převodů (Froumentin, Ashimura, 2006). WML (Wireless Markup Language) – značkovací jazyk na vytváření WAPových stránek pro mobilní zařízení, tedy zařízení s malým displejem, pamětí a pomalým procesorem (mobilní telefony a spol.). Vyznačuje se jednoduchostí a značnou specializací právě na tato zařízení (Yoshihama, 2000). WSDL (Web Services Description Language) – model a XML datový formát pro popisování síťových služeb. Ještě nebyla doporučena žádná jeho verze a teprve se vyvíjí (Haas, 2006). XForms (XML Forms) – reprezentuje další generaci webových formulářů. Jde o množinu prvků pro vkládání dat nezávislých na výstupním zařízení. Toho se docílilo štěpením tradičních XHTML formulářů do tří částí – model, data a uživatelské rozhraní, čímž je oddělen vzhled od obsahu. Jako strukturovaná náhrada HTML formulářů není tedy XForms určen pro tvorbu samostatných dokumentů, ale pro integraci do jiných značkovacích jazyků typu XHTML nebo SVG. Jako doporučení W3C je dostupné ve verzi 1.0 (Ishikawa, 2006). XLink (XML Linking Language) – slouží k popisu vazeb mezi celými XML stránkami. Oproti jiným jazykům lze vytvářet i vícesměrné odkazy, které propojují více stránek. Dalším důležitým rysem XLinku je možnost přiřazení typu
2.2 Statistické grafy
14
jednotlivým odkazům – samotné odkazy tak mohou přímo nést nějakou sémantickou informaci. Jako doporučení W3C je dostupný ve verzi 1.0, další se zatím nepřipravuje (Thompson, 2005). • XPath (XML Path Language) – jazyk pro zápis výrazů popisujících cestu uvnitř XML dokumentu, navržený tak, aby byl využitelný oběma XSLT a XPointerem. Díky němu lze popsat cestu k tagům, atributům, textům, procesním instrukcím i komentářům, které se souhrně označují jako uzly. Nelze popsat cestu k entitám nebo CDATA sekcím, protože ty jsou nahrazeny už parserem. Ve verzi 1.0 je dostupný jako schválená specifikace (Clark, DeRose, 1999). • XPointer (XML Pointer Language) – kombinuje XLink a XPath, je tedy rozšířením o možnost tvorby odkazů na části XML dokumentu v rámci jedné URL. Doporučení zatím není kompletní, jeho tři části XPointer Framework, XPointer element() scheme a XPointer xmlns() scheme jsou už finálními doporučeními, ale nejdůležitější čtvrtá část XPointer xpointer() scheme používající k lokalizaci právě jazyk XPath je stále ve stádiu pracovního návrhu (Thompson, 2005). • XQuery (XML Query) – je dotazovací jazyk pro vyhledávání v XML datech: můžeme tedy XML soubor považovat za určitou formu databáze (hierarchická databáze). Zatím se dotazovací jazyk nad XML realizoval pomocí XSL transformací (transformací vstupního XML dokumentu do výstupního dokumentu obsahujícího podmnožinu požadovaných informací ze vstupu). Tento standard se teprve vyvíjí a vynucuje si vývoj nové verze jazyka XPath 2.0, v současné době tedy není prakticky použitelný (Chamberlin, Fankhauser, Marchiori, Robie, 2005).
2.2
Statistické grafy
Důležitou a názornou pomůckou pro vizualizaci a vyhodnocení dat jsou statistické grafy. Slouží k rychlému zobrazení požadovaných informací a mají větší vypovídací schopnost než data v tabulce. Nepředstavují však pouze nástroj prezentace, ale i velmi silný nástroj analýzy údajů a jejich vztahů. Pomocí statistického grafu lze data tabulky reprezentovat ve formě obrázku, který ihned poskytne názornou a hrubou představu o vývoji (odhad trendů), vzájemných proporcích a objemech. Grafy se používají v různých oblastech. Doplňují se do zpráv, výsledků měření, přehledů, prezentací, rozborů atd. Zpráva získá grafem na názornosti a zvedne celkově její úroveň. Grafická úprava grafů by měla být koncipována tak, aby graf: • v první řadě nezkresloval data a nenavozoval mylné závěry, • byl srozumitelný tomu, kdo jej vidí poprvé, • byl nápaditý a atraktivní a „lahodilÿ oku, • byl snadno čitelný jak na obrazovce, tak po vytištění. Výstup by měl být čitelný jak z černobílé, tak barevné tiskárny.
2.2 Statistické grafy
15
Pro splnění těchto podmínek, je vhodné, aby každý graf kromě zobrazované oblasti datových řad měl zejména tyto náležitosti: název grafu, popis os a jejich měřítko a legendu. 2.2.1
Prvky zobrazované v grafech
Do grafů jsou zakreslovány vlastnosti prvků. Typologie vlastností prvků umožňuje lépe popsat a uvědomit si konstrukci grafů. Vlastnosti prvků podle (Brož, 2002) lze z hlediska jejich popisu (měřitelnosti) rozdělit na: • kvantitativní, číselné. Vlastnosti jsou proměnnými, které lze měřit – například výšku, váhu, teplotu, napětí, proud, odpor, tlak, rychlost aj. Tyto vlastnosti se vynášejí na kardinální (stěžejní) stupnici. Kvantitativní vlastnosti se dělí na: – spojité – mohou nabývat libovolných reálných hodnot v rámci nějakého intervalu, nebo jsou neomezené z jedné nebo z obou stran – například teplota, průtok, tlak, rychlost, váha, napětí apod. – nespojité, diskrétní – mohou nabýt jen jednotlivých číselných hodnot – například počet výrobků, počet dětí, počet tanečníků (v párových tancích), láhve piva při počítání na „basyÿ atd. • kvantitativní, které se vyjadřují slovně. Ty se dělí na: – ordinální (od latinského „ordinatioÿ – pořadí, řada) – lze je uspořádat podle nějakého hodnotícího kritéria – například prospěch, vzdělání, dny, měsíce. Tyto vlastnosti se vynáší na ordinální stupnici, např. posloupnost měsíců, dnů v týdnu, prospěchová stupnice. – alternativní – jsou speciálním typem kvalitativních vlastností. Mají dvouhodnotové vyjádření – například: muž – žena, ano – ne, nový – starý. – nominální (od latinského „nomenÿ – jméno) – vlastnosti nelze uspořádat, nelze mezi nimi uvažovat žádné relace. Jde o výčet – například: rodné číslo, adresa, telefon, barva očí, SPZ. Pro nominální vlastnost musí platit jednoznačnost (hodnoty se nesmí překrývat), existence (hodnoty musí pokrýt všechny možnosti) a rozlišitelnost (označení hodnot musí být různé, jednoznačné a jednotné). Ordinální hodnoty je možné převést na kardinální a zakreslovat je do grafu. Lze s nimi počítat – např. prospěchu přiřadit číselné vyjádření a počítat průměrný prospěch, z různých údajů o začátcích a koncích projektů vypočítat průměrnou délku trvání projektu, odpovědím v dotazníku přiřadit přirozená čísla: plně souhlasím (2), částečně souhlasím (1), nevím (0), částečně nesouhlasím (-1) a plně nesouhlasím (-2) a výsledky zanést do grafu a vypočítat průměrnou hodnotu podle rozložení respondentů. Nominální hodnoty na kardinální převést nelze, slouží pouze k popisu. Data v grafu jsou organizována do datových řad, které se skládají ze souvisejících datových bodů. Datové body jsou jednotlivé hodnoty vykreslené v grafu. V konkrétním typu grafu jsou představovány např. sloupci, pruhy, spojnicemi, výsečemi, prstenci, tečkami a různými jinými tvary (symboly) nazývanými datové značky. Datové značky téže barvy a symbolu tvoří datovou řadu – v legendě každé datové
2.2 Statistické grafy
16
řady grafu je uvedena jedinečná barva a vzorek (symbol) vizuálně oddělující každou datovou řadu. Datovou řadou může být například veličina prodej automobilů jednoho výrobce za konkrétní rok. Datovým bodem – konkrétní hodnotou pak může být například počet prodaných automobilů značky Peugeot za měsíc červenec (toho daného roku). Ve statistických grafech hrají velmi důležitou roli osy. Je možné se setkat s několika nejpoužívanějšími druhy os: • osa hodnot, na které jsou zobrazovány hodnoty – nejčastěji svislá osa Y , • osa kategorií, kde jsou zobrazovány popisky (názvy) kategorií – nejčastěji vodorovná osa X, • vedlejší osa hodnot zachycující hodnoty datové řady, která těsně souvisí s datovou řadou, jejíž hodnoty jsou zachyceny na hlavní ose hodnot; tato osa zpravidla zachycuje stejnou veličinu jako hlavní osa, ale její jednotky se pohybují v jiných řádech než u hlavní osy – bývá zobrazována na svislé ose, jejíž počátek je v konci vodorovné osy X (je jakoby vedle svislé osy Y , s níž je rovnoběžná), • osa řad, která zobrazuje názvy datových řad zachycených v grafu. Všechny tyto osy kromě osy řad se používají v dvojrozměrných typech grafů, osa řad dodává třetí rozměr trojrozměrným typům grafů. 2.2.2
Běžně používané typy grafů
Volba správného typu grafu je důležitým aspektem ovlivňujícím výslednou vizuální interpretaci dat. Pokud je vybrán nejvhodnější typ grafu, bude znázornění dat jasnější a přesvědčivější a bude mít lepší vypovídací schopnost. Nejvhodnější typ grafu je ten, který dokáže nejúčinněji prezentovat myšlenku, která má být grafem sdělena 1 . K dispozici je v současnosti velké množství druhů statistických grafů, což může někdy vyvolávat pocit, že je to zbytečné, chaotické a nepřehledné. Je možné volit graf komplexní nebo jednoduchý, graf čárový, bodový či výsečový, a lze dokonce použít i kombinaci několika typů. Čím více typů grafů každý pozná a vyzkouší, tím snazší bude pro něj umět se rozhodnout pro graf (typ grafu) splňující požadovaný účel. V dalším textu bude detailněji popsáno jen několik v současnosti nejběžněji používaných typů grafů podle (Microsoft, 2006). Sloupcový graf Sloupcový typ grafu zobrazuje změny dat v průběhu časového období nebo znázorňuje porovnání položek. Často jsou používány některé jeho podtypy: skupinový sloupcový pro porovnávání hodnot různých kategorií, skládaný sloupcový v absolutní (v konkrétních jednotkách) a procentové variantě k zobrazení vztahu jednotlivých položek k celku porovnáním příspěvku každé hodnoty k celkovému součtu pro různé kategorie nebo prostorový sloupcový k porovnávání datových bodů ve dvou osách. 1
Různé typy grafů mohou s použitím stejných dat vyjadřovat různé myšlenky. Je to jako několik verzí jediného příběhu, například pohled tří různých osob na stejnou událost.
17
2.2 Statistické grafy
Ukázka sloupcového grafu v jeho základní podobě s dvěmi datovými řadami je na obr. 1. Prodej automobilů za rok 2006 500 400 300
Peugeot
200
Citroën
100 0 Leden
Únor
Březen
Obr. 1: Základní podoba sloupcového grafu
Pruhový graf Pruhové grafy znázorňují, stejně jako sloupcové grafy, porovnání jednotlivých položek. Za účelem zvýraznění porovnání hodnot jsou v něm kategorie uspořádány svisle a hodnoty vodorovně. Může se, podobně jako předchozí typ, objevovat v následujících podtypech: skupinový pruhový pro porovnávání hodnot pro různé kategorie, skládaný pruhový pro zobrazení vztahu jednotlivých položek k celku a jeho procentní varianta 100% skládaný pruhový k porovnávání procentuálních příspěvků každé hodnoty k celkovému součtu pro různé kategorie. Jeho skládaná podoba v absolutní a procentní variantě je na obr. 2. Prodej automobilů za rok 2006
Prodej automobilů za rok 2006
Březen
Březen
Peugeot
Únor
Citroën
Leden
Peugeot
Únor
Citroën
Leden
0
200
400
600
800
0%
50%
100%
Obr. 2: Skládaný pruhový graf v absolutním a procentním vyjádření
Sloupcové a pruhové grafy jsou používány v případech, kdy na jedné z os nejsou číselné údaje a tudíž nelze využít logické posloupnosti v uspořádání znaku, přičemž pruhové grafy jsou s výhodou používány při delších popiscích osy kategorií (popisky jsou po pravé straně a vodorovně) – při použití sloupcového grafu by mohly nastat problémy s překrýváním popisu kategorií.
18
2.2 Statistické grafy
Spojnicový graf Spojnicový graf zachycuje změny a trendy dat během času. Používá se pro zvýraznění vývoje. Dostupný je také v několika variantách: skládaný spojnicový zachycující trend příspěvku každé hodnoty za určitou dobu nebo pro různé kategorie a podobně jako v předchozích typech 100% skládaný spojnicový zobrazující trend procentuálního příspěvku každé hodnoty k celkovému součtu za určitou dobu nebo pro různé kategorie. Jeho základní podobu je možné si prohlédnout na obr. 3. Prodej automobilů za rok 2006 500 400 300
Peugeot
200
Citroën
100 0 Leden
Únor
Březen
Obr. 3: Základní podoba spojnicového typu grafu
Plošný graf Tento typ grafu zvýrazňuje velikost změny za určitou dobu. Ve své základní podobě zobrazuje trend hodnot za určitou dobu nebo pro různé kategorie. Jak je vidět na obr. 4, podtyp skládaný plošný zachycuje trend příspěvku každé hodnoty za určitou dobu nebo pro různé kategorie a podtyp 100% skládaný plošný zobrazuje trend procentuálního příspěvku každé hodnoty za určitou dobu nebo pro různé kategorie. Plošné grafy jsou v podstatě spojnicové grafy stejnorodých vnitřně kumulovaných veličin. Pro rozlišení jednotlivých složek se používá šrafování nebo barev, nejvýznamnějším složkám se zpravidla přiřazuje nejhustší šrafování a umísťují se do spodní části grafu. Prodej automobilů za rok 2006
Prodej automobilů za rok 2006
800
100% 80%
600 Citroën
400
Peugeot
200 0 Leden
60%
Citroën Peugeot
40% 20%
Únor
Březen
0% Leden
Únor
Obr. 4: Ukázka skládaného a 100% skládaného plošného grafu
Březen
19
2.2 Statistické grafy
Bodový graf Bodové grafy zobrazují vztahy mezi číselnými hodnotami v několika datových řadách nebo znázorňují dvě skupiny čísel jako jednu řadu souřadnic – porovnání dvou sad číselných hodnot najednou (jedné na vodorovné ose X a druhé na svislé ose Y ). Charakter grafu odpovídá jeho obvyklému použití v situaci, kdy jde o zakreslení závislosti – pro porovnání vědeckých nebo statistických dat, při kterém je třeba v jediném grafu vykreslit několik měřených veličin. Hodnoty dat jsou roztroušeny po celém grafu (viz obr. 5) – někdy je možné spojit je přímkami, ale tyto spojnice nevyjadřují časové trendy. Rozbor vlivu závlah na výnos 6 Výnos [t/ha]
5 4 3
Výnos [t/ha]
2 1 0 0
50
100
150
200
250
Závlaha [mm]
Obr. 5: Základní podoba bodového typu grafu
Zatímco u spojnicových a bodových grafů má význam vždy pouze jeden rozměr (počet, velikost, intenzita, rychlost, zrychlení atd.), u plošných grafů má význam celá plocha, která v grafu zdůrazňuje objem. Bublinový graf Bublinový typ grafu porovnává množiny tří hodnot. Je obdobou (typem) bodového grafu s tím, že datový bod smí obsahovat další parametr, hodnota třetí proměnné prezentuje velikost datové značky (bubliny). Bývá používán tehdy, když je potřeba v kartézském systému souřadnic zobrazit polohu a zároveň velikost – například polohu firmy určenou velikostí jejího sortimentu (počet výrobků) a prodejem a zároveň velikost jejího tržního podílu. Příklad bublinového grafu je uveden na obr. 6. Výsečový graf Tento typ grafu zobrazuje velikost položek tvořících datové řady ve vztahu k součtu těchto položek. Zobrazuje vždy strukturu pouze jedné proměnné (datové řady), která je vyjádřena výsečí (360◦ odpovídá 100 %), a je vhodný v případech, kdy je potřeba zvýraznit významný prvek v datech (viz obr. 7). V základní podobě zachycuje příspěvek každé hodnoty k celkovému součtu. Jeho podtypem může být rozložený výsečový zvýrazňující jednotlivé hodnoty příspívající k celkovému součtu.
20
2.2 Statistické grafy Podíly firem na trhu
Prodej (Kè)
800000 600000 400000
Prodej (Kè)
200000 0 0
5
10
15
20
25
Velikost sortimentu
Obr. 6: Ukázka bublinového typu grafu Prodej vozů značky Citroën za rok 2006
Leden Únor Březen
Obr. 7: Rozložená podoba výsečového grafu
Prstencový graf Stejně jako výsečový graf, i prstencový graf slouží k zobrazení vztahu částí k celku, může však obsahovat více než jednu datovou řadu. Jak je možné vidět na obr. 8, data jsou vizualizována v soustředných kruzích, přičemž každý kruh znázorňuje datovou řadu. Stejně jako výsečový typ grafu, existuje rovněž rozložený prstencový typ grafu. Obsahuje-li výsečový, potažmo prstencový graf několik úzkých výsečí, které splývají, je vhodné je v grafu sloučit a přemístit do jiného (vedlejšího) grafu. Přemístěné výseče budou v prvním výsečovém grafu reprezentovány jednou výsečí (například kategorií s názvem „ostatníÿ apod.) mající hodnotu součtu všech přemístěných výsečí a v novém (vedlejším) grafu již bude tato položka rozeberána například výsečovým nebo pruhovým grafem, kde již nebude splývat s ostatními. Tento problém může být například i řešen vytvářením tzv. kombinovaného typu grafu nebo vytvořením dalšího podtypu grafu jako je tomu například v aplikaci Microsoft Excel2 . Paprskový graf Paprskový graf porovnává úhrnné hodnoty několika datových řad. Je jakousi vizuální podobou vyváženosti dat. Počet paprsků je roven počtu datových bodů a hodnoty 2
V současnosti pravděpodobně nejrozšířenější aplikace vytvářející grafy mezi uživateli nezabývajícími se statistickými grafy na vědecké a profesionální úrovni.
21
2.2 Statistické grafy
Prodej automobilů za rok 2006
Citroën Peugeot
Leden Citroën Peugeot
Únor Březen
Peugeot Citroën
Obr. 8: Základní podoba prstencového grafu
jsou nanášeny od středu směrem ven. V jeho podtypu paprskovém s výplní je plocha pokrytá datovou řadou vyplněna barevně. Na obr. 9 je ukázka základního paprskového grafu. Prodej automobilů za rok 2006
Leden 400 300 200 Peugeot
100
Citroën
0
Březen
Únor
Obr. 9: Základní podoba paprskového grafu
Povrchový graf Tento typ je vhodný v případě potřeby nalezení optimální kombinace dvou množin dat. Barvy a vzorky stejně jako v topografické mapě označují oblasti se stejným rozsahem hodnot. Může být použit pro zobrazení poměru mezi velkým množstvím dat, která by jinak bylo složité zobrazit. Je možné setkat se s některými z jeho podtypů: prostorový povrchový (viz obr. 10), který zobrazuje trendy hodnot ve dvou rozměrech pomocí souvislé křivky (plochy), prostorový drátěný povrchový jež je jeho bezbarevnou variantou nebo obrysový, což je povrchový graf zobrazený shora, ve kterém barvy představují určité rozsahy hodnot a rovněž jeho bezbarevná varianta drátěný obrysový graf (v podstatě jde o vykreslení vrstevnic jako v topologické mapě).
22
2.2 Statistické grafy Pøehled prùmìrných teplot
20
20-30
10
10-20
Èervenec Kvìten Bøezen Leden
18:00
21:00
12:00
6:00
15:00
Èas
9:00
-10
0:00
0 3:00
Teplota (°C)
30
0-10 -10-0
Obr. 10: Ukázka prostorového povrchového grafu
Burzovní graf Burzovní grafy se, jak sám název vypovídá, nejčastěji používají pro zachycení pohybu cen na burze, ale lze jej použít i pro vědecká data (například ke znázornění změn teploty) – zobrazují rozptyl mezi nejnižšími a nejvyššími hodnotami. Vytváření burzovních grafů vyžaduje, aby data byla uspořádána ve správném pořadí. Podtyp maximum-minimum-konec (viz obr. 11) se často používá ke znázornění cen na burze. Vyžaduje tři řady hodnot v pořadí maximální, minimální a konečná hodnota. Počátek-maximum-minimum-konec je podtypem vyžadujícím čtyři řady hodnot ve správném pořadí: počáteční, maximální, minimální a konečná hodnota. Lze se setkat také s dalším podtypem s názvem objem-maximum-minimum-konec (viz obr. 11) vyžadujícím přesně tyto hodnoty v uvedeném pořadí nebo také s podtypem objem-počátek-maximum-minimum-konec rovněž vyžadujícím množiny hodnot v pořadí uvedeném v jeho názvu. Objem bývá znázorněn pomocí dvou os hodnot, kdy každá mívá jiný řád – například jedna osa pro sloupce znázorňující celkový objem prodaných akcií (ve statisících Kč) a druhá pro cenu akcií na burze (v Kč). Vliv vývoje cen na objem nákupu
58
56
Maximum
55
Minimum
54
Konec
Objem (Kè)
Cena (Kè)
57
1 000 000
58
800 000
57 56
600 000
55 400 000
54
200 000
53 52 10.4
17.4 Datum
24.4
1.5
Maximum Minimum Konec
53 52
0 3.4
Objem Cena (Kè)
Vývoj cen
3.4
10.4
17.4
24.4
1.5
Datum
Obr. 11: Varianty burzovního grafu maximum-minimum-konec a objem-maximum-minimum-konec
Často může být u některých zde uvedených typů grafů dostupná jejich trojrozměrná varianta – většinnou se ale jedná pouze o atraktivní efekt nemající s rozměrem
2.3 Jazyk SVG
23
dat nic společného. Tento efekt mnohdy jen vnáší do výsledné vizualizace dat pocit trojrozměrnosti, který je matoucí a proto nežádoucí. Z výše uvedeného použítí typů grafů je zřejmé, že všechny typy nebo podtypy grafů, které slouží k zachycení procentního podílu, nejsou vhodné k reprezentaci dat obsahujících záporné hodnoty. Jak uvádí (Brož, 2002), měřitelnost rozhoduje o druhu (typu) grafu a také o tom, na které ose bude jaká stupnice – pro zjednodušení je předpokládán popis dvou vlastností: • Jsou-li obě vlastnosti měřené, jsou proměnnými. Hodnoty se vynášejí na kardinální stupnice a použije se bodový typ grafu. Například vztah napětí – proud, kde na ose X je jedna proměnná a na ose Y druhá. • Je-li jedna stupnice ordinální a druhá kardinální (dny – počet návštěv, hlasování – počet osob, známka – počet žáků) lze použít ostatní typy grafů. Ordinální stupnice je na ose kategorií, na ose X u grafu spojnicového, sloupcového atd. nebo u grafu pruhového otočená o 90 ◦ – na ose Y .
2.3
Jazyk SVG
SVG je zkratka anglického „Scalable Vector Graphicÿ. Jedná se o neustále se vyvíjející formát založený na jazyce XML (eXtensible Markup Language) – otevřený standard určený pro reprezentaci dvoudimenzionální vektorové grafiky a na ní založených animací. Lze jej tedy klasifikovat jako značkovací jazyk pro popis dvojrozměrné vektorové grafiky a také ho chápat jako podmnožinu jazyka XML (v odborné literatuře se používá termín aplikace XML). Proto je možné se někdy setkat s označením SVG jako „grafika ve špičatých závorkáchÿ. O rozvoj se stará mezinárodní organizace zabývající se vývojem standardů pro World Wide Web – konsorcium W3C, jehož členy jsou také výrobci z oblasti grafického průmyslu, informatiky, telekomunikací a mnoha dalších. 2.3.1
Základní pojmy a souvislosti SVG
SVG znamená, jak již bylo uvedeno, „Scalable Vector Graphicÿ. Překlad a význam těchto tří slov není tak jednoduchý a jednoznačný, jak by se mohlo na první pohled jevit: • Scalable (škálovatelnost, stupňovatelnost) – Toto slovo má v kontextu s SVG dva významy. Prvním je možnost libovolného zmenšování či zvětšování při zachování stejné kvality a detailů obrazu. Měřítko výsledného obrazu může být kdykoliv změněno podle potřeby, skript jej například může automaticky přizpůsobit velikosti obrazovky cílového počítače nebo třeba displeji mobilního telefonu. Rovněž lze, bez jakýchkoliv viditelných vad, které jsou zjevné při zvětšování rastrového obrazu (viz obr. 13), vytisknout stejný SVG obraz na laserové tiskárně s vysokým rozlišením apod. „Škálovatelnostÿ v druhém významu
2.3 Jazyk SVG
24
znamená možnost skládat SVG dokument z jiných samostatných dokumentů, z čehož vyplývá znovupoužitelnost obrázkových komponent.
Obr. 12: Originální rastrové nebo vektorové logo
Obr. 13: Detail při zvětšení vektorového a rastrového loga
• Vector (vektor, orientovaná úsečka) – Tento překlad nelze chápat doslova, protože SVG grafika se neskládá jen z vektorů ve významu úseček, ale i z dalších matematicky definovatelných objektů vytvořených pomocí úseček a křivek, kterým jsou přiřazeny příslušné atributy. Navíc však SVG může obsahovat i bitmapovou grafiku. • Graphic (grafika, obrázek) – Ač se může zdát na první pohled nepochopitelné, že značkovací jazyk může vytvářet obrázky, SVG skutečně, na rozdíl od jiných XML jazyků, které nesou většinou jen textovou informaci, popisuje grafiku. Jednotlivé SVG elementy odpovídají grafickým objektům, případně operacím nad nimi. Zdrojový kód je jednoduše editovatelný, a proto je SVG přímo předurčené k dynamickému generování grafiky. Prohlížeč si takovýto text popisující vektorový obraz interpretuje a uživateli ho zobrazí už jako obrazový vjem (Eisenberg, 2002). Toto vše dává internetové grafice v podání SVG téměř ničím neomezené možnosti, jak kreativity, tak i uživatelské interaktivity, neboť je možné s jednotlivými grafickými objekty libovolně nakládat (transformovat je, odkazovat se na ně, apod.). 2.3.2
Vývoj a historie normy SVG
Konsorcium W3C začalo od roku 1999 pracovat na vývoji formátu pro vektorovou grafiku, určenému k výměně obrazové informace na Internetu. Vývoj se již na samém
2.3 Jazyk SVG
25
začátku rozdělil do dvou částí: první směřuje do oblasti technické grafiky (letecký, automobilový, zbrojní či elektrotechnický průmysl atp.) a jejím odrazem je formát WebCGM (verze dřívějšího CGM – Computer Graphic Metafile, doplněná o odkazy a další prvky spojené s internetovým využitím). Druhou a podstatně obecnější větví vývoje je oblast webového publikování grafické informace, a to především v oblasti reklamy a obchodu, a obecně všude tam, kde je zapotřebí dynamická či interaktivní grafika zatěžující minimálně systémové zdroje. Z této potřeby se zrodil velmi dynamicky se šířící formát SVG (Krejčí, 2003). Po prvním návrhu specifikace zveřejněném 19. ledna roku 2001 a po řadě diskuzí, devíti pracovních návrzích a běžném schvalovacím procesu vydala organizace W3C 5. září téhož roku tzv. doporučení – finální normu W3C Recommendation SVG 1.0, čímž ji oficiálně zpřístupnila pro všeobecné použití. Vývoj nezačínal úplně „od nulyÿ, ale byly využity zkušenosti z již dříve vypracovaných návrhů specifikací pro vektorovou grafiku. SVG měl zdědit to nejlepší z jazyků PGML (na PostScriptu založený Precision Graphic Markup Language) a VML (Vector Markup Language). O nově vznikající perspektivní standard měli zájem giganti z komerční sféry, kteří se pod hlavičkou W3C podíleli na jeho vývoji. Například Adobe Systems, AOL/Netscape, Apple, Canon, Corel, Kodak, Ericsson, Hewlett-Packard, IBM, Macromedia, Microsoft, Nokia, Oracle, Quark, Sun Microsystems, Xerox, ZoomOn a spousty dalších. Ze zájmu a významu těchto společností bylo pochopitelné, že tento formát musí jistě čekat slibná budoucnost. Tzv. „Pracovní skupina SVGÿ i nadále pokračovala ve vývoji a tentokráte jen po třech pracovních návrzích a běžném schvalovacím procesu W3C vydala dne 15. ledna roku 2003 další nové doporučení – SVG 1.1 Specification. Ve srovnání se svým předchůdcem nepřináší v podstatě žádné nové funkce, ale zásadní změnou nově doporučené verze je především tzv. modularizace používající jako formalismus (konvenci) W3C XML Schema spíše než DTD (Document Type Definition – definice typu dokumentu). Jde o dekompozici předchozí verze normy SVG 1.0 a opravených chyb v této verzi do skupiny abstraktních modulů: po vzoru XHTML pracovní skupina okolo SVG rozdělila jeho DTD na více komponent. Tyto specifické funkční jednotky mohou být spojovány mezi sebou a i s moduly jiných standardů založených na XML. Lze tím tedy integrovat možnosti kaskádových stylů pro stylizaci textů a jiných prvků, animace pomocí standardu SMIL, odkazy podle standardu XLink, graficky atraktivní formuláře podle XForms, sazbu matematických a chemických vzorců podle MathML a CML a další. Takováto modulární koncepce s sebou přináší jednu nespornou výhodu, kterou je možnost kombinovat na bázi tzv. profilu vybrané komponenty z množství součástí celého standardu. Tato změna byla provedena především proto, že o využití SVG mají zájem výrobci méně výkonných mobilních zařízení, na kterých jsou velmi omezené zdroje – tímto vylepšením je možno uvedené omezené zdroje více šetřit. Druhou novinkou spojenou s uvedeným standardem je použití právě uvedených modulů k vytvoření SVG Mobile Profiles. Tímto byly definovány dva profily za-
2.3 Jazyk SVG
26
měřené pro použití na mobilních zařízeních. Jsou jimi SVG Tiny pro multimediální telefony a SVG Basic pro PDA (Personal Digital Assistant – kapesní počítač). Nutno zde uvést, že tím, že obě verze Mobile SVG jsou striktní podmnožinou samotného SVG a navíc SVG Tiny je podmnožinou SVG Basic, lze snadno vytvářet řešení pro využití téže grafiky na různých platformách a zařízeních (Web, mobilní telefon, kapesní počítač atd.). Souběžně se specifikací 1.1 se začala také rozvíjet specifikace SVG Print. Zatím je již od července roku 2003 jen ve stádiu prvního pracovního návrhu. Jak už sám název vypovídá, bude se jednat o možnost využívat bohaté grafické prvky v kombinaci s kvalitní typografií v souvislosti s archivací a v prostředí tisku. Během dokončovacích prací na poslední verzi normy se již začalo s přípravami norem dalších – SVG 1.2 a SVG Mobile 1.2. Obě jsou zatím jen ve stádiu pracovního návrhu – samotná SVG 1.2 v devátém a SVG Mobile v sedmém. Nejvýraznějším zlepšením, oproti předchozí normě, je zejména komponentová architektura RCC (Rendering Custom Content) a v současnosti nejvíce požadovaná vlastnost, kterou je schopnost automatického zarovnávání toku textu. Díky právě této nové vlastnosti se již objevily nejen úvahy o možném postupném přechodu ze psaní stránek v (X)HTML na kompletní psaní v SVG, ale i několik prakticky realizovaných pokusů (W3C, 1999–). Od září roku 2004 ve spolupráci pracovních skupin SVG (Graphics Activity) a CSS (Style Activity) prošel čtyřmi pracovními návrhy nově vyvíjený jazyk sXBL (SVG’s XML Binding Language), který umožňuje vázat funkčnost grafického jazyka SVG na libovolné elementy XML. Jazyk sXBL umožňuje pomocí vlastností SVG definovat prezentaci a chování elementů, které nepatří do jmenného prostoru SVG – pomocí sXBL tedy lze zkracovat často opakované konstrukce, ale také třeba vytvořit svůj vlastní jazyk nad SVG. Podle záměrů W3C má být sXBL prvním speciálním případem budoucího obecného vazebného jazyka (pracovní název XBL 2.0), který už nebude určen pouze pro SVG (Ferraiolo, Hickson, Hyatt, 2005). Podstatné části složitého vývoje tohoto standardu, které jeho současnou podobu ovlivnily nejvíce, jsou zachyceny na obrázku 14. 2.3.3
Uplatnění formátu SVG
Prostředí Internetu je v posledních několika letech jednou z nejsledovanějších oblastí, poněvadž tímto směrem se obrací mnoho lidí za účelem vzdělání a získávání různých informací, komunikace, obchodu a mnoha dalších. Vektorová grafika obecně má mnoho vlastností a výhod, které jí přímo předurčují oblasti, kde bude nejvíce využívána. Stejně tak je tomu s SVG grafikou, která ještě rozšiřuje dosavadní přednosti vektorové grafiky – SVG svými vlastnostmi může vyhovět libovolnému odvětví, které se na Internetu prezentuje, ať už je to v komerční nebo nekomerční sféře. Před vznikem SVG byla v drtivé většině grafika na Webu pouze bitmapová, je tedy zřejmé, že Internet nějakou vektorovou potřeboval. I když již dříve byly konsorciem W3C vyvíjeny čtyři vektorové grafické standardy, W3C je dále nerozvíjí
2.3 Jazyk SVG
Obr. 14: Schéma vývoje norem SVG
27
2.3 Jazyk SVG
28
neboť každý z nich byl určen pro specifický okruh používání nebo nebyl univerzální jako SVG. Jedná se o standardy Web Schematics a DrawML pro diagramy, PGML (Precision Graphics Markup Language) pro grafiku mající blízko k DTP (Desk Top Publishing – publikování na stole) a VML (Vector Markup Language) pro jednoduchou grafiku. Z nepříliš dlouhé historie formátu SVG vyplývá, že s jeho masivním využitím v soudobém webovém prostředí nelze počítat, ale již od prvního zveřejnění normy jsou patrné aktivity deklarující snahu o všeobecnější rozšíření tohoto progresivního standardu. Pravděpodobně nejvýznamnější aktivitou v tomto směru je každoroční pořádání mezinárodní konference věnující se různým oblastem uplatnění SVG v komerční i nekomerční sféře s názvem SVG Open, která se letos v říjnu bude konat popáté. Na tuto konferenci se sjíždějí profesionálové z oblasti nejen grafického průmyslu z celého světa a prezentují zde své myšlenky, návrhy a již realizované komponenty jakýmkoliv způsobem pracující s SVG. V některých oblastech již je SVG poměrně hojně využívaná nebo se její použití velmi dynamicky rozšiřuje. Jedná se zvláště o odvětví mobilní komunikace. Většina výrobců mobilních telefonních přístrojů i nástrojů pro tvorbu obsahu a aplikací pro mobilní telefony totiž již v minulosti deklarovala podporu otevřeným standardům W3C (většina z nich je členem W3C, může se tedy účastnit vývoje), což by mohlo znamenat, že v budoucnu s multimediálním mobilním telefonem bude možné využívat multimediální obsah bez ohledu na výrobce a model telefonu. Další oblastí, kde je důležitá práce s vektorovými daty jsou programy pro konstruování (CAD – Computer Aided Design) pro architekty a mapové programy (GIS – Geographic Information System) pro urbanisty a meteorology. Zde si postupně SVG získává své místo, vyjma prezentování na Internetu, především jako formát přenositelný mezi jednotlivými aplikacemi, kde každá má svůj vlastní nativní formát. Významnou roli by mohl sehrát v tisku a pre-pressu (předtisková příprava), o čemž svědčí vývoj specifikace k tomu určené – SVG Print. Zajímavou oblastí, kde SVG svým uplatněním může znamenat velký krok kupředu, je statistika a s ní spojená například demografie zabývající se studiem vývoje obyvatelstva. Zde se nabízí využití SVG zejména k on-line webové vizualizaci získaných dat do různých typů grafů. Dnes již spousta portálů generuje statistické grafy, ale v drtivé většině je výsledkem jejich generování bitmapový obrázek. Globálně se dá říci, že rozvoj uplatnění formátu SVG ke zmíněnému účelu je v současnosti spíše ve stádiu návrhů a různě zdařilých pokusů o jejich realizace. Jedním z volně dostupných pokusů, který slouží spíše jako demonstrace toho, že je skutečně možné SVG k vytvoření grafu použít, je Chart and Graph demo společnosti Adobe dostupný na jejích webových stránkách v sekci SVG Zone3 . V České republice je jedním z mála zástupců implementujících normu SVG do svého oboru činností Český statistický úřad, na jehož webových stránkách 4 je 3 4
možné vidět animované a interaktivní statistické grafy znázorňující populační vývoj v letech 1945-2003 a projekci obyvatelstva do roku 2050. Zúžíme-li pohled na univerzitní projekty a univerzitní webové informační systémy a ostatní aplikace do nich integrované, zjistíme, že aktuální situace v České republice poskytuje mnoho příležitostí, jak zde SVG uplatnit, neboť prakticky v tomto směru žádné znatelné snahy prozatím vyvinuty nebyly. SVG bezesporu patří mezi ty formáty založené na XML, které mají největší naději, že se stanou všeobecně akceptovaným standardem, neboť stále roste potřeba univerzálního a všestranného vektorového formátu jak pro Web, tak i pro různé další oblasti využití.
3 METODICKÁ VÝCHODISKA
3
30
Metodická východiska
Vymezený cíl práce předpokládá rozčlenění metodického postupu řešení do několika úzce souvisejících etap. Výchozím předpokladem je chápání SVG jako jedné z aplikací XML a v souvislosti s tím zjištění možností začlenění SVG grafiky do webového prostředí. Důležité je vyhodnotit grafický potenciál jazyka a také aplikační podporu v oblasti zobrazování a generování SVG grafiky. Nejdůležitější fází je pak na základě získaných poznatků diskutovat vhodnost SVG k prezentaci statistických dat ve formě grafů.
3.1
SVG jako aplikace XML
SVG, jakožto aplikace univerzálního a platformově nezávislého nástroje pro uchovávání a výměnu dat – XML, otevírá zcela nové možnosti práce s grafikou. Stejně tak, jako libovolná XML data mohou být prostřednictvím jednoduchých XSL transformací převedena na SVG grafiku, může být i naopak samotná SVG grafika dále zpracována aplikacemi schopnými zpracovávat XML data. Podobně jako veškerá další XML data nabízí i SVG oproti binárním formátům tu výhodu, že každou informaci je možné prohlížet i provádět její změny pomocí libovolného textového editoru. Atributy v celém dokumentu musejí být podle standardu XML uvedeny v uvozovkách a musejí mít uvedenu svou hodnotu. Všechny prázdné i neprázdné elementy musejí být uzavřeny. Elementy i názvy atributů musejí být zapsány malými písmeny. Na následující ukázce vzorového SVG dokumentu (vizuální podoba viz příloha A) budou dále podrobněji rozebrány jeho jednotlivé části: <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc> Toto je modrý kruh s červeným okrajem <defs> <style type="text/css"> Ahoj světe!
3.1 SVG jako aplikace XML
31
Právě proto, že SVG, jak již bylo několikrát zmíněno, je aplikací XML, na prvním řádku by měla být uvedena počáteční XML deklarace (zvláštní případ zpracovávající instrukce). Ta informuje zpracovávající aplikaci o tom, která verze XML bude použita (identifikátor verze je povinný) a jaká bude pro dokument použita znaková sada (atribut encoding je nepovinný – pokud není uveden, jako implicitní znaková sada je brána Unicode). V hlavičce XML souboru se používá ještě třetí nepovinný atribut standalone nabývající hodnot yes nebo no: standalone="yes" znamená, že XML soubor je nezávislý na případném DTD, tj. bez něj obsahuje stejné údaje, jako s ním a v případě standalone="no" obsah XML souboru závisí na DTD (pokud atribut není specifikován, zpracovávající aplikace předpokládá hodnotu "no"). Tento atribut má význam v případě, že v DTD jsou uvedeny deklarace entit, nebo deklarace výchozích hodnot atributů – pokud nebude mít XML procesor k dispozici soubor obsahující takové externí DTD, bude to ovlivňovat obsah samotného dokumentu zpracovávaného XML procesorem. Na druhém řádku je uvedena definice typu dokumentu (DTD). Definiční soubor DTD je samostatný dokument, ve kterém je uložena sada pravidel definujících objekty a atributy, a specifikujících, jakou strukturu má mít správný dokument uvedeného typu. Za klauzulí !DOCTYPE je uveden název kořenového elementu dokumentu (v tomto případě se tedy jedná o element svg). Za klíčovým slovem PUBLIC je uveden veřejný identifikátor typu dokumentu a jako poslední je uveden systémový identifikátor – adresa URL, na které je umístěn samotný definiční soubor (DTD, XML Schema a mnoho dalších). Mezi tagy <svg> a se již nachází vlastní tělo dokumentu skládající se s elementů definujících jednotlivé vektorové objekty (kružnice, mnohoúhelníky, atd.). Atributy width a height u kořenového elementu <svg> určují šířku a výšku, atributy xmlns určují prostory jmen pro dokument SVG. Jmenných prostorů může být uvedeno více. První uvedený prostor jmen je aplikován na všechny elementy a atributy dokumentu, není-li pro ně uveden jiný prostor jmen. Dovnitř vlastního obsahu obrázku lze mezi tagy <desc> a vložit popis dokumentu. Mezi tagy <defs> a lze definovat kaskádové styly a objekty. Pokud je potřeba definovat kaskádové styly do externího souboru, tak vložením řádku s instrukcí před definici typu dokumentu (v tomto případě odsuneme na třetí řádek) připojíme stylopis k dokumentu. Na uvedeném příkladu je nakreslen kruh pomocí elementu . Atributy elementu specifikují středové souřadnice x a y (atributy cx a cy) a poloměr (atribut r). Bod (0,0) je levý horní roh obrázku. X-ová souřadnice se zvyšuje vodorovným pohybem doprava; Y -ová svislým pohybem směrem dolů. Umístění kruhu a jeho poloměr je strukturní část kresby. Struktura říká, co vlastně na obrázku je (jaké tvary mají jednotlivé prvky). Barva, kterou je na tomto obrázku kruh (prvek) vyplněn a ohraničen je část prezentační. Jak je obvyklé u aplikací XML, kvůli maximální flexibilitě je zde oddělena struktura od vzhledu. Prezentační informace je obsažena v atributu style. Stejně tak u textu je strukturní informací umístění prvku a jeho textový obsah a informace o barvě a velikosti písma
3.2 Integrace SVG grafiky do webového dokumentu
32
je informací prezentační. Ta je v tomto případě uložena mimo element v kaskádovém stylu v samostatné třídě (class), na kterou je v elementu odkazováno. Ačkoliv drtivá většina SVG dokumentů by měla využívat stylů k prezentačním informacím, SVG připouští možnost specifikovat tuto informaci v podobě prezentačních atributů. Místo zápisu:
lze zapsat každou z vlastností jako atribut:
3.2
Integrace SVG grafiky do webového dokumentu
Aby bylo možné SVG nějakým způsobem reálně použít na Internetu a zobrazit jej, existuje několik způsobů, jak může být SVG obsah definován ve webovém dokumentu. K dispozici jsou tyto tři základní možnosti (Eisenberg, 2002): • jako izolovaná SVG stránka, • jako vestavěný element v HTML nebo XHTML stránce, • nebo může být integrován v XHTML nebo XML dokumentu spolu s jinými XML dialekty (velmi často s MathML). SVG jako izolovaná stránka První případ použití standardu SVG ve webovém dokumentu je realizace vlastního zdrojového kódu SVG grafiky v jednom jediném samostatném souboru. Následující příklad ukazuje tuto možnost integrace SVG do webového dokumentu (vizuální podoba viz příloha A): <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc> Toto je modrý kruh s červeným okrajem <defs> Ahoj světe!
SVG jako vestavěný objekt Druhou možností jak použít SVG grafiku ve webovém prostředí je vložení externího souboru obsahujícího vlastní SVG zdrojový kód do (X)HTML stránky prostřednictvím k tomu určené (X)HTML značky. Jedná se vlastně o odkazování se speciální
3.2 Integrace SVG grafiky do webového dokumentu
33
značkou na dokument odpovídající předchozímu případu použití SVG na webu. Následující ukázka tento případ demonstruje (vizuální podoba viz příloha A): Externí SVG obrázek v HTML stránce
Toto je nadpis v HTML
Externí SVG soubor pokus.svg je samostatná SVG stránka a ta je pomocí atributu data (X)HTML elementu
