<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))' />
<p id='prepend'>Standard SVG obsahuje kompletnφ sadu grafick²ch nßstroj∙ a nenφ mu cizφ ₧ßdn² postup vyu₧φvan² profesionßly. Rozdφl mezi formßtem SVG a zbytkem sv∞ta, lidov∞ °eΦno, se podobß rozdφlu mezi Mercedesem a Trabantem. V tomto Φlßnku si tedy probereme o°ezßvßnφ a maskovßnφ, co₧ jsou velmi silnΘ grafickΘ nßstroje, umo₧≥ujφcφ podstatn∞ m∞nit vzhled dokumentu.</p>
<p>Maskovßnφ a o°ezßvßnφ jsou sice podobnΘ grafickΘ operace, ale s pom∞rn∞ velk²m kvalitativnφm rozdφlem:</p>
<div class='list'>
<ul>
<li><em>O°ezovΘ cesty</em> (clipping paths) - dobrß p°edstava je takovß, jako by o°ezßvan² objekt byl podle obrysu tΘto vektorovΘ cesty vyst°i₧en z papφru n∙₧kami. Slovy modernφ poΦφtaΦovΘ grafiky, o°ezov² obrys p°edstavuje jednobitovou masku, pod kterou jsou maskovanΘ objekty vykresleny, zatφmco vn∞ nikoli.</li>
<li><em>Masky</em> (masks) - na rozdφl od prostΘho o°ezu m∙₧e mφt ka₧d² bod v masce r∙zn² stupe≥ pr∙hlednosti (typicky bude maska osmibitovß = 256 ·rovnφ pr∙hlednosti), v tomto p°φpad∞ tedy masku netvo°φ obrys maskovacφch objekt∙, ale jas jejich v²pln∞. Uv∞domte si i vyÜÜφ v²poΦetnφ nßroΦnost prßce s maskami, to je pravd∞podobn∞ dalÜφ d∙vod, proΦ jsme Φekali na podobnΘ funkce tak dlouho.</li>
</ul>
</div>
<p>Pro lepÜφ p°edstavu mohu vzφt p°φklad z oblasti profesionßlnφ grafiky. O°ezovΘ cesty, historicky samoz°ejm∞ starÜφ, p°edstavuje nap°φklad (dodnes dosti rozÜφ°en² zp∙sob) vklßdßnφ obrßzk∙ EPS s nastavenou o°ezovou cestou do sßzecφho programu QuarkXpress. Maskovßnφ na osobnφ poΦφtaΦe pravd∞podobn∞ p°inesl jako prvnφ slavn² Adobe Photoshop - sice ji₧ pom∞rn∞ brzy (od verze 3), ale vklßdßnφ do strßnek se zachovßnφm pr∙hlednosti dovolujφ a₧ nov∞jÜφ programy. Mßte-li zpr∙hledn∞nou obrazovou vrstvu s maskou v souboru formßtu PSD, m∙₧ete takov² soubor umφstit kup°φkladu do InDesignu od verze 2 nebo Corelu (tuÜφm od verze 9), kde bude maskovan² obraz stejn∞ pr∙hledn² jako v bitmapovΘm editoru.</p>
<h3>SluΦovßnφ maskovanΘho objektu s pozadφm</h3>
<p>TakzvanΘ <em>sluΦovßnφ</em> (simple alpha compositing) je d∙le₧it² termφn, kter² p°edstavuje postup, jak se maskovanΘ objekty vykreslujφ do ji₧ existujφcφho pozadφ. Maskovan² objekt je slouΦen (smφchßn) s existujφcφm pozadφm podle nßsledujφcφho vzorce, kter² ukazuje, jak se spoΦφtß v²slednß hodnota bodu pozadφ p°i slouΦenφ s bodem vykreslovanΘho elementu, jen₧ je ovlivn∞n maskou Φi pr∙hlednostφ:</p>
<div class='sample'>
Pr' = (1 - Ea) x Pr + Er
<br /> Pg' = (1 - Ea) x Pg + Eg
<br /> Pb' = (1 - Ea) x Pb + Eb
<br /> Pa' = 1 - (1 - Ea) x (1 - Pa)
</div>
<div class='list'>
<ul>
<li><em>Er</em>, <em>Eg</em>, <em>Eb</em> - barva Elementu x Ea</li>
<li><em>Ea</em> - pr∙hlednost Elementu</li>
<li><em>Pr</em>, <em>Pg</em>, <em>Pb</em> - barva Pozadφ x Pa</li>
<li><em>Pa</em> - pr∙hlednost Pozadφ</li>
<li><em>Pr'</em>, <em>Pg'</em>, <em>Pb'</em> - barva Pozadφ po slouΦenφ x Pa'</li>
<li><em>Pa'</em> - pr∙hlednost Pozadφ po slouΦenφ</li>
</ul>
</div>
<p>Pozor, aby se dosßhlo elegantnφho zßpisu, hodnoty barev jsou psßny jako <em>p°ednßsobenΘ</em> (premultiplied) hodnotou pr∙hlednosti (alpha).</p>
<h3>Co je "viewport"</h3>
<p>Na ·vod problematiky si budeme muset zavΘst jeden teoretick² pojem. V jakΘmkoli bod∞ kresby lze vytvo°it takzvan² <strong>viewport</strong>, co₧ je rßm, kter² Φinφ do n∞ho vlo₧enou grafiku do urΦitΘ mφry nezßvislou na nad°azenΘm obsahu. Aby n∞jak² prvek mohl vytvo°it viewport, musφ mφt atributy "x", "y", "width" a "height".</p>
<p>P°edevÜφm se uvnit° viewportu automaticky vytvo°φ nov² sou°adnicov² systΘm, kter² bude shodn² se systΘmem aktußlnφm v mφst∞ vlo₧enφ s tφm rozdφlem, ₧e se zm∞nφ poΦßtek sou°adnic - posune se na bod "x", "y" - m∞°eno v systΘmu aktußlnφm v mφst∞ vlo₧enφ. Dßle se logicky zm∞nφ v²znam procentnφch jednotek, tak₧e 100 % bude odpovφdat plnΘ Üφ°ce Φi v²Üce novΘho boxu. Sou°adnicov² systΘm lze navφc p°edefinovat nepovinn²m atributem "viewBox = (x y Üφ°ka v²Üka)" (viz tΘ₧ <a href='http://interval.cz/clanek.asp?article=3460' title='Hejral, Martin: Kurz SVG - struktura dokumentu, zobrazovacφ a vykreslovacφ model'>p°ehled atribut∙ elementu <code>svg</code></a>). Dßle se na takov² prvek aplikujφ atributy "overflow" a "clip", popsanΘ nφ₧e.</p>
<p>Nov² viewport vytvß°ejφ nßsledujφcφ prvky <code>svg</code>, <code>symbol</code> (kdekoliv je vyvolßn prvkem <code>use</code>), <code>image</code>, <code>pattern</code>, <code>marker</code> a <code>foreignObject</code> (vklßdßnφ obsahu v jinΘm XML jazyce).</p>
<h3>O°ezßvßnφ</h3>
<p>O°ezßvßnφ je starÜφ a jednoduÜÜφ metodou vykreslovßnφ Φßsti dokumentu urΦenΘ pomocφ hraniΦnφ k°ivky.</p>
<h4>Atributy "overflow" a "clip"</h4>
<p>P°esahuje-li obsah sv∙j rodiΦovsk² rßmec, podporuje SVG jako₧to W3C standard i CSS2 atributy "overflow" a "clip", ovliv≥ujφcφ p°etΘkßnφ a o°ezßvßnφ obsahu. Pravidla bylo nutno pro grafiku samoz°ejm∞ lehce rozÜφ°it, ale veÜkerß rozÜφ°enφ jsou velmi logickß a znalci pravidel CSS2 si budou p°ipadat jako doma. Oba atributy lze pou₧φt na vÜechny prvky, kterΘ vytvß°φ nov² "viewport". Musφme si takΘ uv∞domit, ₧e ka₧d² grafick² prvek bude v terminologii CSS v₧dy typu <em>block-level box</em>.</p>
<div class='list'>
<ul>
<li><em>overflow</em> - definuje, jak a kdy bude vnit°nφ rßm (grafick² prvek) o°φznut podle hranic rßmu, ve kterΘm je obsa₧en. Mo₧nΘ hodnoty atributu jsou: visible, hidden, scroll, auto, inherit.</li>
<li><em>clip</em> - specifikuje velikost a tvar o°ezanΘ oblasti (masky) nßsledujφcφm zp∙sobem: <code>style="clip: rect(shora, zprava, zdola, zleva);"</code>. Hodnoty uvnit° zßvorek p°edstavujφ p°φsluÜnΘ vzdßlenostφ m∞°enΘ od okraj∙ vn∞jÜφho rßmu. CSS2 p°itom povoluje pouze pravo·hl² o°ez. Vidφme, ₧e se poΦφtß s budoucφ mo₧nostφ o°ezßvat i jin²mi tvary ne₧ obdΘlnφkem, pou₧it² zßpis je ale bohu₧el s SVG nekompatibilnφ.</li>
</ul>
</div>
<h4>Vytvo°enφ o°ezovΘ cesty</h4>
<p>O°ezovß cesta se definuje uvnit° prvku <code>clipPath</code>. Pou₧φvß se odkazovßnφm pomocφ lokßlnφ URI v atributu "clip-path", kter² p°idßme k prvk∙m, je₧ chceme o°φznout. Lze provßd∞t dokonce takovΘ kejkle, jako nap°φklad aplikovat o°ez v atributu
"clip-path" na jin² element <code>clipPath</code>.</p>
<p>Element <code>clipPath</code> m∙₧e obsahovat vektorovΘ prvky <code>path</code> a <code>text</code>, zßkladnφ tvary typu <code>circle</code> a knihovnφ objekty <code>use</code> (odkazujφ-li pouze na prvky uveden²ch povolen²ch typ∙). Sßm o sob∞ se nevykreslφ.</p>
<li><em>clipPathUnits</em> - (nepovinn²) vybere jeden ze dvou mo₧n²ch sou°adnicov²ch systΘm∙ pro grafickΘ prvky masky; mo₧nΘ hodnoty: userSpaceOnUse (v²chozφ), objectBoundingBox. V p°φpad∞ tohoto atributu opakovan∞ doporuΦuji v∞novat extra pozornost nßsledujφcφm hodnotßm. Existuje toti₧ mnoho p°φpad∙, kdy z hlediska p°ehlednosti a elegance zßpisu je v²hodnΘ pou₧φvat sou°adnice relativnφ v∙Φi velikosti aktußln∞ zpracovßvanΘho objektu - jako auto°i dokumentu pak nap°φklad nemusφte m∞nit velikost Üipek na konci Φar, kdy₧ se zm∞nφ Üφ°ka dotyΦnΘ Φßry.
<ul>
<li>"userSpaceOnUse" - pou₧ije se aktußlnφ systΘm sou°adnic ve kter²ch je souΦasn² zpracovßvan² objekt definovßn Φi kreslen.</li>
<li>"objectBoundingBox" - tato hodnota aktivuje sou°adnicov² systΘm orientovan² uvnit° rßmeΦku ohraniΦujφcφho konkrΘtnφ prßv∞ zpracovßvan² objekt - sou°adnice (0,0), respektive (0%,0%), jsou v levΘm hornφm rohu a (1,1), respektive (100%,100%), v pravΘm spodnφm rohu ohraniΦenφ objektu; jin²mi slovy - tento sou°adnicov² systΘm se p°izp∙sobuje velikosti naÜeho objektu</li>
</ul>
</li>
<li><em>clip-rule</em> - (nepovinn²) je nutno aplikovat na vektorovΘ objekty uvnit° <code>clipPath</code>; mß identick² v²znam s "fill-rule" (viz <a href='http://interval.cz/clanek.asp?article=3476' title='Hejral, Martin: Kurz SVG - vypl≥ovßnφ I'>atributy definujφcφ vypl≥ovßnφ ploch</a>); mo₧nΘ hodnoty: nonzero (v²chozφ), evenodd, inherit</li>
</ul>
</div>
<div class='sample'>
<g>
<br /> <clipPath id="orez_cesta">
<br /> <path d="..." clip-rule="evenodd" />
<br /> </clipPath>
<br /> <rect clip-path="url(#orez_cesta)" ... />
<br /></g>
</div>
<h4>Aplikace o°ezu</h4>
<p>Vlastnφ pou₧itφ o°ezovΘ cesty je po vÜech definicφch u₧ hraΦkou - o°ezßvan² objekt (skupina objekt∙) pouze dostane navφc atribut <samp>clip-path="url(#orez_cesta)"</samp> odkazujφcφ na n∞jakΘ lokßlnφ URI.</p>
<div class='sample'>
<?xml version="1.0" encoding="UTF-8"?>
<br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN"
<img src='podklady/hejral/916/0633.png' alt='Zobrazenφ o°ezßvßnφ v SVG' title='Zobrazenφ o°ezßvßnφ v SVG' />
<br /><span class='comment'>Zobrazenφ o°ezßvßnφ v SVG (<a href='podklady/hejral/916/0633.svg'>originßlnφ SVG, cca 1 kB</a>)</span>
</div>
<h3>Maskovßnφ</h3>
<p>Maskovßnφ v norm∞ SVG znamenß, ₧e libovoln² grafick² objekt nebo skupina m∙₧e b²t pou₧ita jako takzvanß <em>maska pr∙hlednosti</em> (alpha mask) na jak²koli jin² objekt Φi skupinu p°i jejφm sluΦovßnφ s ji₧ vykreslen²m pozadφm.</p>
<p>Na rozdφl od prostΘho o°ezu m∙₧e mφt ka₧d² bod v masce r∙zn² stupe≥ pr∙hlednosti (typicky bude maska osmibitovß = 256 ·rovnφ pr∙hlednosti) - masku netvo°φ obrys maskovacφch objekt∙, ale jejich kresba, tedy p°esn∞ji jas jejich v²pln∞.</p>
<h4>Vytvo°enφ masky</h4>
<p>Masku definujeme pomocφ prvku <code>mask</code>. PotΘ je aplikovßna na grafiku p°ipojenφm odkazu v atributu "mask", vlo₧enΘho do konkrΘtnφho objektu Φi skupiny. Pokud jste ji₧ prostudovali o°ezßvßnφ pomocφ cesty, urΦit∞ vidφte formßlnφ shodnost maskovßnφ s o°ezßvacφ operacφ (clipPath = mask, clip-path = mask).</p>
<div class='sample'>
<g>
<br /> <mask id="maska">
<br /> <path d="..." />
<br /> </mask>
<br /> <rect mask="url(#maska)" ... />
<br /></g>
</div>
<p>Element <code>mask</code> ji₧ m∙₧e obsahovat prvky libovolnΘho typu - vΦetn∞ <code>image</code>, kter² nebyl v p°edchozφm p°φpad∞ povolen - a sßm o sob∞ se <code>mask</code> rovn∞₧ nevykreslφ. Praktickß realizace bude vypadat tak, ₧e se maskovacφ objekty vykreslφ do pomocnΘho alfa kanßlu (inicializovanΘho na "pr∙hlednou" Φernou) a nßsledn∞ se maskovan² objekt nebo skupina, po svΘm kompletnφm vykreslenφ, slouΦφ s pozadφm se zapoΦtenφm hodnot z p°ipravenΘho alfa kanßlu.</p>
<li><em>maskUnits</em> - (nepovinn²) typ sou°adnicovΘho systΘmu pro urΦenφ velikosti alfa kanßlu masky; mo₧nΘ hodnoty: userSpaceOnUse, objectBoundingBox (v²chozφ)</li>
<li><em>maskContentUnits</em> - (nepovinn²) typ sou°adnicovΘho systΘmu pro obsah masky; mo₧nΘ hodnoty: userSpaceOnUse (v²chozφ), objectBoundingBox</li>
<p>Pou₧itφ masky je ji₧ naprosto trivißlnφ - maskovan² objekt (skupina objekt∙) pouze dostane navφc atribut <samp>mask="url(#maska)"</samp> s lokßlnφm URI odkazem na vytvo°enou masku.</p>
<div class='sample'>
<?xml version="1.0" standalone="no"?>
<br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<div class='page-right-box reading'><h3 title='NejΦten∞jÜφ Φlßnky za poslednφch 7 dn∙'>NejΦten∞jÜφ</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=3549'>Hrßtky s okrajem textu v CSS</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3527'>Manußly aneb Jak jsem se nauΦil ned∞lat si starosti a mφt rßd internet</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3528'>PφÜeme pro web - odliÜte se od konkurence</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3546'>Zamezenφ vφcenßsobnΘho odeslßnφ formulß°e JavaScriptem</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3550'>Nßvrh aplikacφ v jazyce UML - textovß specifikace p°φpad∙ u₧itφ</a></li></ul></div></div><div class='page-right-box cauldron'><h3 title='Nejdiskutovan∞jÜφ Φlßnky za poslednφch 21 dn∙'>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=3533' title='(55 komentß°∙)'>Editory pro webdesignΘry - velk² programßtor</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3529' title='(40 komentß°∙)'>Zaklφnadla na spam</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3527' title='(22 komentß°∙)'>Manußly aneb Jak jsem se nauΦil ned∞lat si starosti a mφt rßd internet</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3517' title='(21 komentß°∙)'>PφÜeme pro web - podle Φeho se zßkaznφci rozhodujφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3549' title='(16 komentß°∙)'>Hrßtky s okrajem textu v CSS</a></li></ul></div></div>
