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.
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>
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
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.
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.
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ů.
