Przypatrzmy się poniższemu przykładowi:
Powyższy rysunek składa się z 6 kwadratów. Zadanie wydaje się bardzo proste np. sześć obiektów rect, które mają to samo wypełnienie, kontur i są odpowiednio ustawione. Dla zaledwie kilku takich samych obiektów zadanie jest proste jednak co, gdy zaistnieje potrzeba wypełnianie przestrzeni przy pomocy 600 kwadratami? Odpowiedź jest bardzo prosta: wzory. Wzory jest to kolejny obiekt, który zapisuje się w części definicji. Służy on do określenia obiektu, który ma zostać użyty jako wypełnienie.
Wzór jest zapisywany jako obiekt pattern wewnątrz definicji defs. Wszystkie obiekty składowe na wzór zapisuje się wewnątrz tak jak w przypadku pisania prostego SVG. Różnicą jest tylko obiekt, który przechowuje te obiekty. Poniżej został przedstawiony fragment kodu, który pozwoli na proste wypełnienie prostokąta przy pomocy 600 kwadratów:
(1.) Deklaracja pliku SVG. (2.) Rozpoczęcie definicji. (3.) Utworzenie wzoru: obiekt pattern ma unikalny id oraz zadeklarowaną szerokość width, wysokość height oraz, która część płótna ma być wyświetlana viewbox. Wzór, aby poprawnie się wyświetlał należy ustawić w punkcie (x, y) = (0, 0) i ustawić dostosowanie jednostek patternUnits na userSpaceOnUse. (4.) Kwadrat, który jest fragmentem wzoru. (5.) Zamknięcie definicji. (6.) Narysowanie na płótnie prostokąt wypełniony kwadratami.
Po zapisaniu i otworzeniu pliku jako SVG otrzymujemy:
Do narysowania jest poniższy obrazek. Napisz kod, który wypełni prostokąt używając w kodzie jak najmniej definicji rect.
Jednym ze sposobów na rozwiązanie podanego problemu jest utworzenie dwóch definicji wzorów, a następnie nałożenia na siebie dwóch obiektów typu rect. Takie rozwiązanie jest poprawne, ale może wpłynąć negatywnie na prędkość generowania obrazu wynikowego, ponieważ są rysowane dwa obiekty o różnych wypełnieniach. Lepszym pomysłem jest utworzenie wzoru na podstawie i wzoru i przypisanie go do prostokąta. W ten sposób zostanie zaoszczędzone dużo mocy obliczeniowej.
(3. - 5.) Zadeklarowanie najmniejszego obiektu na rysunku: białego kwadratu. (6. - 9.) Deklarowanie drugiego wzoru, który jest pięć razy większy od poprzednio zadeklarowanego wzoru i (7.) składa się z 25 małych, białych kwadratów oraz (8.) jednego dodatkowego czerwonego kwadratu na środku płótna. (11.)
W trakcie tworzenie wzorów można wykorzystać dotychczas poznane metody wypełniania: pojedyncze kolory jak również dowolny gradient. Jedną z ciekawych rzeczy możliwą do zrobienia przy pomocy SVG jest dodanie przezroczystości. I tak oto można utworzyć taki kraciasty styl w bardzo prosty sposób:
(3.) Zadeklaruj wzór do powtórzenia. Są to (4. - 13.) półprzezroczyste, (5. - 8.) czerwone oraz (9. - 12.) niebieskie paski. (15.) Narysuj tło i (16.) nałóż na niego wzór. Warto zwrócić uwagę na fakt, że tło jest tylko po to, aby udowodnić, że nałożone tło faktycznie jest półprzezroczyste.
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).
