SVG – technologie 21. století pro web

8. prosince 1999

•

Pod záštitou W3C se spojili největší počítačoví experti z celéhosvěta a po více jak dvouleté práci nám předkládají technologii 21. století pro tvorbu webové grafiky pod názvem „Scalable Vector Graphics“ (SVG). V současné době je vypracován v pořadí již 6 návrh Scalable Vector Graphics, který je určen k veřejnému posouzení.

V seznamu firem zúčastněných ve W3C SVG komisi jsou takové „drobounké a bezvýznamné“ společnosti jako IBM, Microsoft, Apple, Xerox, Sun Microsystems, Hewlett – Packard, Netscape, Corel, Adobe, Quark či Macromedia, které přislíbili podporu tomuto nejnovějšímu vektorovému grafického formátu ve svých programech. Někteří z nich – jako je IBM a Corel, již dokonce zahájili distribuci veřejných beta verzí prohlížecích SVG programů. Navíc – oba producenti současných nejrozšířenější browserů (Microsoft a Netscape) zároveň přislíbili podporu SVG v nejbližší době.

Co je to Scalable Vector Graphics?

SVG je standard vektorového grafického formátu, který je napsaný v XML a který slouží k definici dvojrozměrné grafiky. Právě skutečnost, že je psaný v XML představuje široké možnosti a bezesporu obrovské výhody, které ještě podrobně popíšeme níže. SVG bere v úvahu několik hlavních typů grafických objektů – vektorové grafické tvary (tj. přímky, křivky a jejich výplně), obrázky, stupňované výplně, filtry, text apod.

Grafické objektu můžou být v SVG dokumentech seskupovány, stylizovány, přetvářeny a skládány do výše uvedených objektů. Scalable Vector Graphics můžete do vašich www stránek aplikovat dvěma způsoby. V prvním případě můžete vložit SVG soubory do HTML nebo XML použitím <embed> tagu. Druhá možnost je užívání SVG jako samostatného typu dokumentu.

SVG dále nabízí možnost vložit do SVG souborů bitmapové formáty použitím jednoduchého <image> tagu. To znamená, že pokud budete používat vektorový grafický formát SVG pro www stránky nejste tak omezení jen na vektorovou grafiku, nýbrž můžete užívat i stávajících bitmapových grafických formátů, které jednoduše vložíte do SVG souboru.

Jaký bude přínos SVG grafiky?

Webové stránky můžou vypadat graficky mnohem lépe, třeba jako stránky magazínu, od DTP převzatými typografickými efekty a s perfektním umístění mnoha elementů stránky. Hlavně ale díky použití Scalable Vector Graphics se grafika na www stránkách bude zobrazovat správně i při různých rozlišení monitoru, na všech platformách od nejmenších přenosných zařízení přes kancelářské monitory až po specializovaná tiskařská studia budou dokumenty s SVG menší, více interaktivní apod.

V dnešní době se web skládá z obrázků, které jsou vytvořeny a prezentovány jako GIF, JPEG či PNG což jsou všechno soubory bitmapového charakteru, jehož podstatou je tzv. rastr – znamená to, že informace je v souboru ukládána pro každý pixel a obrázek se zobrazuje ve své pevné velikosti. Avšak naproti tomu SVG, tak jako jiná vektorová grafika má v sobě obsažena informace pro kreslení čar či křivek a náplni těchto objektů, která je ve chvíli zobrazení převedena na rastrový formát a to v požadované velikosti.

Výhody SVG grafiky

Volitelná velikost SVG obrázku – bitmapová grafika může – když je poprvé vytvořena – vypadat dobře, ale problémy nastávají v případě, když je zobrazována na různých druzích monitorů a v různých velikostech nebo když má tištěný obrázek rozdílnou velikost od originálu. V takovém případě je kvalita bitmapové grafiky velmi daleko od dokonalosti. Ale v SVG můžete měnit velikost podle potřeby bez obav o zhoršení kvality obrázku. Výhodu libovolné velikosti vektorového obrázku oceníme, především při potřebě získání detailů jednotlivých sekcí obrázku.

Styly – s vektorovou grafikou můžete používat celou řady různých stylů; například text v schématech či v grafech může mít nastavený přesný font nebo barvu atd.

Menší velikost – vektorové obrázky budou ve stejném případě po kompresi podstatně menší než jejich ekvivalent v bitmapové podobě, což se projeví rychlejším a pohodlnějším načítáním www stránek při použití SVG formátu.

Hierarchické seskupování XML – pokud jsou schémata nebo grafy prezentovány vhodným způsobem, tzn. že využívají výhody hierarchického seskupování XML, jsou snadněji opravitelné, vyhledávací stroj může najít podle zadaných kritérií – které jsou předem definovány – jakýkoliv text obsažený v dokumentu, což se může hodit zejména u rozsáhlejších dokumentů u nichž by optické hledání zabralo spoustu drahocenného času.

Kompatibilita – další výhodou je, že SVG grafika je napsaná v XML, což znamená, že SVG jazyk pro vektorovou grafiku nám zajistí plnou kompatibilitu s jinými XML aplikacemi a budeme moct jej užívat ve spojení s jinými XML sadami tagů, které patří například XHTML, MathML, atd.

Role CSS – kaskádovací styly hrají důležitou úlohu v SVG grafice zejména při kontrolování, například u použitých fontů, barev čar a výplní a jiných aspektů zobrazení. Právě toto dovolí designerům www stránek opětovně používat stejnou grafiku na různých stránkách a přestylizovaní grafických objektů.

Interaktivita – obrázky vytvořené ve vektorovém formátu pro grafiku SVG mohou být dynamické a interaktivní. A to díky Document Object Model (DOM) pro SVG, který umožní přímé a výkonné grafické vektorové animace přes skriptování (Ve skutečnosti se jedná o tentýž model, který je již obsažen v obou hlavních prohlížečích ve verzích 4 a vyšších ve spojení s HTML).

Bohaté nastavení událostí, takových jako např. „Onmouseover nebo Onclick“ může být přiděleno ke konkrétnímu SVG grafickému objektu, což nám tedy umožňuje pomocí tzv. Document Object Model (DOM) aktivně ovládat SVG grafiku. Znamená to, že pomocí pouhého Javascriptu můžeme manipulovat s komponenty SVG stránky při jejím běhu. Jaký to má pro význam? Všechny vlastnosti stylů (barva výplně, šířka tahu, neprůhlednost atd.) pro dané všechny elementy mohou být ovladatelné pomocí Javascriptu.

Kdy si to zkusíme?

Jestliže jste uživatelem Windows, můžete dostat volně šiřitelnou SVG prohlížečku aplikaci (a nějaké příklady SVG souborů) z IBM Alphaware. Prohlížeč založený na Javě je také volně stažitelný od CSIRO, kde je také publikován zdrojový kód pro případ, že chcete vyzkoušet část prohlížeče na jiné platformě. Společnost Corel rovněž nezaspala a vytvořila veřejnou betaverzi SVG pluginu pro uživatele CorelDRAW 9. Adobe se také nechalo slyšet, že provádí beta testování podobného plug-inu pro Illustrator 8.01, ale tato betaverze není zatím bohužel veřejně dostupná. Uživatelé Maců nemají v této chvíli štěstí, protože dosud nebyla oznámena žádná veřejná beta kompatibilní SVG prohlížečky. Na betaverze SVG plug-inů pro prohlížeče si musíme ještě chvíli počkat, protože údajně procházejí testováním. Pokud se chcete dozvědět o SVG formátu více, navštivte oficiální stránky konsorcia W3C k SVG.