reklama

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

Web budoucnosti leží na dosah. Standardní vektorová grafika SVG-XML (oficiální standard W3) se stala skutečností. Prohlížeče Mozilla Firefox 1.5 a Opera 8 už pro vykreslování vektorů nepotřebují žádné doplňky. Ledy se hnuly a vývoj druhého nejrozšířenějšího prohlížeče konečně pokročil i v oblasti SVG.

Nízká priorita vektorové grafiky v projektu Mozilla ale způsobila, že prvenství patří společnosti Opera. Ovšem, absolutním hitem roku 2005 byla nová Opera 9. Již podruhé v tomto roce byla překonána veškerá očekávání a první webový prohlížeč s úplnou nativní podporou normy SVG-XML je na světě!

Předpokládejme, že máte alespoň základní přehled o webdesignu i představu co obnáší (X)HTML, XML, DOM, JavaScript (resp. DHTML), pojmy vektorová versus bitmapová grafika... O těchto záležitostech se už napsalo spousty bajtů a pokud potřebujete více podrobností není nic snadnějšího než zavítat na stránky svého oblíbeného vyhledávače.

V souvislosti s SVG stále panuje velká neznalost a mnoho nejasností. Všichni se shodnou na velkých grafických i interaktivních možnostech vektorové grafiky, ale častokráte se o této nové technologii uvažuje jako o něčem příliš akademickém, teoretickém, nepraktickém. Časy se ale mění. Proto mi dovolte odbočku, ve které bych jen velice stručně zopakoval hlavní výhody vektorové grafiky ve standardním formátu SVG-XML pro ty, kterým je tento pojem zatím neznámý.

Vlastnosti a výhody SVG

  1. SVG je grafický formát umožňující popsat vektorovou grafiku vč. vložených bitmap a dalších pokročilých grafických technik (existuje jistá podoba s PDF)
  2. definice SVG zahrnuje popis animací a interaktivity na bázi SMIL (skripty nejsou nutné)
  3. SVG je značkovací jazyk z rodiny XML (lidově bychom jej mohli přirovnat k HTML pro grafiku, jen s jinými tagy)
  4. je možné snadné kombinování s XHTML, dokonce v rámci jednoho souboru, SVG grafika proto není omezena na obdélníkový rám ve kterém pracují zásuvné moduly
  5. stejně snadno jako HTML je editovatelný třeba i v textovém editoru
  6. stejně jako HTML je přístupný vyhledávačům (existuje už podpora mj. v Google)
  7. po 5 letech od vzniku normy už existuje i dostatečný počet vizuálních editorů i animátorů vč. obdob programu Flash

Ano, budoucnost se konečně stává realitou. Ano, možná se dokonce dožijeme i doby, kdy už kvůli vektorům nebudeme potřebovat Adobe.

Této firmě sice patří nesmazatelné zásluhy za výborný prohlížeč ASV, ale v poslední době tam pravděpodobně usoudili, že už se jim nevyplatí investovat do dalšího vývoje - výsledkem je tudíž stagnace. Za problém považuji především fakt, že skriptovatelnost plug-inu zvenku, z nadřazeného (X)HTML dokumentu je omezena v podstatě na webový prohlížeč Explorer ve Windows.

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

Opera 9: Jsou to křivky a Flash to není. Co je to? (demonstrace vlastností SVG, cca 14 kB)

Ve zbývajícím prostoru ASV zastoupí Opera 9 a budoucí verze prohlížeče Mozilla Firefox. Částečná implementace se koná již v aktuální verzi Firefox 1.5 a dospět by měla ve verzi 2. Závodu o dosažení úplné podpory SVG 1.1 se účastní i applovský Safari 2 odvozený z linuxového Konqueroru. Podle aktuálních údajů budou pomyslné stupně vítězů pravděpodobně vypadat následovně: I) Opera 9, II) Safari / Konqueror, III) Mozilla Firefox 2.

A je tu mimochodem ještě jedna zajímavá souvislost: Vykreslovací jádro prohlížeče Safari bylo totiž firmou Nokia zvoleno jako základ příští generace webového browseru pro mobilní systémy Symbian. Spolu s "mobilní" verzí Opery to představuje slušný příslib pro budoucí technologický vývoj na tomto poli.

Předtím...

Zatímco aktuální osmičková verze prohlížeče Opera již dlouhou dobu přímo z výroby obsahuje kompletní podporu standardu SVG Tiny 1.1, většinový Explorer oproti tomu bohužel nadále ignoruje tento grafický standard (viz "Desktop SVG", "XAML") (SVG je přitom rozhodně pokročilejší než nestandardní XAML, který Microsoft chce využívat) a tak nutí své uživatele stále se spoléhat na plug-in - podobně jako je na plug-inu závislý komerční konkurent a předchůdce SVG, totiž formát SWF generovaný programem Flash.

A abychom si ušetřili neplodné diskuse upřesňuji, že ve skutečnosti se samozřejmě záběr formátu SVG-XML s formátem SWF protíná jen částečně. Opakuji znovu - SVG je pouze XML jazyk pro popis animované a interaktivní 2D grafiky navržený mj. pro snadnou integraci s webem, zatímco SWF bylo v poslední době firmou Macromedia posunováno směrem k složité multimediální aplikační platformě, která má s webem společné jen to, že Flash player běží jako plug-in v okně webového prohlížeče.

I když v komerční sféře prožívá formát SWF nebývalý boom, ani jeho nejzarytější zastánci nezmění nic na faktu, že SVG grafika je součástí rodiny XML jazyků a jako taková přirozeně zapadá do webové skládačky. Elegance a krása technického řešení SVG-XML samozřejmě automaticky neznamená, že se SVG dokáže prosadit proti zavedenému komerčnímu SWF. To ukáže teprve čas.

Potom...

V tomto textu vám ukáži jak nejnovější pokroky implementace SVG v Mozille Firefoxu 1.5 a Opeře 9, tak i praktické možnosti využití SVG, které se nabízejí mj. ve spojení se zavedenými technologiemi počínajíc DOM / JavaScript, CSS a konče třeba XSLT.

Rozšíření prohlížečů

A bavíme-li se na tomto místě o možnosti reálného praktického využití SVG, k dobru lze přičíst velmi slušné rozšíření prohlížeče Firefox mezi uživateli - docela zajímavou úvahu na toto téma najdete v článku "Válka prohlížečů v roce 2005".

Dovolím si ale protestovat proti jedné pasáži zmíněného textu, jež se týká Firefoxu 1.5. Cituji: "Verze 1.5, která byla uvedena ve druhé polovině roku 2005, v prvé řadě opravovala chyby a řešila problémy hlášené uživateli. Úprava prohlížení v panelech a razantní změna reprezentace chybových hlášení prohlížeče práci s prohlížečem ještě více usnadnila. ..."

Tou zásadní a převratnou změnou ve Firefoxu 1.5 je totiž něco zcela jiného - zabudovaná technologie SVG a možnost kombinovat ji přirozeně - v rámci jednoho XML souboru - s HTML kódem. Toto je přesně ten moment, ve kterém nastupuje web budoucnosti, jehož výhody a možnosti vám v tomto textu předvedu.

Trochu sporné je i tvrzení "Prohlížeč Safari, takový Internet Explorer v počítačích s operačním systémem Mac OS...". Lépe by bylo napsat že Safari je na Mac OS v podobné pozici jako IE ve Windows - tedy výchozí předinstalovaný prohlížeč. A byl jím mimochodem už před ohlášeným ukončením vývoje Mac Exploreru. Tím veškeré podobnosti končí. Safari je velice moderní a rychlý prohlížeč. V aktuální verzi 2 už mu nechybí žádný z důležitých moderních standardů a ve spolupráci s vývojáři Konqueroru získává i implementaci SVG. Která je mimochodem v některých oblastech již podstatně pokročilejší než ve Firefoxu 1.6 (tedy nejnovější vývojové verzi FF).

Web budoucnosti

Kód webových stránek budoucnosti by mohl vypadat třeba jako následující ukázka pro Firefox 1.5 a Operu 9. HTML i CSS kód bude zcela jistě většině z vás povědomý, při bližším zkoumání ale naleznete v kódu vetřelce - prvky v jmenném prostoru SVG-XML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  viewBox="0 0 100 100">
...
</svg>

Povšimněte si prosím za prvé, atributu `xmlns` u "kořenových" prvků HTML i SVG a za druhé, naprosto samozřejmého využívání CSS jak v HTML, tak i v SVG prostoru.

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG + XHTML + CSS</title>
  <style>
    ...
  </style>
</head>
<body>
<h1>Příklad SVG + XHTML + CSS</h1>
<p>Tento XML dokument obsahuje data ve formátech XHTML a SVG.</p>
<p>Pozadí je vektorové a definuje jej SVG element s id=`vector1`.</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="vector1"
  viewBox="0 0 100 100" preserveAspectRatio="none"
  style="position:absolute; top:0; left:0;
  width:100%; height:100%; z-index:-1;">
  <linearGradient id="gradient">
    <stop class="begin" offset="0%"/>
    <stop class="end" offset="100%"/>
  </linearGradient>
  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
  <text x="0" y="77" class="tx0" >SVG</text>
</svg>
...
</body>
</html>

Implementace SVG v Mozille Firefoxu

Mnohým z vás bude jistě známo, že díky způsobu jakým je Firefox vyvíjen, lze testovat stav programovacích prací na konci každého dne stažením tzv. "nightly builds" - a právě tyto vývojové (alfa) verze použiji k demonstraci úžasných věcí, které již nyní lze v Mozille dosáhnout.

V poslední době sleduji vývoj SVG v Mozille ještě pečlivěji a než se ponoříme do problému hlouběji, prozradím vám mimo jiné, že toužebně očekávané SMIL animace se sice bohužel stále nekonají, nicméně první kroky k implementaci již byly učiněny a Firefox 1.5 už ovládá mj. "events", což je jedna z podmínek k dosažení plné interaktivity.

Nedávno byla např. dokončena implementace zobrazení tzv. textu na křivce nebo výplňových vzorků (pattern). V běhu jsou práce na implementaci náročného modulu bitmapových filtrů, maskování i SMIL animací.

Ukáži vám nyní několik SVG grafik, které budou demonstrovat některé z pokročilejších vlastností SVG standardu.

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

Zobrazení textu na křivce už v Mozille funguje, příklad rovněž ukazuje funkčnost
důležitého textového objektu "tspan" (
odkaz - SvG, cca 4 kB). "tref" bohužel zatím v implementaci chybí.

SVG posouvá možnosti formátování textu o velký kus vpřed... V XML kódu přitom stačí dovnitř textového prvku přidat odkaz na obecnou křivku.

<text font-family="`Times CE`, `Times New Roman`, serif"
font-size="72" font-weight="normal" fill="blue" >
<textPath xlink:href="#krivka" method="stretch" >
text na křivce
</textPath>
</text>

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

Bitmapové efekty - na vykreslenou vektorovou grafiku se přímo v prohlížeči aplikují bitmapové filtry
To co vidíte v této ukázce je v SVG kódu zapsáno jako primitivní čtverce (
odkaz - SVG, cca 4 kB)

Jak můžete vidět v ukázce kódu, vykreslení bitmapového efektu se dosáhne docela snadno - postačí přidat atribut `filter` k SVG objektu. V této ukázce jím je prvek use, který vykreslí předdefinovaný symbol připravený k vícenásobnému použití (pro úsporu přenášených dat).

<use x="0" y="15" xlink:href="#rects"/>
<g transform="translate(150,15)">
  <use xlink:href="#rects" filter="url(#blur)"/>
</g>

Nativní implementace

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

GECKO - blokové schéma zobrazovacího jádra Mozilly

K blokovému schématu je potřeba dodat, abych byl zcela přesný, že v poslední době došlo ke kompletnímu přechodu na jedinou grafickou knihovnu Cairo (blok "SVG Renderers" vpravo nahoře, který realizuje konečné "fyzické" vykreslení v grafické kartě počítače).

Implementace SVG přímo na úrovni vykreslovacího jádra webového prohlížeče má zcela zřejmé výhody. Na prvním místě vás jistě napadne sdílení skriptovacího mechanismu a objektové struktury DOM, což mimo jiné demonstrují následující příklady.

(X)HTML technologie se zcela přirozeně využijí pro SVG

Základním, mnohokráte opakovaným, argumentem pro SVG je stoprocentně jeho XML podstata. Spolu s ní získává všechny plusy, díky kterým je dnes jazyk HTML tím čím je: průhlednost, otevřenost, snadná editovatelnost i automatické generování, atd.

Následující příklady ukazují důležité techniky známé mimo jiné pod označením DHTML - tedy dynamické HTML. A nemusím asi zdůrazňovat že jsou to postupy, které současní tvůrci webů znají jako své boty. Celá pointa tkví ovšem v tom, že tytéž identické postupy použijete i pro vektorovou grafiku SVG. Postačí jen naučit se význam několika nových prvků - jejichž názvy jsou navíc docela intuitivní.

Z mého pohledu je hodně logicky a konzistentně navržena celá struktura SVG dokumentu. Je na ní znát, že byla pečlivě promyšlena lidmi, kteří o grafice něco věděli. Což je mimochodem jedna z věcí, které chybí VML, kdysi implementovanému do Exploreru (pouze Windows verze!).

Dynamické SVG - obsluha událostí

Poznámka: Naše ukázky pracují v prohlížečích Mozilla Firefox 1.5 a Opera 9.

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

Zde se demonstruje bezchybná obsluha událostí, "event bubbling" a práce s DOM (odkaz - SVG, cca 4 kB)

Sami vidíte, že první příklad je velmi triviální a v principu shodný s HTML kódem. Primárně si povšimněte identické obsluhy událostí z uživatelského rozhraní. Připojení obslužných rutin událostí zápisem typu <circle onmouseover="bubbleYes(evt,blue)" .../> se vyučuje už v první třídě.

Tento jednoduchý kód ukáže, zda je zpracování vzniklé události správně předáváno mezi jednotlivými úrovněmi ve stromové hierarchii objektového modelu. Technika je běžně známa pod názvem "event bubbling".

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Test event bubbling</title>
<defs>
<script type="text/ecmascript"><![CDATA[
     function bubbleYes(evt, color){
       // Get Document
       var target = evt.target;
       target.setAttribute(`fill`, `` +color);
     }
     function bubbleNo(evt, color){
       // Get Document
       var target = evt.target;
       target.setAttribute(`fill`, `` +color);
       evt.stopPropagation();
       evt.preventDefault();
     }
]]></script>
</defs>

<g fill="#000" font-family="Arial" font-size="40">
  <!--
  Na 2. prvku `circle` je zpracovani bublani zastaveno,
  vysledkem je modra vypln, v 1. pripade cervena.
  -->
  <g onmouseover="bubbleYes(evt,red)" onmouseout="bubbleYes(evt, `inherit`)">
    <circle onmouseover="bubbleYes(evt,blue)"
      onmouseout="bubbleYes(evt, `inherit`)"
      cx="70" cy="120" r="50"/>
    <circle onmouseover="bubbleNo(evt,blue)"
      onmouseout="bubbleNo(evt, `inherit`)"
      cx="70" cy="240" r="50"/>
  </g>
  <text x="150" y="110">
   Pointer in circle,
  </text>
  <text x="150" y="150">
   circle turns red
  </text>
  <text x="150" y="230">
   Pointer in circle,
  </text>
  <text x="150" y="270">
   circle turns blue
  </text>
</g>

</svg>

Dynamické SVG - práce s DOM

Další příklad demonstruje mj. dynamické vytváření a manipulace s objekty ve struktuře DOM. Kód obsahuje i primitivní měřič grafického výkonu.

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

Létající bubliny jsou ukázkou pokročilého JavaScriptu a dynamického
vytváření objektů ve struktuře objektového stromu (
odkaz - SVG, cca 8 kB)

Část kódu předchozí SVG grafiky. Nic než staré dobré DHTML... Další komentáře přímo v kódu ukázky:

//--------------------------------------------------------------
//inicializacni rutina
function bubbles( evt ) {
  var i;
  root = document;
  //misto kam umistit vygenerovane prvky
  canvas = root.getElementById( "canvas" );
  //toto je SVG prvek - kresba bubliny, kterou
  //jednoduse naklonujeme abychom ziskali more bublin
  c1 = root.getElementById( "c1" );
  //sem budeme vkladat text s udajem o rychlosti
  fps_text = root.getElementById( "fps_text" ).firstChild;
  //tato smycka naklonuje 32 bublin
  for (i=0; i<32; i++) {
    var c = _new_bubble();
    array.push( c );
    canvas.appendChild( c );
  }
  //spusteni casovace
  timer = setInterval( "_frame()", 25 );
  setInterval( "_fps()", 1000 );
}

//--------------------------------------------------------------
//zastavi / spusti animaci
function startstop() {
  if ( timer ) {
    clearInterval( timer );
    timer = null;
  }
  else {
    timer = setInterval( "_frame()", 10 );
  }
}

//--------------------------------------------------------------
//pohyb bublin
function _frame() {
  var i;
  for (i=0; i<array.length; i++) {
    var c = array[i];
    var cx = new Number( c.getAttribute( "cx" ) );
    var cy = new Number( c.getAttribute( "cy" ) );
    var r = new Number( c.getAttribute( "r" ) );

    cx += Math.random() * 10 - 5;
    cy -= (r>>1);
    if ( cy < 0 ) {
      c.setAttribute( "cx", Math.random() * 600 );
      c.setAttribute( "cy", 450 + Math.random() * 50 );
      c.setAttribute( "r", Math.random() * 24 + 8);
    }
    else {
      c.setAttribute( "cx", cx );
      c.setAttribute( "cy", cy );
    }
  }
  fps++;
}

//--------------------------------------------------------------
//aktualizuje text s poctem snimku
function _fps() {
  fps_text.data = "fps: " + fps;
  fps = 0;
}

//--------------------------------------------------------------
//naklonuje bublinu a nastavi nahodnou polohu kopie
function _new_bubble() {
  var c2 = c1.cloneNode( false );
  c2.setAttribute( "cx", Math.random() * 600 );
  c2.setAttribute( "cy", Math.random() * 450 );
  c2.setAttribute( "r", Math.round(Math.random() * 24) + 8);
  return c2;
}

Fungují i další příklady z mého kurzu SVG grafiky: fyzikální pokus, cca 5 KB, hmyz a-la Macromedia, cca 18 KB, funkční analogové hodiny, cca 2 KB.

Pokud náhodou trpíte přebytkem volného času, tak si zahrajte SVG Tetris (pouze v Mozille). Tato hříčka, jejímž autorem je Alex Fritze, rovněž využívá schopností JavaScript enginu Mozilly k dynamickému generování SVG elementů.

Témata článku: Software, Prohlížeče, Programování, Opera, Budoucnost, HTML, Timer, Event, Gradient, Canvas, Pointer, Root, Bubbles, Cairo, Tetris

38 komentářů

Nejnovější komentáře

  • hejral 19. 2. 2009 13:37:26
    http://www.ok242.info/svg/event-bubbling.svg
  • mallox 20. 5. 2006 10:39:09
    me by zajimalo, jak se muze testovat file .svg v opere 9, kdyz nejnovejsi...
  • mallox 20. 5. 2006 10:36:44


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

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ý | 133

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

Včera | Jakub Čížek | 84


reklama