Průvodce SVG – zobrazení vektorové grafiky v prohlížeči Opera

14. dubna 2005

•

V tomto článku se podíváme podrobněji, jak to vlastně je s podporou nativního zobrazování vektorové grafiky SVG-XML v osmičkové verzi webového prohlížeče Opera. A abychom uspokojili všechny „nevěřící Tomáše“, tak si rovnou pár příkladů vyzkoušíme.

O co tedy vlastně jde? Budu postupně probírat nejasnosti, jež se objevily v diskuzi k předchozímu článku. Pokusím se přehledně shrnout důležitá fakta a přesně vysvětlit, proč je Opera 8 skutečně prvním webovým prohlížečem s podporou normy SVG Tiny.

Kdo je vlastně první?

V předchozím článku jsem napsal: Prvním webovým prohlížečem s úplnou podporou formátu SVG Tiny (tedy včetně SMIL animací!) není ani Mozilla, ani Konqueror, nýbrž… Opera!

Pro toto tvrzení existuje hned několik důvodů. Mozilla (a Firefox) není první jednoduše proto, že implementace SVG v ní je zatím zoufale nekompletní (lokální kopie), to je realita, kterou nezmění ani mé sympatie k tomuto projektu. I o programu Amaya jsme již psali. Tento program bohužel v současné podobě není použitelný pro běžné laické uživatele internetu a jeho implementace SVG rovněž není úplná. Co se týče prohlížeče Opera 8b3, důkazem kvality implementace normy SVG Tiny v tomto prohlížeči budiž zkouška na vlastní oči.

Norma SVG

Asi bude lépe, když si nyní připomeneme, co přesně představují pojmy SVG Basic (SVGB) a SVG Tiny (SVGT).

Oba profily byly vyvinuty jako podmnožiny normy SVG (někdy se uvádí též SVG Full) speciálně pro potřeby dynamicky se rozvíjející oblasti mobilních počítačových a komunikačních zařízení (PDA, mobily a podobně), která v současnosti mají oproti osobním počítačům výrazně nižší výpočetní výkon a kapacitu paměti.

Podle mého názoru lze rozdělení standardu SVG Full výborně použít taktéž při programování prohlížečů – kompletní SVG má obrovské schopnosti, kterým odpovídá složitost algoritmů, jež je nutné napsat. Oproti tomu, naprogramovat SVGT je relativně snadné…

Profil SVG Basic je subset SVG normy určený primárně pro PDA – vypuštěny jsou filtry a zjednodušena je implementace ořezových cest.

V profilu SVG Tiny určeném pro mobilní telefony k nepodporovaným prvkům přibývají skripty, přechody barev, výplňové vzorky, průhlednost, ořezávání a maskování kompletně, elementy tspan, tref (zůstává v podstatě pouze základní text), CSS formátování a symboly.

Jak roste výkonnost hardwaru, došlo ve verzi SVG Tiny 1.1 k mírnému rozšíření grafických schopností – přidána byla mimo jiné i průhlednost (ale jen na úrovni skupin). Rovněž schopnosti SVG Basic 1.1 se poněkud rozšířily o některé filtry.

Nativní SVG v Mozille

Někteří již možná četli komentář k jednomu z předcházejících článků , kde se v odstavci „Nativní podpora ve webových prohlížečích“ a „Výsledná realita“ můžete dozvědět více.

Největší mezerou projektu Mozilla SVG je v současnosti především absence SMIL animací. Pro zájemce může být zajímavá aktuální odpověď prezidentky Mozilla Foundation na přímý dotaz ohledně podpory SVG (viz Slashdot: Mozilla Foundation Chief Mitchell Baker Replies).

Jako polehčující okolnost mohu vývojářům Mozilly přiznat to, že si vytyčili poměrně vysoký cíl, totiž integraci XHTML s SVG v jednom jediném XML souboru (objektovém stromu). Využívá se přitom normalizovaného mechanizmu přepínání jmenných prostorů XML. Myslím, že i bez znalosti XML následující příklad vysvětluje vše:

<?xml version=“1.0″?>
<html xmlns=“http://www.w3.org/1999/xhtml“
      xmlns:svg=“http://www.w3.org/2000/svg“ >
<head>
<style>
    circle:hover {fill-opacity:0.9;}
</style>
</head>
<body>
   <p>SVG uvnitr HTML</p>
   <p>SVG uvnitr HTML</p>
<svg:svg>
    <svg:g style=“fill-opacity:0.7;“>
      <svg:circle cx=“6cm“ cy=“2cm“ r=“100″
        style=“fill:red; stroke:black; stroke-width:0.1cm“
        transform=“translate(0,50)“ />
      <svg:circle cx=“6cm“ cy=“2cm“ r=“100″
        style=“fill:blue; stroke:black; stroke-width:0.1cm“
        transform=“translate(70,150)“ />
      <svg:circle cx=“6cm“ cy=“2cm“ r=“100″
        style=“fill:green; stroke:black; stroke-width:0.1cm“
        transform=“translate(-70,150)“/>
    </svg:g>
</svg:svg>
   <p>SVG uvnitr HTML</p>
</body>
</html>

Něco podobného umí v současnosti krom SVG-Mozilly už jen Amaya.

Podpora SVG ze strany Microsoftu

V diskusi se objevila i zmínka o implementaci v Microsoft Internet Exploreru. Podle mně známých faktů, o kterých jsem v předchozích článcích rovněž již psal (viz „Desktop SVG“ a „XAML“), zodpovědně prohlašuji, že dotyčná firma, bohužel, s nejvyšší pravděpodobností SVG v další generaci MSIE (OS Longhorn) podporovat nebude. Důvody, kterými to její lidé vysvětlují, jsou sice poněkud nesmyslné, ale není to poprvé, co něco podobného v počítačové branži zažíváme.

Opera 8 – reálné zobrazení interaktivní vektorové grafiky SVG

Především znovu opakuji: „Ano, Opera 8 skutečně umí vykreslit všechny grafické a animační prvky obsažené v normě SVG Tiny 1.1.“ Než budete číst následující odstavce, ještě jednou tedy připomínám definici SVG Tiny, uvedenou výše v tomto textu.

Omlouvám se čtenáři, který v diskusi k předchozímu článku přirovnává betaverzi Opery 8 k vývojovému buildu Mozilly, ale musím být zásadně proti. Implementace SVG v projektu Mozilla, jak už jsem zmínil výše, je v současnosti úplně někde jinde, zatímco Opera 8 již nyní disponuje prověřeným zobrazovacím jádrem firmy Ikivo s implementací celé normy SVG Tiny 1.1.

Co se týče nestability Opery 8b3 – skutečně občas dochází k pádům programu – týká se to především animací, které využívají prvky mimo SVG Tiny (jako třeba textury, ořezávání, maskování). To snad lze betaverzi odpustit. Některé funkční animace z našeho kurzu:

demonstrace parametrů animačních elementů
vliv atributu „additive“
vliv atributu „combine“
interaktivní spouštění animací
skoková vs lineární animace
řízení zrychlení
rolování
animace kružnic – kombinace animačních prvků

Animace písmenek

Tato animace písmenek, kterou již znáte z jednoho článku našeho výukového seriálu SVG, původně obsahovala nekompatibilní prvek tspan a průhlednosti – to vše jsem odstranil a nahradil prvky text bez průhlednosti.

Specifikace SVG Tiny a Basic podrobně

Speciálně pro čtenáře Intervalu jsem ještě sestavil přehlednou tabulku, jež podrobněji ukazuje, které vlastnosti SVG jsou vypuštěny v podmnožinách SVGT a SVGB. Upozorňuji, že výčet není zcela vyčerpávající, obsahuje to, co jsem považoval za nejdůležitější. Úplnou informaci naleznete samozřejmě v originální specifikaci W3C.

Vypuštěné vlastnosti SVG v profilech SVG Tiny 1.1 a Basic 1.1	SVG Basic	SVG Tiny
„symbol“	ano	ne*
„use“	ano	ano
CSS	ano	ne
vektorové tvary	ano**	ano**
text umístěný na křivce, ‚tspan‘, ‚tref‘	ano	ne
značky	ne	ne
přechody a vzorky	ano	ne
ořezávání, maskování	částečně	ne
atributy „opacity“, „fill-opacity“, „stroke-opacity“	ano	ne
atribut „opacity“ na úrovni skupin (prvek „g“)	ano	ano
filtry	částečně	ne
odkazy	ano	ano***
skriptování	volitelně	ne

* I když SVGT neumí symboly, přesto můžete prvky pomocí „use“ použít vícenásobně (pokud je odkazovaný prvek animovaný, měly by se samozřejmě pohybovat i všechny jeho instance).
** Příkaz „path“ je podporován mimo vykreslování eliptických výsečí („A“, „a“).
*** Nelze se odkazovat na část (výřez) SVG grafiky.