reklama

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, Budoucnost, Programování, Opera

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...
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 35

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 131

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 39

Facebook o nás ví vše. Díky dobře skrytému vyhledávači se to dozví i ostatní

Facebook o nás ví vše. Díky dobře skrytému vyhledávači se to dozví i ostatní

** Facebook o nás ví vše, protože mu to sami řekneme ** V jeho nitru se skrývá mocný vyhledávač ** Mohou jej zneužít stalkeři, sociální inženýři a další nezbedníci

16.  2.  2017 | Jakub Čížek | 76

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

Vyhledávání ve Windows není dokonalé, zkuste to 5× jinak

** V macOS funguje vyhledávání Spotlight, ve Windows podobně propracovaná funkce chybí ** Alternativy se zaměřují na rychlé hledání souborů i externí zdroje ** Mnohé mohou vyhledávání ve Windows kompletně nahradit

18.  2.  2017 | Stanislav Janů | 58


Aktuální číslo časopisu Computer

Stavba 3D tiskárny

Výbava domácí elektrodílničky

Budoucnost 5G sítí

Velké testy microSD karet a vodních chladičů

Přehled mobilních tarifů

reklama
reklama