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

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.

Klepněte pro větší obrázek

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:

<!-- 1st button -->
<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>

  <!-- 1st button -->
  <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>

  <!-- 2nd button -->
  <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>

  <!-- 3rd button -->
  <use xlink:href="#normal">
    <set attributeName="xlink:href" to="#over" begin="mouseover"/>
    <set attributeName="xlink:href" to="#normal" begin="mouseout"/>
  </use>

</svg>

Klepněte pro větší obrázek

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:

<!-- 3. animovana `hvezda` -->
<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%.

Klepněte pro větší obrázek

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> <!-- 1. e4 e5 -->
      <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í.

Klepněte pro větší obrázek

Tento SVG obraz byl vygenerován automaticky standardním transformačním mechanismem XSLT z nářečí ChessGML (ukázka)

Podpora SVG standardu v Opeře 9 je 100%

  1. vektorové tvary - ANO
  2. jednobarevné výplně - ANO
  3. přechody barev - ANO
  4. textury - ANO
  5. text + tspan - ANO
  6. tref (text odkazem) - ANO
  7. text na křivce - ANO
  8. SVG písma - ANO
  9. transformace - ANO
  10. ořezávání (clipping) - ANO
  11. maskování (masking) - ANO
  12. bitmapové filtry - ANO
  13. animace SMIL - ANO
  14. skriptování - ANO

Témata článku: Software, Programování, Opera, Budoucnost, Violet, Green, Button, Transform, Chess, Magenta, Translate

21 komentářů

Nejnovější komentáře

  • --==[FReeZ]==-- 23. 4. 2006 11:35:38
    "Co je to zashit?" FireFox je mega shit, to co mi nepokazi MS IE musim...
  • MH 8. 3. 2006 14:42:41
    Podobné titulky budou vždycky trochu nadsázkou
  • MH 8. 3. 2006 14:21:37
    ad 2) s příklady 2 a 3 má O9 TP skutečně problémy, a já docela věřím (po...
Určitě si přečtěte

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

** Programátorů je málo a horníků bez práce po uzavření dolu Paskov bude moc ** Problém řeší unikátní projekt ** Pilotní kurz dává naději, že by z horníků mohli být použitelní kodéři

28.  11.  2016 | David Polesný | 78

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

ASUS ZenBook 3 se začal prodávat v Česku. Je ve všem lepší než MacBook, ale bude to stačit?

** Novinka od Asusu míří přímo proti MacBooku od Applu ** Nabídne daleko více výkonu za stejné peníze

2.  12.  2016 | David Polesný | 119