<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 - nenφ to Flash a p°ece se toΦφ!</h2>
<p id='prepend'>Deklarativnφ animace umo₧≥ujφ velmi snadnΘ animovßnφ grafick²ch objekt∙ bez pou₧itφ skript∙. Tento zp∙sob se oznaΦuje jako "time-based" - m∙₧ete definovat p°esn∞ naΦasovanou zm∞nu vpodstat∞ jakΘhokoli parametru grafiky, poΦφnaje rozm∞ry, polohou a pr∙hlednostφ a₧ t°eba po zm∞nu transformaΦnφch atribut∙. To je hlavnφ rozdφl oproti SWF formßtu, kde se Φasovßnφ animacφ v₧dy odvφjφ od jednotliv²ch klφΦov²ch snφmk∙ - anglicky "frame-based". DalÜφ d∙le₧it² rozdφl je v tom, ₧e jednotlivΘ deklarativnφ animace mohou b²t na sob∞ zcela nezßvislΘ a mφt jinou dobu trvßnφ nebo poΦet opakovßnφ a podobn∞.</p>
<p>Deklarativnφ p°φstup mß takΘ velkou v²hodu ve snadnΘm, p°esn∞ definovanΘm p°enosu animacφ nap°φΦ cel²m spektrem softwarov²ch aplikacφ. AnimaΦnφ prvky SVG byly vyvinuty ve spoluprßci s pracovnφ skupinou <a href='http://www.w3.org/AudioVideo/'>W3C Synchronized Multimedia</a> (SYMM), kterß vytvo°ila specifikaci Synchronized Multimedia Integration Language 1.0. Technologie <a href='http://interval.cz/serial.asp?serial=75' title='Interval.cz: Synchronized Multimedia Integration Language'>SMIL</a> mß p°itom u₧ dnes pom∞rn∞ silnou podporu v p°ehrßvaΦφch jako QuickTime nebo RealPlayer.</p>
<h3>Odkazy v SVG</h3>
<p>JeÜt∞ ne₧ se pono°φme do animacφ, povφme si n∞co mßlo o tom, jak v SVG vytvß°et odkazy. Ty jsou toti₧ zßkladem interaktivity. Obdoba hyperlinku znßmΘho z klasickΘho HTML vypadß takto:</p>
<div class='sample'>
<a xlink:href="http://www.w3.org">
<br /> <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
<br /> fill="red" />
<br /></a>
</div>
<p>VÜechny grafickΘ objekty uvnit° elementu hyperlinku jsou aktivnφ - reagujφ jako odkaz. V uvedenΘm p°φkladu je to Φervenß elipsa.</p>
<p>DalÜφmi mo₧n²mi atributy jsou <code>xlink:title</code> pro pojmenovßnφ odkazu a <code>target</code> pro jmΘno rßmu ve kterΘm se mß otev°φt cφlov² dokument.</p>
<p>SVG mß ve slovnφku i analogii odkazu na konkrΘtnφ prvek ve strßnce. Jeliko₧ se v p°φpad∞ SVG jednß o grafick² objekt - obrßzek, je d∙le₧itΘ mφt mo₧nost adresovat konkrΘtnφ v²°ez kresby, jinak °eΦeno pohled, anglicky "view". V zßsad∞ jsou k dispozici dv∞ mo₧nosti:</p>
<li>kresba.svg#nejaky_pohled - odkazem na specißlnφ prvek <code>view</code> obsahujφcφ p°eddefinovan² pohled na grafick² dokument</li>
</ol>
</div>
<h4>Element <code>view</code></h4>
<p>P°ehled atribut∙ elementu:</p>
<div class='list'>
<ul>
<li><em>viewTarget</em> = (jmΘno_objektu) - (nepovinn²) pokud zadßme identifikßtor objektu, p°i°azenΘho ke konkrΘtnφmu pohledu, prohlφ₧eΦ by jej m∞l po aktivaci hyperlinku zv²raznit</li>
<li><em>viewBox</em> = (x y Üφ°ka v²Üka) - atribut umo₧nφ definovat virtußlnφ okno, kter²m se u₧ivatel po aktivaci hyperlinku bude na dokument dφvat: x, y nastavφ lev² hornφ roh; Üφ°ka a v²Üka pak urΦujφ rozsah virtußlnφho pohledu</li>
<li><em>preserveAspectRatio</em> = (typ_p°izp∙sobenφ_rozm∞r∙) - pou₧itφm "viewBox" m∙₧e dojφt i k neproporcionßlnφ deformaci pohledu, proto mßte k dispozici tento parametr, kter²m m∙₧ete nastavit chovßnφ prohlφ₧eΦe: "none" umo₧nφ deformaci sou°adnic a hodnota, nap°φklad "xMidYMid", p°izp∙sobφ grafiku proporcionßln∞ do pohledovΘho okna a navφc ji vycentruje v obou sm∞rech (toto je v²chozφ hodnota).</li>
<li><em>zoomAndPan</em> - nastavenφm na hodnotu "disable" mohou prvky <code>view</code> (taktΘ₧ vÜechny vn∞jÜφ prvky <code>svg</code>) zakßzat u₧ivateli manußln∞ m∞nit pohled a zv∞tÜenφ v prohlφ₧eΦi SVG (v²chozφ je "magnify" - vÜe povoleno)</li>
</ul>
</div>
<h3>Animace</h3>
<p>KlφΦovΘ pro pochopenφ je slovφΦko <strong>deklarativnφ</strong> - to znamenß, ₧e tv∙rce animace p°esn∞ definuje (deklaruje), ₧e dan² atribut konkrΘtnφho objektu bude animovßn (Φili jeho hodnota se bude m∞nit) v definovanΘm rozmezφ hodnot v konkrΘtnφm Φase od-do. SVG norma mß obrovskou Ükßlu mo₧nostφ, jak to ud∞lat. Velmi flexibilnφ je i urΦovßnφ Φasu - animace mohou b²t nap°φklad startovßny n∞jakou udßlostφ u₧ivatelskΘho rozhranφ (t°eba "onmouseover") nebo navßzßny na pr∙b∞h n∞jakΘ jinΘ SVG animace. Mo₧nostφ je tolik, ₧e vystaΦφ na n∞kolik Φlßnk∙.</p>
<h4>Vztah SVG v∙Φi SMIL</h4>
<p>SVG je jazyk odvozen² od W3C normy SMIL ("host language" v terminologii SMIL) a jako takov² tedy obsahuje animaΦnφ prvky v nφ definovanΘ - krom∞ nich ale byly definovßny i n∞kterΘ dalÜφ, aby se dosßhlo pokrytφ celΘ oblasti 2D grafiky.</p>
<p>Prvky definovanΘ ve specifikaci SMIL:</p>
<div class='list'>
<ul>
<li><em>animate</em> - m∞nφ hodnoty skalßrnφch atribut∙ v Φase</li>
<li><em>set</em> - zjednoduÜenφ prvku <code>animate</code> pou₧φvanΘ pro zm∞nu (animovßnφ) neΦφseln²ch atribut∙ typu <code>visibility</code></li>
<li><em>animateMotion</em> - pohybuje s prvkem podΘl zvolenΘ animaΦnφ k°ivky urΦujφcφ drßhu pohybu</li>
<li><em>animateColor</em> - pro zm∞nu barevn²ch hodnot</li>
</ul>
</div>
<p>Prvky vztahujφcφ se specißln∞ k SVG animacφm</p>
<div class='list'>
<ul>
<li><em>animateTransform</em> - animuje transformaΦnφ atributy, velmi siln² nßstroj - jeliko₧ je mo₧nΘ jednotlivΘ typy animacφ kombinovat, lze pohodln∞ vytvo°it libovolnΘ pohybovΘ efekty</li>
<li><em>mpath</em> element - vektorovß cesta, kterou lze umφstit do prvku <code>animateMotion</code> a definovat tak p°esn∞ drßhu pohybu</li>
<li><em>keyPoints</em> - tento attribut je dalÜφm rozÜφ°enφm elementu <code>animateMotion</code> a umo₧≥uje °φdit zrychlenφ, nejΦast∞jÜφ pou₧itφ je evidentnφ - vytvo°enφ p°irozen²ch pohybov²ch efekt∙</li>
<li><em>rotate</em> - dalÜφ atribut pro prvek <code>animateMotion</code>, kter² °φdφ sm∞r natoΦenφ animovanΘho objektu (nap°φklad dφvßme-li se shora na auto pohybujφcφ se po k°ivce, jeho ÜpiΦka by se samoz°ejm∞ m∞la stßle natßΦet ve sm∞ru jφzdy)</li>
</ul>
</div>
<h4>Animace prakticky</h4>
<p>Abychom stßle jen neteoretizovali, vyzkouÜφme si nynφ mal² <a href='podklady/hejral/963/092-anim-demo.svg'>p°φklad</a>, ve kterΘm jsou animovßny jednotlivΘ atributy "width", "x" a "fill" obdΘlnφk∙:</p>
<div class='sample'>
<?xml version="1.0" encoding="UTF-8"?>
<br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
<p>Na tomto mφst∞ musφm odboΦit a ud∞lat praktickou poznßmku t²kajφcφ se prohlφ₧eΦ∙. Bohu₧el zatφm stßle platφ, nepoΦφtßm-li komerΦnφ p°ehrßvaΦe pro mobilnφ za°φzenφ, ₧e v∞tÜina animacφ je zcela sprßvn∞ interpretovßna pouze v programu <a href='http://www.adobe.com/svg/'>Adobe SVG Viewer 3</a> (ASV3). Pom∞rn∞ slibn²m v²vojem prochßzφ v poslednφ dob∞ prohlφ₧eΦ <a href='http://svg.kde.org'>KSVG</a>, integrovan² v unixovΘm grafickΘm prost°edφ KDE od verze 3.2. Nap°φklad p°edchozφ ukßzku je mo₧nΘ animovat i v KSVG (viz komentß°e v SVG k≤du), ale u dalÜφch ji₧ budete v∞tÜinou pot°ebovat ASV3.</p>
<h3>Zßkladnφ struktura zßpisu animaΦnφch prvk∙ - atributy</h3>
<p>V tΘto Φßsti si probereme ty atributy, kterΘ naleznou vyu₧itφ ve v∞tÜin∞ animaΦnφch prvk∙.</p>
<h4>Odkaz na animovan² element</h4>
<p>Atribut "xlink:href" obsahuje URI odkazujφcφ na cφlov² element, jen₧ musφ b²t v aktußlnφm SVG fragmentu, aby byla zaruΦena jeho dostupnost. URI musφ ukazovat na <em>p°esn∞ jeden</em> element. Toto URI lze dokonce vynechat - animovßn pak bude <em>rodiΦovsk² prvek</em> p°φmo nad°azen² danΘmu objektu <code>animate</code>.</p>
<h4>UrΦenφ animovanΘho atributu</h4>
<p>Atribut "attributeName" - zde urΦφte atribut, kter² byste cht∞li v animaci m∞nit - pro animaci pohybu to m∙₧e b²t t°eba "x".</p>
<p>Atribut "attributeType" - mo₧nΘ hodnoty: "CSS", "XML", "auto". UrΦenφ jmennΘho prostoru XML ve kterΘm je definovßn cφlov² atribut. V²chozφ hodnota je "auto" a v naprostΘ v∞tÜin∞ p°φpad∙ nebude v∙bec nutnΘ se tφmto parametrem zab²vat.</p>
<h4>UrΦenφ rozsahu hodnot</h4>
<p>Nßsledujφcφ t°i atributy umo₧≥ujφ nastavit rozmezφ, ve kterΘm se v pr∙b∞hu animovßnφ budou hodnoty m∞nit. (V prvku <code>set</code> se uplatnφ jen posledn∞ jmenovan².)</p>
<div class='list'>
<ul>
<li><em>from</em> - poΦßteΦnφ hodnota animovanΘho atributu.</li>
<li><em>by</em> - zm∞na hodnoty v∙Φi poΦßteΦnφmu stavu. Pokud nastavφme "by", nebudeme u₧ nastavovat koneΦnou hodnotu "to" a naopak - je-li urΦena absolutnφ koneΦnß hodnota, nebudeme nastavovat "by".</li>
<li><em>to</em> - koneΦnß hodnota animace.</li>
</ul>
</div>
<h4>Zachovßnφ v²sledku animace</h4>
<p>Atributem "fill" m∙₧ete urΦit, zda pracovnφ v²sledek animace z∙stane zachovßn (freeze) i po jejφm skonΦenφ nebo bude odstran∞n (remove - v²chozφ hodnota).</p>
<h4>Aditivnost a kumulativnost animovan²ch hodnot</h4>
<p>Velmi Φasto je p°i animaci u₧iteΦnΘ mφt mo₧nost m∞nit n∞jakou hodnotu (polohu, natoΦenφ) relativn∞ k poΦßteΦnφmu, klidovΘmu stavu. P°edstavme si nap°φklad "rozt°esenφ" animovanΘho objektu okolo jeho klidovΘ polohy - u₧ijete-li nßsledujφcφch atribut∙, nebudete se u₧ muset v∙bec zajφmat o jeho absolutnφ polohu. (Pro animace polohy se samoz°ejm∞ nabφzφ jeÜt∞ alternativnφ °eÜenφ tΘto ·lohy pomocφ zm∞ny sou°adnicovΘho systΘmu, ale to nynφ nenφ d∙le₧itΘ.)</p>
<p>Atribut "additive" urΦφ, zda aktußlnφ animovanß hodnota nahradφ klidovou hodnotu atributu (replace - v²chozφ hodnota) nebo se k nφ bude p°iΦφtat (sum).</p>
<p>Atribut "accumulate" - kumulativnost se uplatnφ v p°φpad∞ animaΦnφch cykl∙, kterΘ prob∞hnou vφce ne₧ jednou. Funguje to p°esn∞ tak, jak byste Φekali - jestli₧e ji nastavφte na hodnotu "sum", pak se k aktußlnφ hodnot∞ animace p°iΦφtß hodnota, kterou m∞l animovan² atribut na konci p°edchßzejφcφho cyklu.</p>
<h4>P°φklad pou₧itφ atribut∙</h4>
<div class='list'>
<rect width="20px" ...>
<br /> <animate attributeName="width"
<br /> from="0px" to="10px" dur="10s"
<br /> additive="sum" accumulate="sum"
<br /> repeatCount="5"/>
<br /></rect>
</div>
<p>Na konci prvnφho opakovßnφ bude hodnota "width" rovna 30 px, na konci cruhΘho cyklu 40 px a tak dßle. A nynφ jeÜt∞ reßlnß <a href='podklady/hejral/963/0935-anim-additive.svg'>demonstrace</a> (Φty°i animovanΘ obdΘlnφky, ka₧d² s r∙znou kombinacφ t∞chto atribut∙):</p>
<div class='sample'>
<?xml version="1.0" encoding="UTF-8"?>
<br /> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
<h3>Zßkladnφ struktura zßpisu animaΦnφch prvk∙ - elementy</h3>
<p>V tΘto Φßsti si probereme elementy, pomocφ nich₧ budeme provßd∞t animace v SVG.</p>
<h4>Element <code>animate</code></h4>
<p>Zcela obecn² prvek, pou₧iteln² k animaci vÜech Φφseln²ch hodnot. V dalÜφch Φßstech poznßte specializovan∞jÜφ elementy, urΦenΘ t°eba jen a pouze k animaci pohybu...</p>
<p><em>Pomocφ jednoho animaΦnφho prvku lze m∞nit v Φase prßv∞ jeden atribut.</em> Ne vÜechny atributy a ne vÜechny elementy mohou b²t zapojeny do deklarativnφch animacφ. Nebojte se ale, v∞tÜinou bude vÜe velmi intuitivnφ a p°φpadnΘ nejasnosti si m∙₧ete ov∞°it v tabulkov²ch p°ehledech normy SVG.</p>
<h4>Element <code>set</code></h4>
<p>Tento prvek provßdφ p°esn∞ to, co naznaΦuje jeho anglick² v²znam - nastavφ dan² atribut na danou hodnotu v p°esn∞ definovan² Φasov² ·sek. Vyu₧ijete ho v∞tÜinou p°i operacφch s dvoustavov²mi prom∞nn²mi, nap°φklad typu viditelnost (skryj Φi uka₧ n∞jak² prvek) nebo zm∞na textu. Tento animaΦnφ prvek logicky nem∙₧e pracovat aditivn∞ ani kumulativn∞.</p>
<p>Atribut "to" urΦφ hodnotu, kterß bude nastavena po dobu trvßnφ animace.</p>
<h4>Element <code>animateColor</code></h4>
<p>Atributy "from", "by" a "to" v tomto p°φpad∞ samoz°ejm∞ specifikujφ hodnoty barev, p°iΦem₧ je n∞kolik povolen²ch zp∙sob∙ zßpisu - analogicky, tak jak je zapisujete kdy₧ definujete barvy v²plnφ a tah∙. Do hry vstupuje tΘ₧ atribut "color-interpolation" popsan² ji₧ d°φve v Φßsti o vypl≥ovßnφ.</p>
<p>Tento prvek umo₧≥uje animovat transformaΦnφ atributy normy SVG. A ty dovolujφ elegantn∞ uskuteΦnit naprosto libovolnΘ polohovΘ transformace, zm∞nu m∞°φtka, zkosenφ...</p>
<p>Atributy elementu <code>animateTransform</code>:</p>
<div class='list'>
<ul>
<li><em>attributeName</em> - tento atribut bude v₧dy nastaven takto: <samp>attributeName="transform"</samp></li>
<li><em>type</em> - urΦenφ typu transformace</li>
<li><em>from</em>, <em>by</em>, <em>to</em> - proto₧e v∞tÜina transformaΦnφch operacφ mß vφce ne₧ jeden parametr, budou v tomto p°φpad∞ obsahem t∞chto atribut∙ vÜechny po₧adovanΘ hodnoty. Nap°φklad rotace s poΦßteΦnφm ·hlem 30 stup≥∙ a st°edem otßΦenφ v bod∞ [25,25] se zapφÜe takto:
<p>Typy transformacφ (hodnoty v hranat²ch zßvorkßch jsou nepovinnΘ, volitelnΘ podle typu po₧adovanΘ transformace):</p>
<ul>
<li>"translate" - posun_x [,posun_y]</li>
<li>"scale" - m∞°φtko_x [,m∞°φtko_y] - zapφÜe-li se zde pouze jedna hodnota, bude pou₧ita pro zm∞nu m∞°φtka v obou sou°adnicov²ch osßch, jinak bude nßsobenφ pro ka₧dou osu rozdφlnΘ</li>
<li>"rotate" - ·hel [st°ed_x st°ed_y] - pozor, neuvede-li se na tomto mφst∞ st°ed otßΦenφ, bude se dotyΦn² objekt otßΦet nikoli okolo svΘ osy, ale okolo bodu se sou°adnicemi (0,0)</li>
</div><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><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><strong>Kurz SVG - nenφ to Flash a p°ece se toΦφ!</strong> (prßv∞ Φtete)</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>
<h4><a href='http://interval.cz/__redirect/redirect.asp?what=interval_booknews&url=http://interval.inshop.cz/inshop/scripts/detail.asp?ItemID=270'>CSS pro zelenßΦe</a></h4>
