<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<h2>Kurz SVG - DOM a JavaScript p°i programovßnφ animacφ</h2>
<p id='prepend'>V tomto Φlßnku vßs Φekß prvnφ pomoc p°i programovßnφ (alias skriptovßnφ) v prost°edφ SVG. ZφskanΘ znalosti si hned vyzkouÜφme v n∞kolika zajφmav²ch praktick²ch p°φkladech. Myslφte si nap°φklad, ₧e znßte vÜechny v²hody, kterΘ majφ vektorovΘ mapy v SVG formßtu? Mo₧nß ano, ale i tak se vßs pokusφm p°esv∞dΦit, ₧e SVG mapy toho dovedou jeÜt∞ vφce, ne₧ jste Φekali.</p>
<p>Jeliko₧ ne vÜechny ·lohy lze zvlßdnout jen s animaΦnφmi prvky SVG specifikace, podφvßme se na mo₧nosti, kterΘ nßm nabφzφ skriptovßnφ. U₧ d°φve jsem v tomto kurzu n∞kolikrßte zmi≥oval, ₧e zvlßdßte-li techniku DHTML, jako byste ji₧ um∞li programovat i SVG. V nßsledujφcφm textu tΘto podobnosti tak trochu zneu₧iji a upozornφm vßs spφÜe na odliÜnosti a specifika SVG, ne₧ abych vysv∞tloval vÜe od zßkladu.</p>
<p>Pozor, nßsledujφcφ text p°edpoklßdß, ₧e s JavaScriptem ji₧ n∞jakΘ zkuÜenosti mßte a ₧e rovn∞₧ mßte p°edstavu o objektovΘ datovΘ struktu°e HTML (XML) strßnek. V p°φpad∞ pot°eby odkazuji na n∞kterΘ z nesΦetn²ch text∙ o <a href='http://www.w3.org/DOM/'>DOM</a> (Document Object Model) a <a href='http://interval.cz/clanek.asp?article=1511' title='Kus²n, Michal: RozluÜt∞nΘ k°i₧ovatky DHTML'>DHTML</a>, z nich₧ °ada je dostupnß i zde na Intervalu. V tomto textu nynφ zmφnφm jen n∞kterΘ zßkladnφ a nejΦast∞ji pou₧φvanΘ konstrukce. Detaily SVG-DOM bez problΘmu dohledßte <a href='podklady/hejral/1033/CurrentSupport.pdf'>v dokumentaci k ASV3</a>.</p>
<h3>Test aktivnφho SVG prohlφ₧eΦe</h3>
<p>Hned <a href='http://interval.cz/clanek.asp?article=2253' title='Hejral, Martin: Pr∙vodce SVG - hlßÜenφ o stavu v²voje'>ze zaΦßtku sΘrie text∙ o SVG</a> jste se o Adobe SVG3 prohlφ₧eΦi mohli dozv∞d∞t, ₧e jednφm z hlavnφch rozdφl∙ oproti p°edchozφ verzi je implementace plnohodnotnΘho interpreteru JavaScriptu. Tato informace je pro nßs nynφ klφΦovß. Programßto°i firmy Adobe tφm v²razn∞ zv²Üili kompatibilitu prohlφ₧eΦe nap°φΦ vÜemi platformami a r∙zn²mi webov²mi prohlφ₧eΦi. Osobn∞ siln∞ doporuΦuji jako prvnφ krok p°i spouÜt∞nφ jak²chkoli skript∙ v SVG prost°edφ provΘst test verze prohlφ₧eΦe. Dovoluji si vßm nabφdnout svΘ odlad∞nΘ °eÜenφ:</p>
<div class='sample'>
<script type="text/ecmascript">
<br /><![CDATA[
<br />function testAdobe() {
<br /> //created by Martin Hejral, 2003
<br /> //test if Adobe SVG Viewer 3 (ASV3) or greater is present
<br /> alert("PROSIM, nainstalujte novou verzi Adobe SVG prohlizece!!!");
<br /> return false;
<br />}
<br />]]>
<br /></script>
</div>
<p>A hned mohu dodat, ₧e zßpis k≤du uvnit° SVG souboru se °φdφ obecn²mi XML pravidly, proto je nutnΘ programovΘ k≤dy v₧dy uzav°φt do sekce CDATA, jak jste si vÜichni urΦit∞ povÜimli v p°edchßzejφcφm v²pisu.</p>
<h3>Nejd∙le₧it∞jÜφ p°φkazy a postupy</h3>
<p>Toto je notoricky znßmß konstrukce, kterou zaΦφnß tΘm∞° ka₧d² DHTML (a SVG) skript, kter² pracuje s DOM. Zjistφme takto ukazatel na objekt, se kter²m pot°ebujeme pracovat - a¥ u₧ Φφst jeho atributy, nebo n∞co modifikovat.</p>
<p>Adobe doporuΦuje ke stejnΘmu ·Φelu o n∞co slo₧it∞jÜφ postup. Ten vznikl p°edevÜφm k zamezenφ mo₧n²ch problΘm∙ v p°φpadech, kdy skript provßd∞l webov² prohlφ₧eΦ (v ASV2) a v HTML strßnce bylo souΦasn∞ vlo₧eno n∞kolik SVG prvk∙.</p>
<p>Vidφte, ₧e namφsto toho, aby se vyu₧il standardnφ objekt <code>document</code>, je zjiÜ¥ovßn objekt "vlastnφcφ" ty konkrΘtnφ SVG prvky, se kter²mi zrovna pot°ebujeme pracovat. (Abych byl zcela p°esn², hledßme vlastnφka objektu, kter² byl zdrojem udßlosti <code>onload</code>, tedy prvku <code>svg</code>.) Pro ka₧d² vlo₧en² SVG soubor se toti₧ vytvo°φ jeden dalÜφ objekt <code>document</code>.</p>
<p>Pom∞rn∞ hojn∞ vyu₧φvanΘ jsou i nßsledujφcφ p°φkazy, rovn∞₧ znßmΘ z DHTML: </p>
<div class='list'>
<ul>
<li>window.status="text" - prom∞nnß</li>
<li>window.alert("text") - funkce</li>
</ul>
</div>
<p>V²znamnΘ usnadn∞nφ prßce p°i programovßnφ vßm poskytnou funkce zjednoduÜujφcφ prßci s atributy SVG element∙ - jejich slu₧eb vyu₧ijete p°i prßci s SVG velmi Φasto:</p>
<p>DalÜφ oblφbenou Φinnostφ, kterou jist∞ budete chtφt provozovat takΘ, je obsluha udßlostφ u₧ivatelskΘho rozhranφ - tu velmi Φasto vyu₧ijete p°i vytvß°enφ interaktivnφch grafick²ch prezentacφ. Dovolφm si shrnout nejd∙le₧it∞jÜφ praktickΘ informace, kterΘ k tomu budete pot°ebovat.</p>
<p>SVG p°i obsluze udßlostφ pou₧φvß model shodn² s dob°e znßmou normou DOM2-Events, pou₧φvan² v prohlφ₧eΦφch Netscape a Mozilla (MSIE se trochu odchyluje). Ka₧dß obslu₧nß rutina toti₧ dostane jako parametr specißlnφ objekt <em>event</em>, kter² nese informace pot°ebnΘ k reakci na konkrΘtnφ udßlost. Pozor, zßvazn² nßzev tohoto specißlnφho objektu v ASV je <code>evt</code> (na rozdφl od klasick²ch WWW browser∙)!</p>
<p>JednotlivΘ polo₧ky ve struktu°e objektu <code>evt</code> pak jsou ji₧ shodnΘ. Ty nejzajφmav∞jÜφ si nynφ vyjmenujeme:</p>
<div class='list'>
<ul>
<li><em>target</em> - zdrojov² objekt udßlosti</li>
<li><em>currentTarget</em> - aktußlnφ objekt, ke kterΘmu je p°ipojen obslu₧n² skript (event listener)</li>
<li><em>screenX</em> - X v sou°adnicovΘm systΘmu obrazovky</li>
<li><em>screenY</em> - Y v sou°adnicovΘm systΘmu obrazovky</li>
<li><em>clientX</em> - X relativn∞ vzhledem k oknu (rßmu) SVG grafiky</li>
<li><em>clientY</em> - Y relativn∞ vzhledem k oknu (rßmu) SVG grafiky</li>
<li><em>ctrlKey</em></li>
<li><em>shiftKey</em></li>
<li><em>altKey</em></li>
<li><em>metaKey</em></li>
<li><em>button</em></li>
<li><em>keyCode</em></li>
<li><em>charCode</em></li>
</ul>
</div>
<h3>Animace s vyu₧itφm DOM a JavaScriptu</h3>
<p>A vzh∙ru do praxe...</p>
<h4>Fyzikßlnφ pokus - koule a pru₧iny</h4>
<p>Nynφ si vyzkouÜφme realizaci znßmΘho fyzikßlnφho pokusu, kdy koule, zav∞Üenß na pru₧in∞, po jejφm napnutφ a uvoln∞nφ kmitß s klesajφcφ amplitudou okolo rovnovß₧nΘ polohy.</p>
<div class='image'>
<img src='podklady/hejral/1033/a16.gif' alt='Fyzikßlnφ pokus - koule a pru₧iny' title='Fyzikßlnφ pokus - koule a pru₧iny' />
<br /><span class='comment'>Fyzikßlnφ pokus - koule a pru₧iny (<a href='podklady/hejral/1033/a16-3-physics.svg'>originßlnφ SVG, cca 5 kB</a>)</span>
</div>
<p>V <a href='podklady/hejral/1033/a16-1-physics.svg'>prvnφ fßzi</a> jsem si v Illustratoru nakreslil jednoduchΘ ztvßrn∞nφ pru₧iny (skupina s <samp>id="spring"</samp>) a koule (skupina s <samp>id="sphere"</samp>). Dovnit° ka₧dΘ skupiny jsem pak dodal animaΦnφ prvky. Musφ b²t dva, proto₧e v p°φpad∞ pru₧iny pot°ebujeme animovat smrÜ¥ovßnφ, naproti tomu koule jen m∞nφ polohu...</p>
<p>Definice pohybu pomocφ <code>values</code> ovÜem ve v²chozφm (lineßrnφm) interpolaΦnφm re₧imu vede k fyzikßln∞ nesprßvnΘmu ΦasovΘmu °φzenφ animovan²ch hodnot. Abych dosßhl realistickΘ zm∞ny zrychlenφ, kterß p°i tomto fyzikßlnφm procesu probφhß, nastavil jsem v²poΦetnφ re₧im na <samp>calcMode="spline"</samp> a p°idal dv∞ °φdicφ k°ivky do atributu <samp>keySplines=".5 0 .5 1;.5 0 .5 1"</samp>. Navφc byly <a href='podklady/hejral/1033/a16-2-physics.svg'>v druhΘ fßzi</a> koule a pru₧ina definovßny jako symboly, abychom je mohli "rozmno₧it":</p>
<p>Stßle ale z∙stßvß opominut jeden fyzikßlnφ aspekt - v reßlnΘm sv∞t∞ bude v₧dy dochßzet ke ztrßt∞ energie kmitajφcφ soustavy a kmity se budou utlumovat. Mohli bychom to ud∞lat zp∙sobem, kter² pou₧il v podobnΘm p°φkladu s kostkami Antoine Quint, ale ten je nep°esn² a nßroΦn² na vypisovßnφ mno₧stvφ polohov²ch ·daj∙.</p>
<p>Proto si nynφ ukß₧eme p°φm² v²poΦet animaΦnφch fßzφ pomocφ JavaScriptu. Prosφm ct∞nΘ Φtenß°e, nekamenujte mne za nep°esnosti a zjednoduÜovßnφ ve fyzikßlnφ strßnce v∞ci, st°edem zßjmu stßle z∙stßvß vektorovß grafika:</p>
<div class='sample'>
//global variables
<br />var amp=50, scale=0.34, time=0, to=-1;
<br />//perform fading animation
<br />function fade() {
<br /> //get pointer to animated objects
<br /> var obj1 = document.getElementById('sphere1');
<br /> var obj2 = document.getElementById('spring1');
<p>Uveden² k≤d vykonßvß zhruba nßsledujφcφ. Ihned potΘ, co zjistφ ukazatele na animovanΘ objekty, pou₧ije funkci <code>cos()</code> k v²poΦtu animovan²ch hodnot: <samp>y</samp> - aktußlnφ poloha koule, <samp>s</samp> - aktußlnφ nata₧enφ pru₧iny. Jeliko₧ byla pru₧ina nakreslena v pln∞ nata₧enΘ poloze, byl jsem nßsledn∞ donucen do v²poΦtu p°idat mo₧nß pon∞kud zßhadnΘ konstanty (<samp>50, 0.34, 0.32</samp>). Pak se posuneme po ΦasovΘ ose zv²Üenφm prom∞nnΘ <samp>time</samp>, utlumφme amplitudu a aplikujeme vypoΦtenΘ hodnoty na SVG objekty (<code>setAttribute</code>).</p>
<p>Nakonec nastavφme ΦasovaΦ, kter² rutinu <code>fade()</code> spustφ znovu po 50 ms.</p>
<h4>Äivot brouka</h4>
<p>Tato animace op∞t vychßzφ <a href='podklady/hejral/1033/a17-beetle.swf'>z p°φkladu firmy Macromedia</a>, ve kterΘm je beruÜka ovlßdßna virtußlnφm joystickem.</p>
<p>Op∞t jsem si trochu ulehΦil prßci, o°ezal jsem p°φklad a₧ na holΘ jßdro a vypustil n∞kterΘ vlastnosti originßlu. Pokud jste poctiv∞ doΦetli a₧ sem, mßte vÜechny pot°ebnΘ znalosti, kterΘ vßm umo₧nφ napsat JavaScriptovou rutinu kterß by nap°φklad stejn∞ jako v SWF p°edloze pohybovala °φdicφ pßkou (n∞co velmi podobnΘho obsahuje i <a href='http://interval.cz/clanek.asp?article=3662' title='Hejral, Martin: Kurz SVG - animace (praktickΘ ukßzky pro pokroΦilΘ)'>p°φklad s animacφ masky obrßzku</a>).</p>
<br /><span class='comment'>Äivot brouka (<a href='podklady/hejral/1033/a17-2-beetle.svg'>originßlnφ SVG, cca 18 kB</a>)</span>
</div>
<p>Hned <a href='podklady/hejral/1033/a17-1-beetle.svg'>prvnφ varianta SVG p°φkladu</a> naznaΦuje mo₧nosti °eÜenφ tΘto interaktivnφ animace bez pou₧itφ programovßnφ. Bohu₧el, ovlßdßnφ beruÜky pomocφ sm∞rovΘho k°φ₧e takto nelze stoprocentn∞ realizovat - neexistuje toti₧ mo₧nost, aby animaΦnφ prvek po ukonΦenφ a p°i novΘm startu p°iΦφtal rostoucφ hodnoty sou°adnic k poloze, ve kterΘ byla p°edtφm animace ukonΦena (beruÜka zastavena), proΦe₧ pohyb zaΦφnß v₧dy znovu od poΦßteΦnφch sou°adnic danΘho animaΦnφho prvku.</p>
<p><span class='note-author'>Pozn. aut.: Tak₧e asi podßme nßvrh na rozÜφ°enφ normy SVG o pam∞¥ov² efekt animaΦnφch element∙ - navrhuji atribut "memory" s mo₧n²mi hodnotami "replace" a "sum" kv∙li konzistentnosti s atributy "additive" a "accumulate".</span></p>
<p>Prozatφm vßm nabφzφm °eÜenφ pomocφ JavaScriptu <a href='podklady/hejral/1033/a17-2-beetle.svg'>v druhΘ verzi</a> p°φkladu. SVG k≤d je pro vaÜe pohodlφ pom∞rn∞ podrobn∞ okomentovßn.</p>
<p>Tento kousek SVG je zobrazenφm ovlßdacφho k°φ₧e s p°ipojenou rutinou <samp>onmouseover="beetleMania(evt)"</samp>, kterß je potom aktivovßna kdykoli se ukazatel dostane nad zobrazenφ Üipek. P°i pozornΘm Φtenφ k≤du zjistφte, ₧e ve skuteΦnosti je kresba neviditelnß. D∙vod? P∙vodnφ sm∞rov² k°φ₧ byl toti₧ nakreslen jako jedna spojitß vektorovß cesta - to by ale neumo₧nilo jednoduchΘ rozpoznßnφ sm∞ru... Aby prvky v∙bec reagovaly na udßlosti, musφ b²t vykresleny, a jeliko₧ souΦasn∞ chceme vid∞t p∙vodnφ kresbu, nastavil jsem jim prost∞ stoprocentnφ pr∙hlednost pomocφ <samp>opacity="0"</samp>.</p>
<p>Podprogram <samp>beetleMania(evt)</samp> si snadno zjistφ <code>id</code> prvku (<samp>evt.target.id</samp>), kter² spustil udßlost, a podle n∞j nastavφ sm∞r pohybu:</p>
<div class='sample'>
//'evt' is standard name of event object
<br />function beetleMania(evt) {
<br /> //get 'id' of control element to determine direction
<br /> var ctrl = evt.target.id;
<br /> switch(ctrl) {
<br /> case 'n': dx=0; dy=-1; mrot=0;
<br /> break;
<br /> case 'ne': dx=1; dy=-1; mrot=45;
<br /> break;
<br /> case 'e': dx=1; dy=0; mrot=90;
<br /> break;
<br /> case 'se': dx=1; dy=1; mrot=135;
<br /> break;
<br /> case 's': dx=0; dy=1; mrot=180;
<br /> break;
<br /> case 'sw': dx=-1; dy=1; mrot=-135;
<br /> break;
<br /> case 'w': dx=-1; dy=0; mrot=-90;
<br /> break;
<br /> case 'nw': dx=-1; dy=-1; mrot=-45;
<br /> break;
<br /> }
<br /> //stop event bubbling
<br /> evt.stopPropagation();
<br /> return false;
<br />}
</div>
<p>Pokud alespo≥ trochu vlßdnete JavaScriptem, jist∞ pro vßs nebude problΘmem cviΦn∞ naprogramovat druhou variantu pohybu, kdy se beruÜka otßΦφ plynule, nikoli skokov∞.</p>
<p>Vlastnφ pohyb (a modifikace SVG-DOM) zajiÜ¥uje rutina <code>beetleMove()</code>, opakovan∞ spouÜt∞nß ΦasovaΦem:</p>
<div class='sample'>
function beetleMove(evt) {
<br /> //get pointer to animated object
<br /> var obj = document.getElementById('beetle');
<br /> to = window.setTimeout("beetleMove()", 22);
<br />}
</div>
<h4>Interaktivnφ ₧elezniΦnφ mapa ╚R</h4>
<p>V tomto p°φkladu si dovolφm troÜiΦku vylepÜit interaktivnφ <a href='podklady/hejral/1033/a18-cd_mapa-origin.svgz'>SVG mapu ze serveru ╚esk²ch drah</a>. Na okraj jeÜt∞ jednu poznßmku k ovlßdßnφ Adobe SVG prohlφ₧eΦe - zmenÜovßnφ Φi zv∞tÜovßnφ m∞°φtka lze provΘst i myÜφ, pokud podr₧φte klßvesu <code>CTRL</code>, respektive <code>CTRL+SHIFT</code>, a posuv mapy lze realizovat kombinacφ <code>ALT+myÜ</code>, jak je sprßvn∞ uvedeno v map∞.</p>
<p>To byla hraΦka, zbytek u₧ bude troÜiΦku komplikovan∞jÜφ. Vyu₧il jsem toho, ₧e SVG ╚esk²ch drah obsahuje hyperlinky na jφzdnφ °ßdy, p°iΦem₧ Φφslo trati je v₧dy obsa₧eno v nßzvu odkazovanΘho dokumentu - prost∞ jsem je z atributu <code>xlink:href</code> v objektovΘ struktu°e vyextrahoval:</p>
<div class='sample'>
var trat = obj.attributes.getNamedItem("xlink:href").value;
</div>
<p>V SVG jsem si p°edem vytvo°il textov² prvek s <samp>id="info"</samp>, do kterΘho nφ₧e uvedenß rutina zapφÜe Φφslo trati a souΦasn∞ jej p°emφstφ na sprßvnΘ sou°adnice.</p>
<p>Program, kter² jsem vytvo°il, Üikovn∞ vyu₧φvß efektu zvanΘho <a href='http://interval.cz/clanek.asp?article=2064' title='Kus²n, Michal: PokroΦilΘ zpracovßnφ udßlostφ nap°φΦ platformami podruhΘ'>event-bubbling</a> - rutinu odchytßvajφcφ pohyb myÜi mi pak staΦilo umφstit do ko°ene objektovΘho stromu a poΦkat si, a₧ dotyΦnß udßlost probublß a₧ k nφ. Pak testuji, zda se jednß o prvek typu <code>a</code> (hyperlink). M∙₧e se vßm zdßt divnΘ, proΦ netestuji zdrojov² objekt udßlosti (<samp>evt.target</samp>), nybr₧ jeho rodiΦe (<samp>evt.target.parentNode</samp>). Je to proto, ₧e udßlost <code>onmouseover</code> m∙₧e spustit pouze viditeln² objekt - co₧ jsou Φßry znßzor≥ujφcφ jednotlivΘ trat∞, hyperlinky jsou jim v naÜem SVG souboru p°φmo nad°azeny:</p>
<p>DalÜφ velmi zajφmavou vlastnostφ, je₧ by rozhodn∞ nem∞la z∙stat nepovÜimnuta, je zjiÜt∞nφ aktußlnφho zv∞tÜenφ a posunutφ grafiky v SVG Vieweru (nezapome≥me - vektorovou grafiku lze neomezen∞ zv∞tÜovat bez ztrßty kvality) a nßsledn² p°epoΦet sou°adnic umis¥ovanΘho objektu.</p>
<div class='sample'>
//kontextova napoveda, Martin Hejral, 2004
<br />function napoveda(evt) {
<br /> //evt = objekt 'event' s informacemi o udalosti
<br /> //zjisti ukazatel na textovy informacni objekt
<br /> var obj = document.getElementById('info');
<br /> //zjisti jmeno tagu zdrojoveho objektu
<br /> var tag = evt.target.parentNode.tagName.toLowerCase();
<p>To¥ vÜe. Jen za sebe dodßm, ₧e p°esn∞ zde je skrytß velkß sφla grafiky ve znaΦkovacφm jazyce SVG, zde se otevφrß spousta mo₧nostφ pro aplikace. Äiv∞ si p°edstavuji t°eba detailnφ mapu m∞sta, kde jsou vÜechny objekty podrobn∞ popsßny ve standardnφch prvcφch <code>title</code> a <code>desc</code> - skript velmi podobn² tomu zde p°edstavenΘmu pak dßvß u₧ivateli tΘto mapy mo₧nost velmi pohodln∞ tyto informace zφskat...</p><div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=76' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>Kurz SVG - tvorba vektorovΘ grafiky v XML</a></h3><p>Pokud u₧ mßte dost suchΘ teorie Scalable Vector Graphics, nenφ nic sna₧Üφho, ne₧ se vrhnout na praktickΘ testovßnφ jeho mo₧nostφ. Kurz SVG vßm usnadnφ osvojenφ zßkladnφch struktur a vlastnostφ tohoto jazyka pro prßci s vektorovou grafikou. Tato sΘrie Φlßnk∙ dosud nebyla ukonΦena!</p><ul><li><strong>Kurz SVG - DOM a JavaScript p°i programovßnφ animacφ</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3662'>Kurz SVG - animace (praktickΘ ukßzky pro pokroΦilΘ)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3608'>Kurz SVG - animace (dynamika zm∞ny hodnot)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3578'>Kurz SVG - animace (praktickΘ ukßzky)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3566'>Kurz SVG - animace (Φasovßnφ)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3530'>Kurz SVG - nenφ to Flash a p°ece se toΦφ!</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3514'>Kurz SVG - transformace sou°adnic</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3506'>Kurz SVG - o°ezßvßnφ a maskovßnφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3483'>Kurz SVG - vypl≥ovßnφ II</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3476'>Kurz SVG - vypl≥ovßnφ I</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3469'>Kurz SVG - text</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3464'>Kurz SVG - grafickß primitiva</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3460'>Kurz SVG - struktura dokumentu, zobrazovacφ a vykreslovacφ model</a></li></ul></div>
