Dotychczas utworzone grafiki były bardzo proste: proste kontury, jednolity kolor wypełniania (oraz konturu). Bardziej skomplikowane kompozycje kolorystyczne można było spróbować utworzyć na bazie gradientów. Jednak ich zastosowanie jest niewielkie. W przypadku bardziej skomplikowanych przekształceń warto poznać filtry.
Filtry są reprezentowane przez obiekt filter, które definiuje się w sekcji defs. Wewnątrz umieszcza się różnego rodzaju reguły takie jak np. feGaussianBlur, które ustalają jak ma zostać przekształcony obrazek.
W tym artykule zostaną wyjaśnione następujące reguły:
W celu rozmycia wybranego obiektu wystarczy zastosować regułę feGaussianBlur. Standardowo przyjmuje dwa argumenty: in - określa jak wygląda element wejściowy oraz stdDeviation - określa stopień rozmycia. Poniżej znajduje się kod, który rozmywa element:
W (3.) sekcji defs (4.) zostaje utworzony nowy filtr filter0, który ma tylko jedna regułę. (5.) Reguła ta dotyczy rozmycia. Atrybut in został ustalony na SourceGraphic co oznacza, że rozmywany jest obrazek wejściowy, a atrybut stdDeviation określa rozmycie na 2. Potem utworzony filtr jest (6.) jest zastosowany na konkretnym elemencie. Poniżej znajduje się efekt końcowy filtru:
| Oryginał | Z filtrem |
|---|---|
W przypadku, gdyby zmienić wartość atrybutu stdDeviation to obrazek byłby rozmyty jeszcze bardziej. Jego wartość powinna być odpowiednia do żądanego zastosowania.
Atrybut in w przedstawionym przykładzie pobierał cały element i wszystkie kanały barw: czerwony, zielony, niebieski oraz przezroczystości. Wybór do czego ma zostać zastosowana reguła jest dowolny. Ciekawym przykładem jest wartość SourceAlpha, który polega na tym, że pobierany jest tylko kanał przezroczystości. Ta jedna prosta zmiana powoduje, że wszystkie kolory zostają zastąpione przez kolor czarny (czarny tu reprezentuje brak koloru). W tym przypadku rozmyty zostanie tylko kanał przezroczystości:
| Oryginał | Z filtrem |
|---|---|
Zastosowanie SourceAlpha pozwoliło uzyskać obrazek, który nadawałby się idealnie jako cień do przedstawionej figury. W praktyce tylko w prostych przypadkach sprawdziłoby się skopiowanie figury, wklejenie jako kolejny obiekt i zastosowanie do kopii utworzonego wcześniej filtru. Do łączenia warstw należy zastosować reguły feMerge. Reguła ta pozwala określić kolejne warstwy poprzez obiekty feMergeNode.
(4.) Tym razem filtr (5.) ponownie wykonuje rozmycie, ale (6.) potem obrazek jest składany. (7.) Jako pierwsza warstwa pobierana jest jako aktualny obrazek utworzony przez filtr, a potem (8.) dokładany jest obrazek oryginalny. Świadczy o tym atrybut in. Należy tutaj pamiętać, że na pierwszy element feMerge nakładany jest kolejny, a na drugi trzeci itd.
| Oryginał | Z filtrem |
|---|---|
Istnieje jeszcze możliwość połączenia dwóch warstw poprzez regułę feBlend. Reguła ta zostanie bardziej szczegółowo wyjaśnione w następnych artykułach, ale warto już teraz zauważyć, że można ją stosować zamiennie z regułą feMerge. Generalnie stosuje się ją do łączenie dwóch różnych warstw, aby uzyskać warstwę do której można zastosować kolejne reguły.
W filtrze (5.) obrazek zostaje ponownie rozmyty, ale tym razem rezultatowi został przypisany tymczasowy identyfikator blurred poprzez atrybut result. Następnie (6.) połączone zostają dwie warstwy: obrazek oryginalny (poprzez in) oraz wcześniej rozmyta warstwa (poprzez in2). Obrazki są łączone w trybie normalnym. Atrybut mode i jego wartości zostaną wyjaśnione w następnej części artykułu.
| Oryginał | Z filtrem |
|---|---|
Jak łatwo zauważyć uzyskany efekt końcowy jest identyczny jak w poprzednim przypadku. W zależności od potrzeby należy zastosować odpowiednią regułę.
Ostatnią kwestią, która pozostała do poruszenia to reguła feOffset. Stosuje się ją, aby przesunąć obrazek wejściowy o konkretne współrzędne. Przesunięcie określa się poprzez argumenty dx i dy. Cień ustawiony bezpośrednio za obiektem może wydawać się nieco sztuczny, dlatego można go delikatnie przesunąć. Poniżej znajduje się kod, który przesunie cień o 2 w prawo i 2 w dół.
Jedyną różnicą w kodzie względem poprzednich jest (6.) dodanie reguły feOffset i określenie przesunięcia (argumenty dx i dy). Poniżej znajduje się efekt końcowy:
| Oryginał | Z filtrem |
|---|---|
Ten krótki wstęp do filtrów SVG miał za zadanie przedstawić co to jest filtr jak się go deklaruje i stosuje. W celu utrwalenie materiału warto rozwiązać poniższe zadania.
W poniższym przykładzie zostało zastosowane rozmycie o wartości 2.
Na poniższym obrazku prawdziwe jest tylko jedno koło znajdujące się w lewym górnym rogu. W celu rozwiązania poniższego zadania najlepiej kolejno:
