Kurz SVG – bitmapové efekty (definice W3C, parametry osvětlení)
Obsah
Související
Máte-li již základní představu o tom, co jsou a co mohou SVG filtry, je na čase, abyste se blíže seznámili s jejich specifikací a zápisem do SVG kódu. Kromě obecného mechanismu definice a následné aplikace filtru si ukážeme také specifické filtry pro nastavení osvětlení objektů v SVG.
Definice efektů podle organizace W3C
Funkce filtrů (originální SVG, cca 1 kB)
Objekt „filter“
Tento prvek slouží jako jakýsi kontejner, obsahující vlastní pracovní mechanismus SVG filtru. Jeho nejdůležitější funkcí je pojmenování výsledného efektu a rovněž nastavení rozlišení bitmapy, ve které budou probíhat výpočty elementárních filtrů.
Použiji-li analogii s Photoshopem, pak lze prvek filter přirovnat k vytvoření nového, prázdného obrazu.
<filter id=’jmeno‘ filterUnits=’objectBoundingBox‘
x=’0%‘ y=’0%‘ width=’100%‘ height=’100%‘>
<!– obsah filtru zde –>
…
</filter>
Čistě pro pořádek připomínám, že zatímco u vektorů pojem rozlišení v podstatě nemá smysl, pro bitmapové (alias rastrové) obrazy je rozlišení naopak stěžejním parametrem. Velmi zjednodušeně a populárně řečeno – čím vyšší rozlišení, tím více grafických detailů.
Pro profesionály nic nového pod sluncem, ale přesto si dovoluji zdůraznit základní pravidlo velmi úzce související s výpočetním výkonem a paměťovou kapacitou použitého hardware – zvyšujeme-li rozlišení bitmapové grafiky, roste spotřeba operační paměti s rozlišením kvadraticky. To samé platí o výpočetní náročnosti filtru.
V praxi je proto třeba velmi dobře uvážit tento parametr a nenastavovat rozlišení filtrů ani o fous výše, než je nutné – jinak uživatele a „čtenáře“ našich SVG grafik dokonale znechutíme šnečím tempem vykreslování.
Atributy:
filterUnits– nepovinný atribut určuje jednotky, pomocí kterých se bude definovat pracovní plocha filtru; možné hodnoty: userSpaceOnUse (výchozí hodnota, která přikazuje použít jednotky souřadnicového systému ve kterém je prvekfiltervyvolán), objectBoundingBox (jednotky relativní k ohraničovacímu rámečku filtrované grafické skupiny, „100 %“ odpovídá celkové velikosti skupiny).primitiveUnits– specifikuje souřadnicový systém pro délkové údaje uvnitř filtru; možné hodnoty: stejné jako u předcházejícího atributu.x,y,width,height– určuje velikost pracovní plochy filtru (filter effects region); výchozí hodnoty: -10 %, -10 %, 120 %, 120 %. Upozorňuji, že podivné výchozí hodnoty nejsou náhodné – je to proto, že výsledek některých operací – typicky rozostření – má větší rozměry než původní grafika. Častou chybou SVG grafiky, kterou lze nalézt na internetu, je právě málo rozšířená plocha pro bitmapové výpočty, způsobující na hranách filtrovaných grafických prvků nehezké zubaté ukončení…filterRes– nepovinný atribut určuje rozlišení bitmapy ve které probíhá výpočet filtru, možno udat pro X a Y osu zvlášť.xlink:href– případný URI odkaz na další filtr (umístěný ovšem ve stejném SVG fragmentu). Jinak řečeno – lze libovolně vnořovat a kombinovat více oddělených prvkůfilter.
Poněkud netradičním využitím parametru filterRes – tedy jeho dostatečným snížením – lze napodobit efekt „Mosaic“ z Photoshopu
Používání efektů – atribut „filter“
Aktivace efektů SVG probíhá jejich zápisem do atributu filter, který lze přiřadit stejně tak ke skupině, jako třeba jen k jednomu konkrétnímu grafickému prvku.
Obsahem tohoto atributu je URI reference na prvek filter, který chceme aplikovat na příslušný grafický element nebo skupinu.
<rect … fill=“…“ filter=“url(#filtr)“/>
<g filter=“url(#zase_filtr)“/>
…
</g>
Přístup k obrazu pozadí
Jedním z možných vstupů pro bitmapové efekty jsou dva speciální objekty BackgroundImage (pozadí RGBA) a BackgroundAlpha (pouze průhlednost pozadí), které představují původní obsah plochy, na kterou se náš filtr aplikuje.
Zavedení této vlastnosti má zvláštní dopad na implementaci prohlížeče, potažmo na systémové hardwarové zdroje. Je totiž nutné vytvořit kopii původní vykreslené oblasti a vyčlenit pro ni dodatečnou paměť.
Protože některá zařízení – obzvláště mobilní – disponují omezeným výkonem, musí tvůrce grafiky explicitně určit, zda bude tuto kopii pozadí doopravdy potřebovat. SVG prohlížeč může tedy alokovat paměť, jen pokud je to skutečně nutné.
Alokaci paměti zařídí atribut, který se přidá k nadřazenému kontejnerovému prvku (například svg, g, symbol):
enable-background– možné hodnoty: accumulate (výchozí hodnota), new [x y width height] (rozměry jsou nepovinné a slouží ke zmenšení kopírované a ukládané oblasti pozadí), inherit (zděděná hodnota).
Parametry osvětlení
SVG filtry umožňují velice flexibilní práci s osvětlením objektů. Základem jsou filtry vkládající do „scény“ zdroj světla a popisující jeho specifické vlastnosti, které se následně promítnou do zobrazení objektů.
Vzdálený zdroj světla: „feDistantLight“
Zdánlivě „velmi vzdálený“ zdroj světla, jehož paprsky proto mají s dostatečnou přesností v každém bodu grafiky stejný směr.
Atributy:
azimuth– ve stupních zapsaný směrový úhel osvětlení v rovině XY.elevation– ve stupních zapsaný směrový úhel osvětlení v rovině YZ.
Bodový zdroj světla: „fePointLight“
Zdánlivě „blízký“ zdroj světla, jehož paprsky proto mají v každém bodu grafiky jiný směr.
Atributy:
x,y,z– umístění zdroje v 3D prostoru (podle konvence Z souřadnice rostou ve směru pohledu pozorovatele hledícího na grafický obsah).
Zdroj světla typu „spot“ (reflektor): „feSpotLight“
U tohoto světla klesá intenzita osvětlení exponenciálně směrem od maximálně osvětleného středu až po vnější omezující úhel.
Atributy:
x,y,z– umístění zdroje v 3D prostoru (podle konvence Z souřadnice rostou ve směru pohledu pozorovatele hledícího na grafický obsah).pointsAtX,pointsAtY,pointsAtZ– poloha cíle (bodu), na který je reflektor zaměřen.specularExponent– hodnota exponentu, určujícího zaostření reflektoru; výchozí hodnota se rovná 1.limitingConeAngle– úhel omezující osvětlenou oblast je měřen od osy světelného kužele; pokud tuto hodnotu nedefinujeme, nebude nasvícená oblast nijak omezena.
