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
Diskuze (21) Další článek: Lenovo 3000 bude mít předinstalovaný Corel Small Business Center

Témata článku: Software, Budoucnost, Programování, Opera, Smile, Transform, Magenta, Grafika, Green, Violet, Aktivní stav, Graf, Stem, Vektor, Button, Sta, Translate, Grafik, Chess


Určitě si přečtěte

Windows 10 budou mít kompletní linuxové jádro. Zatím jen pro vývojáře

Windows 10 budou mít kompletní linuxové jádro. Zatím jen pro vývojáře

** Desítky si budou ještě více rozumět s Linuxem ** V létě získají jeho jádro pro vývojáře ** Microsoft představí také Windows Terminal

Jakub Čížek | 86

Elon Musk: kupovat si jiné auto než Tesla je bláznovství, chystáme velké věci

Elon Musk: kupovat si jiné auto než Tesla je bláznovství, chystáme velké věci

** Tesla uspořádala prezentaci pro investory na téma autonomního řízení ** Zveřejnila podrobnosti o vlastním neuročipu i autonomní technologii ** Příští rok chce spustit vlastní platformu samořídicích sdílených aut

Karel Javůrek | 102

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

Byli tam! Důkazy o přistání na Měsíci, Lunochody i čínská sonda jsou vidět z vesmíru

** Sonda LRO pořídila z oběžné dráhy Měsíce zajímavé snímky ** Jsou na nich vidět artefakty všech misí programu Apolla, které přistály na povrchu Měsíce ** Jde například o části lunárních modulů, rovery a dokonce i vlajky

Petr Kubala | 33

Biblická potopa Česka: Jak bychom dopadli, kdyby nás zatopil oceán

Biblická potopa Česka: Jak bychom dopadli, kdyby nás zatopil oceán

** Představte si biblickou potopu ** Nejprve zaniknou Děčín a Břeclav, pak i Brno a Praha ** Hlavním městem se stane Jihlava a zbytky Čechů přežijí na Kvildě

Jakub Čížek | 89



Aktuální číslo časopisu Computer

Velký test Wi-Fi mesh

Nejlepší hodinky pro všechny aktivity

Důležité aplikace na cesty

Jak streamovat video na Twitch