<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 - struktura dokumentu, zobrazovacφ a vykreslovacφ model</h2>
<p id='prepend'>V ostatnφch textech o SVG jsme si osv∞tlili historickΘ ko°eny a princip grafickΘho formßtu SVG, ukßzali jsme si jeho pozadφ, ale ne°ekli jsme nic o n∞m samΘm. Nastal Φas splatit dluhy a podφvat se do jeho "slovnφku". Jeliko₧ je formßt Scalable Vector Graphics velmi komplexnφ, zaΦneme se strukturou dokumentu, abychom m∞li pevn² zßklad.</p>
<p>Sßm za sebe mohu prohlßsit, ₧e mne doslova nadchla vnit°nφ logiΦnost a promyÜlenost ka₧dΘho detailu. Kdysi bylo na adresu HTML °eΦeno cosi v tom smyslu, ₧e jeho ·sp∞ch spoΦφvß ve schopnosti vytvß°et hypertextovΘ dokumenty minimßlnφmi prost°edky (primitivnφ textovΘ editory) s maximßlnφ mo₧nou jednoduchostφ a pr∙hlednostφ. Dovoluji si tvrdit, ₧e podobnΘ vlastnosti najdete i v jazyce SVG.</p>
<h3>Struktura SVG dokumentu</h3>
<p>Ka₧d² malφ° si musφ nejd°φve p°ipravit plßtno - krom∞ nezbytnΘho zßhlavφ si ukß₧eme i dalÜφ prvky, kterΘ vßm ze zaΦßtku mo₧nß budou p°ipadat nezajφmavΘ, ale pozd∞ji, a₧ pokroΦφme od prostΘho vytvß°enφ grafick²ch tvar∙ o n∞co dßle, vßm umo₧nφ provßd∞t spoustu Üikovn²ch trik∙. P°edem vÜak upozor≥uji, ₧e se - v zßjmu p°ehlednosti a snahy uÜet°it Φtenß°e p°emφry informacφ - nejednß v ₧ßdnΘm p°φpad∞ o vyΦerpßvajφcφ popis syntaxe jazyka SVG-XML. Pro ·plnΘ informace odkazuji na plnΘ zn∞nφ normy
<p>Fragment (nebo takΘ zlomek) SVG dokumentu definuje norma jako libovoln² poΦet grafick²ch prvk∙ (element∙) obsa₧en²ch v prvku <code>svg</code>. I kdy₧ se mluvφ o zlomku, obsahuje vÜechny nßle₧itosti pot°ebnΘ ke korektnφmu zobrazenφ. Fragment SVG dokumentu m∙₧e existovat jako odd∞len² samostatn² soubor (viz nßsledujφcφ p°φklad), nebo m∙₧e b²t zabudovßn uvnit° jinΘho rodiΦovskΘho XML dokumentu (embedded inline).</p>
<div class='sample'>
<?xml version="1.0" standalone="no"?>
<br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<br /><span class='comment'>Zobrazenφ SVG fragmentu - zßkladnφ struktury vÜech SVG obrßzk∙ (<a href='podklady/hejral/868/011.svg'>originßlnφ SVG, cca 1 kB</a>)</span>
</div>
<p>Elementy <code>svg</code> se mohou objevit i uvnit° jin²ch SVG fragment∙, jin²mi slovy, je mo₧nΘ jejich vφcenßsobnΘ vno°ovßnφ. Lze toho vyu₧φt nap°φklad k nastavenφ vlastnφho sou°adnicovΘho systΘmu pro ·sek vno°enΘho k≤du.</p>
<p><strong>Jednotky</strong>: PovÜimn∞te si prosφm, ₧e m∙₧ete pou₧φvat v podstat∞ libovolnΘ jednotky - zcela stejn∞, jako v <acronym title='Cascading Style Sheets'>CSS</acronym>, tedy px, mm, cm, pt, em...</p>
<p><strong>Atributy</strong>:</p>
<div class='list'>
<ul>
<li><em>x</em>, <em>y</em> (sou°adnice) - tyto atributy znamenajφ p°esn∞ to, co vyjad°uje jejich nßzev (poΦßtek sou°adnic v levΘm hornφm rohu), vcelku logicky nemajφ v²znam pro vn∞jÜφ <code>svg</code> fragment</li>
<li><em>width</em> (dΘlka) - Üφ°ka kreslicφho plßtna; pokud nenφ definovßna, pou₧ije prohlφ₧eΦ hodnotu 100 % (v²chozφ nebo tΘ₧ default hodnota)</li>
<li><em>height</em> (dΘlka) - v²Üka kreslicφho plßtna; pokud nenφ definovßna, pou₧ije prohlφ₧eΦ hodnotu 100 % (v²chozφ nebo tΘ₧ default hodnota)</li>
<li><em>viewBox</em> (x y Üφ°ka v²Üka) - atributy umo₧≥ujφ zm∞nit sou°adnicov² systΘm uvnit° SVG fragmentu takto: x, y nastavφ poΦßtek virtußlnφch sou°adnic (vlevo naho°e) uvnit° SVG fragmentu, Üφ°ka a v²Üka pak urΦujφ rozsah virtußlnφch sou°adnic (ideßlnφ nap°φklad pro "napasovßnφ" grafiky do obdΘlnφku o rozm∞rech, kterΘ p°edem nejsou znßmΘ - v²born² prost°edek k vytvß°enφ grafiky p°izp∙sobujφcφ se velikosti okna prohlφ₧eΦe!); takov² virtußlnφ sou°adnicov² systΘm lze vytvo°it tΘ₧ uvnit° element∙ <code>symbol</code> a <code>image</code> (aplikuje-li se v SVG fragmentu tento atribut, pak se dalÜφ rozm∞rovΘ ·daje v rßmci tohoto bloku u₧ v∞tÜinou zapisujφ bez jednotek, jak si ostatn∞ m∙₧ete povÜimnout i v dalÜφch ukßzkßch SVG dokument∙)</li>
<li><em>preserveAspectRatio</em> (typ_p°izp∙sobenφ_rozm∞r∙) - pou₧itφm "viewBox" m∙₧e dojφt i k neproporcionßlnφ deformaci, 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∞, tak, aby byla vid∞t celß, a navφc ji vycentruje v obou sm∞rech (toto je v²chozφ a ve v∞tÜin∞ p°φpad∙ takΘ nejvhodn∞jÜφ hodnota)</li>
</ul>
</div>
<p>Nßsledujφcφ p°φklad ukazuje, jak m∙₧ete umφstit grafiku, kterß se p°izp∙sobφ velikosti obrazovky, tak₧e ji u₧ivatel uvidφ zcela sprßvn∞ i na svΘm mobilu, kter² m∙₧e mφt obraz Üirok² °ekn∞me 240 a vysok² 320 pixel∙. Viditelnß kresba v tomto p°φpad∞ musφ samoz°ejm∞ obsahovat body s virtußlnφmi sou°adnicemi 0 a₧ 100 (grafik si je m∙₧e snadno p°edstavit jako procenta z celkovΘ velikosti plßtna).</p>
<div class='sample'>
<svg viewBox="0 0 100 100" version="1.1"
<br /> xmlns="http://www.w3.org/2000/svg">
</div>
<p>V nßsledujφcφm p°φpad∞ se identickß kresba naopak zdeformuje tak, aby zcela pokryla plochu virtußlnφho okna s pevnou velikostφ 240 x 320 obrazov²ch bod∙:</p>
<p>Element <code>g</code> m∙₧e slou₧it jako schrßnka (container) pro skupinu vno°en²ch objekt∙. Siln∞ se doporuΦuje jeho pou₧itφ ve spojenφ s elementy <code>desc</code> a <code>title</code>, k vytvo°enφ strukturovanΘho a dob°e zdokumentovanΘho grafickΘho dokumentu. Co₧, mimo jinΘ, umo₧nφ zp°φstupnit takovΘ dokumenty i handicapovan²m osobßm (specializovan² prohlφ₧eΦ by nap°φklad mohl navigovat "hlasem"), ale m∙₧e se velmi dob°e uplatnit t°eba i p°i popisu geografick²ch objekt∙ na SVG map∞ a podobn∞.</p>
<p>Pomocφ d∙v∞rn∞ znßmΘho atributu <code>id</code> se na grafickΘ elementy m∙₧ete odkazovat, nap°φklad pro pot°eby deklarativnφch animacφ nebo skriptovßnφ.</p>
<h4>Knihovnφ sekce - prvek <code>defs</code></h4>
<p>Kontejnerov² prvek <code>defs</code> pro elementy, na kterΘ se budeme pozd∞ji odkazovat. Jeho pou₧itφ nenφ striktn∞ vy₧adovßno, ale siln∞ se doporuΦuje. Jeho chovßnφ a funkce je obdobnß prvku <code>g</code>.</p>
<p>P°edstavte si nap°φklad prvek "P", kter² se odkazuje na n∞jak² p°eddefinovan² knihovnφ objekt "K" - pokud knihovnu s prvkem "K" dßte do sekce <code>defs</code>, kterß bude umφst∞na ihned na poΦßtku rodiΦovskΘho prvku elementu "P", umo₧nφte tφm prohlφ₧eΦi efektivn∞jÜφ streamovßnφ.</p>
<h4>Knihovnφ objekt - prvek <code>symbol</code></h4>
<p>Prvek <code>symbol</code> definuje elementy pro vφcenßsobnΘ pou₧itφ (tΘ₧ knihovnφ prvky nebo prost∞ symboly), kterΘ jsou jednoznaΦn∞ identifikovßny dob°e znßm²m atributem <samp>id="jmeno_symbolu"</samp>. P°eddefinovan² prvek lze pozd∞ji mnohonßsobn∞ vklßdat do kresby pomocφ elementu <code>use</code>.</p>
<p>Ze strukturnφho hlediska je <code>symbol</code> podobn² objektu <code>g</code> s nßsledujφcφmi zßsadnφmi rozdφly:</p>
<div class='list'>
<ul>
<li><code>symbol</code> sßm o sob∞ se nikdy nevykreslφ, pouze jeho instance (tedy odkazy s pou₧itφm prvku <code>use</code>)</li>
<li><code>symbol</code> mß (v²Üe popsanΘ) atributy <code>viewBox</code> a <code>preserveAspectRatio</code></li>
<li><code>symbol</code> lze pou₧φvat v r∙zn²ch velikostech pomocφ atribut∙ (x, y, width, height) v prvku <code>use</code></li>
</ul>
</div>
<h4>Pou₧itφ objektu z knihovny - <code>use</code></h4>
<p>Element <code>use</code> odkazuje na knihovnφ prvek (<code>symbol</code>), kter² se zobrazφ na mφst∞ grafickΘ struktury, kde byl prvek <code>use</code> pou₧it. Vznikne jakßsi virtußlnφ kopie p°φsluÜnΘho prvku <code>symbol</code>, kterß se ale neobjevφ ve struktu°e SVG DOM, tam z∙stßvß pouze samotn² objekt <code>use</code>!</p>
<p><strong>Atributy</strong>:</p>
<div class='list'>
<ul>
<li><code>xlink:href</code> - URI reference na symbol (knihovnφ objekt)</li>
<li><code>x</code>, <code>y</code> - poloha</li>
<li><code>width</code>, <code>height</code> - Üφ°ka a v²Üka; tyto nepovinnΘ atributy jsou pou₧ity ke zm∞n∞ velikosti vklßdanΘho symbolu</li>
</ul>
</div>
<p>Pozor, animujete-li knihovnφ objekt (<code>symbol</code>), vÜechny jeho instance by p°i sprßvnΘ implementaci m∞ly z∙stat animovanΘ! (Ideßlnφ p°φle₧itost pro kreativce a dokonal² "prubφ°sk² kßmen" pro prohlφ₧eΦe...)</p>
<h4>Obrßzek - element <code>image</code></h4>
<p>Prvek <code>image</code> pro vlo₧enφ obrßzku do tΘto kapitoly zdßnliv∞ nepat°φ, jen₧e podle SVG normy m∙₧ete do grafickΘho obsahu vlo₧it nejen PNG, JPEG ale i dalÜφ SVG soubor (v tomto p°φpad∞ jsou animace ignorovßny). Vzhledem ke komplexnosti takovΘ ·lohy se urΦit∞ jednß o dalÜφ v²bornou p°φle₧itost k testovßnφ prohlφ₧eΦ∙ - pou₧φvejte velmi opatrn∞. V norm∞ nenφ zmφn∞n formßt GIF, ale jistΘ je, ₧e minimßln∞ ASV (Adobe SVG Viewer, viz <a href='http://interval.cz/clanek.asp?article=2564' title='Hejral, Martin: Pr∙vodce SVG - grafickΘ editory'>Pr∙vodce SVG - grafickΘ editory</a>) jej ve statickΘ podob∞ podporuje vΦetn∞ pr∙hlednosti.</p>
<li><code>preserveAspectRatio</code> (typ_p°izp∙sobenφ_rozm∞r∙) - vklßdan² obraz m∙₧e mφt jinΘ proporce, tφmto parametrem lze nastavit jeho rozm∞rovΘ p°izp∙sobenφ: "defer" znamenß pou₧itφ hodnoty "preserveAspectRatio" z vklßdanΘho SVG, "none" umo₧nφ deformaci obrazu, v²chozφ hodnota "xMidYMid" p°izp∙sobφ grafiku proporcionßln∞, tak, aby byla vid∞t celß, a navφc ji vycentruje v obou sm∞rech</li>
</ul>
</div>
<p>P°i vklßdßnφ SVG se stejnojmennΘ parametry externφho <code>svg</code> elementu ignorujφ a ty v elementu <code>image</code> dostßvajφ p°ednost.</p>
<p>V²sledkem naΦtenφ a zpracovßnφ obrßzku je v₧dy barevn² model RGBA (Φtvrt² kanßl pro pr∙hlednost), kter² je standardnφm internφm modelem v SVG.</p>
<h3>Zobrazovacφ a vykreslovacφ model</h3>
<p>SVG pou₧φvß takzvan² "malφ°∙v algoritmus" (<strong>painters model</strong>). P°edstavu o poΦφtaΦovΘm provedenφ si lze vytvo°it snadno, staΦφ si uv∞domit, ₧e prvky z fragmentu SVG se vykreslujφ v p°irozenΘm po°adφ, tak jak jsou v XML dokumentu za sebou (to znamenß, ₧e prvnφ objekt bude opticky vespod, v pozadφ - pozd∞jÜφ prvky jej p°ekr²vajφ).</p>
<p>VÜichni u₧ vφme, ₧e SVG zdaleka nejsou jen vektorovΘ tvary v kombinaci s obrßzky, jeho mo₧nosti jdou jeÜt∞ o t°φdu dßl. Aby mohly prohlφ₧eΦe sprßvn∞ vytvo°it vÜechny specißlnφ efekty, m∞ly by aktußlnφ element (p°φpadn∞ celou skupinu element∙) vykreslit nejd°φve v pomocnΘm bloku pam∞ti.</p>
<p>M∞jte tΘ₧ stßle na pam∞ti, ₧e se v₧dy pracuje v modelu RGBA - tedy RGB barvy plus takzvan² "alfa kanßl" pro ulo₧enφ pr∙hlednosti ka₧dΘho bodu. To je nutnΘ nejen kv∙li neomezen²m mo₧nostem maskovßnφ v norm∞ SVG, ale i pro implementaci efekt∙ (<strong>SVG filters</strong>). Filtry jsou toti₧ aplikovßny prßv∞ na tuto pomocnou pam∞¥. Obrovskou pru₧nost a kreativitu znßsobuje fakt, ₧e filtry m∙₧ete aplikovat nejen na kresbu, ale t°eba i na kanßl s pr∙hlednostφ.</p>
<p>Norma SVG explicitn∞ na°izuje prohlφ₧eΦ∙m pou₧itφ pomocnΘ obrazovΘ pam∞ti pro prvek <code>g</code>. (Obsah bufferu je p°itom inicializovßn na pr∙hlednou Φernou barvu.) A₧ po kompletnφm vykreslenφ vÜech objekt∙ ve skupin∞ se na toto pomocnΘ "plßtno" aplikujφ r∙znΘ efekty, a to p°esn∞ v nßsledujφcφm po°adφ:</p>
<div class='list'>
<ol>
<li>bitmapovΘ filtry</li>
<li>masky</li>
<li>pr∙hlednost</li>
</ol>
</div>
<p>Prohlφ₧eΦe majφ ztφ₧enou ·lohu tφm, ₧e <code>g</code> m∙₧e b²t vno°eno mnohonßsobn∞. Zd∙raz≥uji tento d∙le₧it² moment, jeliko₧ jde o zßkladnφ princip v SVG a je nutnΘ, abyste jej m∞li v₧dy na pam∞ti.</p>
<h4>Pravidla vykreslovßnφ objektu</h4>
<p>Nejd°φve se vykresluje v²pl≥, potΘ tah a nakonec p°φpadnΘ znaΦky (specißlnφ prvek SVG normy urΦen² pro vyznaΦovßnφ bod∙ ve kresb∞). Ka₧dß v²pl≥ a tah m∙₧e p°itom mφt libovolnou na sob∞ nezßvislou pr∙hlednost.</p>
<p>Podporovßny jsou nßsledujφcφ typy vypl≥ovßnφ pou₧itelnΘ pro v²pln∞ i tahy:</p>
<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=3479'>PPWizard - pokroΦilß makra, podmφnky a standardnφ definice</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3478'>Transformace dat z databßze pomocφ XSL v .NET jednoduÜe</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3481'>Strßnkovßnφ v ovlßdacφm prvku DataGrid bez pou₧itφ PostBack</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3477'>Zpracovßnφ databßzov²ch dat p°es XSLT v ASP</a></li>
</ul>
</div>
</div>
<div class='page-right-box cauldron'>
<h3>Diskuznφ kotel</h3>
<div class='page-right-box-in'>
<ul>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3473' title='(25 komentß°∙)'>Sedφm na konßri a Φtu Computerworld</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3468' title='(23 komentß°∙)'>PPWizard - tvo°φme a spravujeme WWW strßnky</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3474' title='(22 komentß°∙)'>PφÜeme pro web - o sφle slov</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3464' title='(15 komentß°∙)'>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=3472' title='(10 komentß°∙)'>Cryptography v .NET - Symmetric a Asymmetric encryption</a></li>
