Budoucnost vektorové grafiky na webu, 3. část

Martin Hejral 2. března 2006

Další
článek Lenovo 3000 bude mít předinstalovaný Corel Small Business Center SDÍLET NA FACEBOOKU TWEETNOUT

Proč bychom měli kvůli vektorové grafice studovat hromadu nových nestandardních technik a postupů? Proč dělat věci dvojím způsobem? Proč ta schizofrenie, když nám stačí ty znalosti, které už máme dnes!

Implementace SVG v prohlížeči Opera 9

Devátou verzí a stupněm podpory standardu SVG Full 1.1 (samozřejmě vč. deklarativních SMIL animací) se Opera 9 stává absolutní technologickou špičkou! Více snad ani není co dodat. Třešničkou na dortu je navíc existence "mobilních" a "PDA" verzí Opery, které korektně podporují profil SVG Tiny 1.1. Což designérům umožní tvořit standardizovaný webový obsah přístupný jak z klasických stolních počítačů (Linux, Mac, PC), tak současně kupř. i z vašeho mobilu.

Z hlediska SVG je Opera 9 skutečně převratnou záležitostí. Uvedu teď stručně alespoň ty nejzajímavější funkcionality. Na rozdíl od Mozilly Firefoxu 1.6 má Opera 9 kompletní implementaci SMIL animací (už od verze 8!), funkční SVG fonty a v podstatě kompletní bitmapové filtry. Ve vykreslování jsou sice ještě nepřesnosti, ale berme v úvahu že se stále jedná o vývojovou verzi.

Deklarativní animace SMIL

Pár následujích příkladů nám demonstruje funkčnost animačních prvků SVG standardu. V Opeře verze 9 fungují samozřejmě i příklady z předchozí kapitoly o Firefoxu 1.5.

Tento efekt "roll-over" tlačítka je dosažen pomocí deklarativní SMIL animace (ukázka)

1. tlačítko prostě jen skokově mění barvu. (Atribut `begin` určuje událost na kterou se bude reagovat.) Podívejme se nyní na kód - jednodušší už to prostě být nemůže:

<rect x="20" y="60" width="88" height="31" fill="red" opacity="0.5">
<set attributeName="fill" to="green" begin="click"/>
<set attributeName="fill" to="violet" begin="mouseout"/>
</rect>

Ve 2. případě změna probíhá animovaně. U 3. buttonu se pomocí záměny SVG symbolu mění tvar i barva. (V aktivním stavu je tlačítko navíc pohyblivé.) Takto vypadá příklad grafiky vcelku:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Using SVG SMIL animation to create "roll-over" effect</title>
<defs>
<symbol id="normal">
<rect x="20" y="220" width="88" height="31" fill="red" opacity="0.5"/>
</symbol>
<symbol id="over">
<rect x="20" y="220" width="88" height="31" fill="cyan" opacity="0.5"/>
<rect x="30" y="218" width="68" height="35" fill="yellow" opacity="0.5"/>
<rect x="45" y="216" width="39" height="39" fill="green" opacity="0.5">
    <animateTransform attributeName="transform" type="rotate"
    values="0 64 235;40 64 235;0 64 235;-40 64 235;0 64 235"
    repeatCount="indefinite" begin="0s" dur="1s"/>
</rect>
</symbol>
</defs>


<rect x="20" y="60" width="88" height="31" fill="red" opacity="0.5">
    <set attributeName="fill" to="green" begin="click"/>
    <set attributeName="fill" to="violet" begin="mouseout"/>
</rect>


<rect x="20" y="140" width="88" height="31" fill="red" opacity="0.5">
    <animate attributeName="fill" values="red;red;red;magenta;white;green"
      begin="mouseover" dur="1s" fill="freeze"/>
    <animate attributeName="fill" values="green;white;violet;violet;violet"
      begin="mouseout" dur="1s" fill="freeze"/>
</rect>


<use xlink:href="#normal">
    <set attributeName="xlink:href" to="#over" begin="mouseover"/>
    <set attributeName="xlink:href" to="#normal" begin="mouseout"/>
</use>

</svg>

K rozpohybování animace SMIL není třeba žádného programování (ukázka)

Tento efekt dosáhneme velmi snadno a elegantně animováním ořezové masky bitmapového obrázku. Přesněji - ve skutečnosti se ořezová maska skládá ze tří dílů ve tvaru "hvězdy", z nichž každému udělíme pomocí SMIL trochu jiný druh rotace kombinovaný se změnou velikosti:

<path transform="translate(-100,-136)"
d="M161.2,136h-29.7 ...">
<animateTransform attributeName="transform"
type="rotate" values="0 100 136;360 100 136;260 100 136;360 100 136"
dur="1.4s" additive="sum" repeatCount="indefinite" />
</path>

Bitmapové efekty

Bitmapové filtry jsou již v testované betaverzi programu implementovány téměř na 100%.

Funkční bitmapové efekty (ukázka)

Opera 9 už umí i XSLT

Následuje ještě jedna efektní ukázka použití XSLT: Transformace zápisu šachové partie ve formátu ChessGML na formát SVG.

<game type="chess" variant="classic">
...
<moves ply-count="23">
    <mp> 
      <m c="w"><p c="w" n="p"/><e2/><e4/></m>
      <m c="b"><p c="b" n="p"/><e7/><e5/></m>
    </mp>
...
</game>

Obzvláštní pozornosti doporučuji fakt, že výsledný obraz je animovaný - zde se ukazuje síla animací SMIL (implementovány zatím pouze v Opeře a ASV). Něco takového je hračkou právě díky deklarativní povaze SMIL (velice zjednodušeně: namísto programování skriptů prostě přímo v SVG-XML kódu popíšete časový průběh animovaných hodnot).

Právě animace spolu s využitím tzv. SVG fontů jsou příčinou, proč k zobrazení budete potřebovat Operu 9 nebo ASV. Firefox totiž zatím bohužel neimplementoval ani jednu z těchto vlastností.