Dotychczas poznane metody stylizowania elementów pozwalały na uzyskania jednokolorowych kształtów o ewentualnie innym kolorze obramowania. Do prostych schematów i rysunków jest to wystarczające. Grafika wektorowa ma do zaoferowania znacznie więcej - pozwala na użycie gradientów, aby przechodzenie pomiędzy kolorami było płynne. Ponadto można tworzyć również własne wzory, którymi następnie można wypełnić dowolny kształt. Obydwie metody pozwalają uzyskać efekty, które w grafice rastrowej trudno byłoby zmienić.
W celu uzyskania gradientu należy zadeklarować styl w definicjach. Definicję zapisuje się w obiekcie defs, który zazwyczaj ustawia się umownie na początku pliku tak, aby z dowolnego miejsca w kodzie był dostęp do definicja. Ustawienie defs wewnątrz jakieś grupy ograniczy widoczność definicji tylko do grupy w której się znajduje. Z kolei sam gradient to obiekt linearGradient. Przykładowo, aby uzyskać gradient, który przejdzie od koloru białego do czarnego wystarczy wpisać:
(2.) Rozpoczęcie definicji: (3.) zadeklarowanie gradientu liniowego o nazwie wypelnienie. To bardzo ważne, żeby każdy gradient miał unikalny identyfikator. W ten sposób możliwe jest jego wykorzystanie. Gradient (4.) ma się rozpocząć od początku kolorem białym, a (5.) kończyć czarnym. Ustawienie 0% i 100% oznacza, że ustalony stop-color występuje na offset miejscu czyli w tym przypadku pełne kolory są tylko na początku i na końcu. (6.) Koniec definicji i (7.) narysowanie prostokąta wypełnionego gradientem. Należy zauważyć, że odwołanie do gradientu polega na wpisaniu identyfikatora gradientu jako argument funkcji url(). Dodatkowo należy pamiętać, że identyfikator zawsze podaje się z # (kratką).
Przypuśćmy teraz, że zmiana z białego koloru na czarny powinna trwać tylko 40% całej szerokości prostokąta. Ponadto część biała i czarna powinny być jednakowej szerokości. Wtedy obrazek i kod będą wyglądać następująco:
Jak widać biały i czarny obszar jest wyraźnie widoczny i istnieje pomiędzy nimi płynne przejście. Warto zauważyć, że gradient zawsze biegnie od lewej do prawej tj. pierwszy element stop nadaje kolor pierwszemu przystankowi gradientu. Istnieje możliwość również przypisywania gradientu nie do wypełnienia, a linii otaczającej kształt. Przykładowo załóżmy, że prostokąt będzie miał stałe szare wypełnienie, a tylko jego obwódka będzie przechodzić od białego do czarnego. Obrazek i kod będą miały następującą postać:
(8.) W tym przypadku odwołanie do gradientu znajduje się w atrybucie stroke. Zmienia to sposób rysowania obwódki prostokąta.
Istnieje możliwość dodawania większej ilości kolorów w celu uzyskania bardziej skomplikowanych gradientów. Przykładowo:
W celu dodania koloru wystarczyło wpisać nowy element stop i określić jego kolor poprzez atrybut stop-color. W oczy rzuca się pewnego rodzaju dysproporcja - na rysunku dominuje kolor zielony. W celu zmiany tego należałoby dokładnie przyjrzeć się podanym wartościom. Kolor czerwony zaczyna się od lewej strony, ale występuje tylko jako pasek pikseli, a następnie przez pół rysunku zmienia się na kolor zielony. W celu wyrównania szerokości kolorów należy ustalić na przykład, że początkowo rysunek jest biały, a następnie zmienia się w czerwony i w tej samej szerokości w zielony. Wtedy kod będzie wyglądał następująco:
Chociaż w tym momencie wydaje się, że zielony zajmuje mniej miejsca niż pozostałe kolory to w rzeczywistości wszystkie zajmują tyle samo: czerwony biegnie od 0% do 50%. Zielony od 25% do 75%, a niebieski od 50% do 100%. Wszystkie szerokości podanych kolorów są takie same.
W celu utrwalenia nabytych umiejętności postaraj się napisać kod poniższych obrazków bez korzystania z żadnej pomocy (artykułu, notatek, dokumentacji SVG i innych).
