Annak ellenére, hogy az SVG vektorgrafikus leírónyelv, rendelkezik a raszteres képszerkesztőkhöz hasonló eszközökkel is. Számos lehetőségünk van arra, hogy egy geometrikus rajzon finomítsunk és raszteres hatású képet jelenítsünk meg. Erre szolgálnak a szűrők. A nyelv számos szűrő használatát engedi meg. Ezek közül most csak néhányat részletezünk. További lehetőségeket a specifikációban lehet találni.
Szűrők használatakor a kép megmarad vektorgrafikus formában, de a megjelenítése változik. A megjelenítő rasztergrafikus képet készít, majd alékalmazza az előírt módosításokat és az így létrejövő képet jeleníti meg a monitoron, nyomtatón.
Egy szűrőbeállításához a <filter> elemet használhatjuk. Elhelyezése a vágógörbe létrehozásával megegyezik: a dokumentum elején egy <defs> elemen belül kell létrehozni. Az elem csak egy keretet ad a hatások felsorolásához, a szerkezete hasonlít a mintázatoknál, vagy színátmeneteknél látottakhoz:
| <filter | id= | "" | |
| filterUnits= | "objectBoundingBox" | > | |
| x= | "-10%" | > | |
| y= | "-10%" | > | |
| width= | "120%" | > | |
| height= | "120%" | > | |
| <!--Itt sorolhatjuk fel a műveleteket.--> | |||
| </filter> | |||
A filterUnits attribútum értéke itt is kétféle lehet a koordinátarendszer választásától függően. Az alapbeállítás a objectBoundingBox, azaz kezdetben a koordinátákat a szűrni kívánt alakzat koordinátarendszerében adhatjuk meg. A másik beállítás itt is a userSpaceOnUse, aminek segítségével a felhasználói koordinátarendszert használhatjuk a szűrő méreteinek meghatározásához.
Ha az alapértelmezett értékeket használjuk, akkor látható, hogy a szűrő teljes egészében lefedi a módosítandó alakzatot, sőt annak határain is túlnyúlik, így lehetővé teszi az összes szűrő helyes működését. (A legtöbb esetben ugyanis a képpont végleges színét a környező képpontok alapján kapjuk meg.) Ettől eltérni az x, y, width és height értékek megadásával lehet.
Az id attribútum ennél az elemnél is arra szolgál, hogy később fel tudjuk használni a szűrőt. Ezt most is úgy érhetjük el, hogy a szűrésre kijelölt alakzat style attribútumában felveszünk egy filter: url(#szuro_neve) szerkezetű jellemzőt, melyben hivatkozunk a már elkészített műveletsorra.
A különböző műveleteket a <filter> elemen belül, gyermekelemként lehet megadni. Ez hasonló a színátmeneteknél látottakhoz, ott az egyes rögzített színeket kellett ilyen módszerrel megadni.
Az egyes műveletek használhatják a grafikát teljes egészében, vagy annak alfa csatornáját, ill. lehetőség van arra, hogy egy korábbi műveet eredményével dolgozzunk tovább.
A fejezet további részében néhány szűrő bemutatásaára fog sor kerülni. Ezeken kívül az SVG számos más szűrő használatát is megengedi.
A fejezetnek ebben a részébe egy virághoz fogunk árnyékot készíteni. Az árnyék előállítása szűrők segítségével történi, több lépésben. Az első eszköz amit meg kell ismernünk, a feGaussianBlur szűrő.
| <feGaussianBlur | in= | "" | |
| stdDeviation= | "" | > |
Segítségével a meglévő határozott körvonalakkal rendelkező grafikán elmoshatjuk az éleket és kontúrokat. Az elmosódottság mértékét az stdDeviation mezőben lehet megadni. Egy vagy két számot adhatunk meg. Ha két értéket adunk, akkor az első az x tengely mentén, a második pedig az y tengely mentén lesz érvényes. Ha egyetlen értéket adunk meg, akkor mindkét irányban azonos mértékű lesz az elmosódás.
Az in attribútumban kell megadni, hogy mit szeretnénk bemenetként használni. Ha a teljes képre szükségünk van, akkor a SourceGraphic, beállítást kell használni. Ha elegendő az alfa csatorna - amiben a kép átlátszóságáról és fényességéről vannak információk - akkor a SourceAlpha értéket kell megadni. Ebben az esetben a végeredmény egy szürkeárnyalatos rajz lesz. Szűrő bemeneteként minden esetben megadhatók ezek az értékek.
18/1. feladat:
A virag.svg fájlban található egy egyszerű virág. Készíts belőle egy elmosódott ábrát. Az elmosás mértéke 5 egység legyen.
Mint látszik, a kép teljes egészében homályos lett. Ha ezt az eredmény árnyékként szeretnénk használni, el kell felette helyeznönk az eredeti virágot is. Ezt megtehetjük úgy is, hogy egyszerűen ismét megrajzoljuk a szükséges alakzatokat. Ennél hatékonyabb módszer azonban, ha a <feMerge> szűrőt használjuk.
<feMerge>
<feMergeNode in="réteg1"/>
<feMergeNode in="réteg2"/>
<!--Itt tetszőlege számú réteg elhelyezhető-->
<feMergeNode in="rétegn"/>
</feMerge>
Ez a szűrő csupán egyes rétegek egymásra helyezésére szolgál. Ahány réteget egymásra szeretnénk helyezni, annyi <feMergeNode/> elemet kell felvennünk a szűrő gyermekeként. A <feMergeNode/> in attribútumában a felhasználandó réteg nevét kell megadni. Bemeneteként most is használható az előző szűrőnél említett SourceGraphic és SourceAlpha érték. Ha nem az eredeti grafika valamely részére van szükség, hanem egy szűrő által generált eredményre, akkor azt el kell neveznünk. A felhasználni kívánt szűrőben a result attribútumot kell kitölteni. Ebben kell megadni azt a nevet, amivel később hivatkozhatunk a kimenetre. Az itt megadott név bármelyik szűrő in értékeként szerepelhet. Ha egy szűrőnek nem adjuk meg a bemenetet, akkor a műveleteket a legutoljára elkészült képen fogja végrehajtani.
18/2. feladat:
Az előző elmosódott képet módosítsd úgy, hogy az árnyék szürkeárnyalatos legyen, és jelenjen meg felette az eredeti virág is. A feladatot szűrők használatával oldd meg.
A kapott ábrán az árnyék nem túlságosan élethű. Ezen úgy lehetne segíteni, ha az eredetihez képest kissé eltolva jelenítenénk meg. Ezt is elérhetjük szűrő segítségével. Eltolás megadásához a <feOffset/> szűrőt kell használni.
| <feOffset | in= | "" | |
| dx= | "" | ||
| dy= | "" | /> |
A szűrő működése nagyon egyszerű. A bemenetet az in attribútumban kell megadni. Az dx és dy attribútumokban pedig az egyes tengelyek menti eltolás mértékét.
18/3. feladat:
Egészítsd ki az előző képet úgy, hogy az árnyék legyen eltolva 5-5 egységgel jobbra ill. lefelé az eredeti helyéhez képest.
Szűrők bemeneteként felhasználhatunk JPG ill. PNG formátumú képeket is. A beillesztésükhöz a <feImage/> elemet kell használni.
| <feImage | xlink:href= | "" | /> |
A szűrő xlink:href attribútumában kell megadni, hogy melyik képet szeretnénk beolvasni. Ha az eredményt tovább szeretnénk használni, akkor felvehető a result attribútum is, ami az eddig megismertek szerint működik.
18/4. feladat:
Az árnyékkal ellátot virág mögé szűrő segítségével helyezd el a hatter.jpg képet. Módosítsd úgy a szűrőt, hogy a virág szélességének háromszorosa legyen a hatóköre és a virág maradjon ennek a téglalapnak a közepén.