Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok:

Transkript

1 Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Akademický rok: Studijní obor: Výpočetní technika a informatika Technologie SVG aktuální standard webové vektorové grafiky Autor: Tereza Skleničková Vedoucí bakalářské práce: PaedDr. Petr Pexa

2 Abstrakt: Cílem této práce je popsat technologii SVG a na konkrétních příkladech demonstrovat praktické využití webové vektorové grafiky. Práce bude obsahovat informace o problémech se zobrazením v prohlížečích a nabídne přehled možných editorů, které můžeme pro vytváření webové vektorové grafiky používat. K praktickému využití této technologie je důležité znát sadu jednoduchých technik, návodů k vytváření křivek a znalost vlastností základních geometrických tvarů a různých efektů Klíčová slova Vektor, webová vektorová grafika, xml, bitmapová grafika, technologie SVG, historie a vývoj SVG, geometrické tvary, vlastnosti geometrických tvarů, textury, efekty, křivky, editory, podpora svg v prohlížečích, skalární vektorová grafika Abstrakt: Purpose of this paper is to describe SVG technology and demonstrate its practical using by particular examples. Document will contain informations about problems with displaying in browsers and offers survey of available editors, which we can use for work with web vector graphics.for practical use of this technology is important to know a set of easy techniques, instructions for creation of curves and knowledge of properities of basic geometrical shapes and various effects. Keywords Vector, web vector graphics, xml, bitmap graphics, SVG Technologies, history and development SVG, geometric shapes, characteristics of geometric shapes, texture, efects, behaviours, editors, support svg in web browsers, Scalable Vector Graphics

3 Zadání práce: V bakalářské práci bude komplexně zpracována aktuální technologie SVG pro tvorbu webové vektorové grafiky z pohledu webmastera-profesionála a bude provedeno porovnání s obdobnými technologiemi pro tvorbu webové vektorové grafiky (např. Macromedia Flash). Cílem bude vytvořit první ucelenou publikaci v ČR, zabývající se touto problematikou, včetně vytvoření sady praktických příkladů formou webové prezentace. Předpokládaný datum obhajoby: léto 2009

4 Úvod: SVG (z anglického Scalable Vector Graphics škálovatelná vektorová grafika) je značkovací jazyk a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Formát SVG by se měl v budoucnu stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Zatímco pro rastrovou grafiku je na Internetu formátů dostatek (např. GIF, PNG a JPEG), otevřený vektorový formát zatím na Internetu chyběl. SVG definuje tři základní typy grafických objektů: vektorové tvary (vector graphic shapes obdélník, kružnice, elipsa, úsečka, lomená čára, mnohoúhelník a křivka) rastrové obrazy (raster images) textové objekty Tyto objekty mohou být různě seskupeny, formátovány pomocí atributů nebo stylů CSS a polohovány pomocí obecných prostorových transformací. SVG též podporuje ořezávání objektů, alpha masking, interaktivitu, filtrování obrazu (konvoluce, displacement mapping, atd ) a animaci. Ne všechny SVG prohlížeče však umí všechny tyto vlastnosti. Cílem mé bakalářské práce je přiblížit rozdíly mezi bitmapovou a vektorovou grafikou, poukázat na výhody použití SVG souborů k tvorbě webové prezentace a v neposlední řadě přidám pár praktických příkladů využití SVG. Nedílnou součástí práce je samozřejmě pohled do historie techniky SVG, nezapomenu na základní primitiva a jejich vlastnosti, různé efekty a animace. Ráda bych se také zabývala některými editory a v neposlední řadě podporou SVG v prohlížečích.

5 Přehled literatury Doposud jsem čerpala informace výhradně z internetových zdrojů. Studovala jsem základy techniky svg, struktura dokumentu svg, elementy a jejich atributy. Viz: Použitá literatura 1) Dále mě zajímalo tvoření základních grafických primitiv(obejktů). Elementy: rectangle - obdélník (s možností zaoblených rohů) circle - kruh ellipse - elipsa line - jednoduchá čára polyline - lomená čára polygon - mnohoúhelník path - obecná plocha (cesta) Viz: Použitá literatura 2) Pro mě velice zajímavou kapitolou doposud byl článek o editorech, ve kterých se webová vektorová grafika vytváří. Autor článku nezapomněl na podporu v různých platformách a na rozdělení editorů podle uživatelského rozhraní a také funkčnosti nástrojů. Nabízí porovnání a nástin pracovního prostředí, funkcí a v neposlední řadě i nedostatky jednotlivých aplikací. Viz: Použitá literatura 3)

6 Analýza problému Východiska řešení Technologie SVG je zatím v oboru webové prezentace tématem, které vychází spíše jako seriály v diskusních či jiných portálech, kde si lidé sdělují své zkušenosti. V knižní podobě se vyskytuje spíše ojediněle. Online příruček je spousta a každá se zabývá dopodrobna různými technikami vytváření křivek, objektů, efektů nebo animací. Jak to již ve webové prezentaci chodí, fantazii se meze nekladou a proto myslím, že každý kdo se bude chtít s technologií SVG seznámit, jistě najde odvětví, které ho zaujme a obohatí jeho grafické zkušenosti. Dále pak práce nabídne srovnání s Flash, rozdíly v použití, konstrukci objektů, výhody a nevýhody použití obou technik. Metodika Hlavním cílem práce bude poskytnout bohatý přehled praktických příkladů a využití vektorové grafiky. Poukázat na zajímavosti a přednosti této techniky. Rozvržení: Úvodní část: bitmapová a vektorová grafika, xml, editory, základní struktura dokumentu Hlavní část: objekty, text, vlastnosti, efekty, animace Praktická část: sada praktických příkladů Závěr: shrnutí, poukázání na problematiku prohlížečů, srovnání s Flash, zdroje Co je již hotovo Nastudována základní struktura dokumentu SVG, povrchní přehled objektů a možností využité editorů. Co je třeba ještě udělat Seznámit se s konkrétními vlastnostmi objektů, efektů, použití animací. Seznámení s editory a naučit se je ovládat, vybrat nepraktičtější. Vytvořit sadu příkladů. Porovnání s Flash.

7 Použité zdroje: 1) Interval.cz: webdesign a e-komerce denně, [online] Datum aktualizace: Hejral, Martin ( ) [cit ]. URL: < 2) Interval.cz: webdesign a e-komerce denně, [online] Datum aktualizace: Hejral, Martin ( ) [cit ]. URL: < 3) Interval.cz: webdesign a e-komerce denně, [online] Datum aktualizace: Hejral, Martin ( ) [cit ]. URL: < 4) Root.cz[online], Datum aktualizace: Pavel Tišnovský ( ) URL: < 5) Wikipedie, otevřená encyklopedie, [online], Stránka byla naposledy editována v 23:51. URL: <