Tutorial SVG - wstęp

Witaj!

Wraz z rozpowszechnianiem się standardu HTML5 coraz większą popularność zyskuje technologia SVG - grafika wektorowa w przeglądarce. Jej niezaprzeczalnymi atutami są:

-brak konieczności instalowania żadnego dodatkowego oprogramowania (jak np. w przypadku Javy czy Flash)
-obsługiwanie przez wszystkie przeglądarki nowsze niż Internet Explorer 8
-szybkość działania - obrazy tworzy czysty kod
-wysoka jakość grafiki, co jest domeną grafiki wektorowej - idealnie ostra bez względu na skalę powiększenia
-działanie na wszystkich przeglądarkach mobilnych systemów operacyjnych - Android, iOS, Windows Phone
i inne, lecz o tym przekonacie się już sami!

Zapraszamy Was do zapoznania się z pierwszym polskim tutorialem SVG, prezentującym krok po kroku wszystkie możliwości tej technologii.

By zacząć nie potrzebujesz tak naprawdę żadnej wiedzy z zakresu projektowania stron WWW czy grafiki, choć ta pierwsza jest niewątpliwie mile widzana, a ta druga pozwoli Wam tworzyć piękniejsze obrazy i grafiki. Podstawy HTML z pewnością ułatwią zrozumienie metod kodowania SVG, a znajomość JavaScript, z którym wspólpracę także omawiamy w jednym z rozdziałów, da grafice na Twojej stronie nowe życie.

Nie potrzebujesz uruchamiać żadnych dodatkowych narzędzi, spokojnie możesz zamknąć edytor tekstowy - wszystkiego nauczysz się przez przeglądarkę, za pomocą naszych interaktywnych edytorów!

Zapraszamy!

Proste kształty: prostokąt

Zaczniemy od czegoś prostego. By umieścić w kodzie HTML kod svg niezbędne jest zdefiniowanie obszaru rysowania. Robimy to następująco: Ważne jest zdefiniowanie rozmariu obszaru (w powyższy sposób bądź z pomocą CSS), gdyż domyślny rozmiar jest definiowany w zależności od przeglądarki.
Zaczniemy od prostego przykładu i narysujemy prostokąt: Pora zapoznać się z naszym dynamicznym edytorem kodu. Po prawej stronie znajduje się ramka z kodem źródłowym, zaś po lewej można obserwować jego efekty. Po każdej zmianie kodu musisz zatwierdzić je przyciskiem "Odśwież". Przycisk "Przywróć" odtwarza domyślny kod zaprezentowanego przykładu. Dzięki niemu możesz bawić się do woli zmieniając kod i obserwując efekty.

Pora zapoznać się z naszym kodem. Każdy element, w tym przypadku prostokąt, definiujemy jak w html z użyciem znacznika: Przeanalizujmy dodane do niego parametry: to definicja punktu(x,y), w którym zaczynamy rysowanie (spróbuj go zmienić!) W SVG obszar co coś na kształt układu współrzędnych. Współrzędne (0,0) ma lewy górny róg. to z kolei rozmiary naszego obiektu. Co ważne, rozmiary obiektów w SVG nie da się zdefiniować z poziomu CSS (albo atrybutu style) To jednak nie znaczy, że elementy SVG nie posiadają styli: mamy tu trzy atrybuty, których nie można użyć w przypadku klasycznyxch elementów html (DIV, SPAN itd.) "Fill" to coś na kształt "background-color" - definuje kolor wypełnienia obszaru.
"Stroke" to kolor obramowania (coś na kształ "border-color") zaś "stroke-width" to jego grubość. (odpowiednik klasycznego "border-width")

Proste kształty: koło

Pora narysować koło. Za ten kształt odpowiada znacznik: Przeanalizujmy atrybuty użyte w tym przykładzie: to współrzędne środka rysowanego koła zaś: to długość promienia. Jeśli chodzi o style, użyliśmy atrybutów znanych z poprzedniego przykładu oraz dwóch nowych: Jak łatwo się domyśleć, pierwszy odpowiada za przeźroczystość wypełnienia, zaś "stroke-opacity" - za przeźroczystość obrysu.

Pora na pierwszą piaskownicę - przestrzeń, w której możesz stworzyć dowolną kompozycję za pomocą poznanych w danym momencie kształtów.
Spróbuj skopiować poprzedni przykład, zmieniając kolejność kół. Zwróć szczególną uwagę na to, który element przykrywa który. W SVG zawsze element następny jest nakładany na element wcześniejszy. Nie ma innej możliwości zarządzania warstwami, jak manipulowanie kolejnością kodowania elementów.

Proste kształty: linia

Jak narysować zwykły odcinek? Z pomocą przychodzi znacznik Mamy tu nowe atrybuty: to współrzędne pierwszego punktu, zaś: drugiego. Zwróć uwagę na definicję koloru linii: Kolory w SVG można definiować dokładnie tak samo jak w HTMLu - z użyciem nazw zwyczajowych (np. yellow), kodów szesnastkowych (np. #aabb22) lub tak jak powyżej.

W poniższym przykładzie zwróć szczególną uwagę na definicję współrzednych punktów - nic nie stoi na przeszkodzie, by wybiegały one poza obszar rysowania. Jednak wystające części będą niewidoczne. Spróbuj stworzyć podobnie "ucięte", wystające poza obszar koło.

Proste kształty: wielokąty

Co jeśli chcemy stworzyć bardziej złożone kształty niż prostokąt czy koło? Z pomocą przychodzi znacznik: to współrzędne (x,y) kolejnych punktów obszaru - trzeba podać minimum trzy, by widoczna była figura! Spróbuj pobawić się dowolnymi kształtami, jak i wcześniej już poznanymi figurami:

Rysowanie dowolnej ścieżki

Znacznie bardziej zaawansowane możliwości daje znacznik kluczowy dla niego jest parametr który definiuje dokładny przebieg ścieżki. Wyjaśnijmy użyte w powyższych przykładach symbole: to przejście do dowolnego punktu (x,y) bez rysowania linii - zawsze używamy go na początku, by zacząć ścieżkę. to narysowanie prostej linii do danego punktu. Współrzędne x,y są bezwzględne, zaś gdyby użyć małej literki "l", byłyby względne. (w odniesieniu do punktu w którym znajduje się pisak) to narysowanie poziomej linii od obecnego punktu (x1,y1) do nowego punktu (x,y1). ("H" to współrzędna bezwzględna, zaś "h" - względna) jak wyżej, przy czym w tym przypadku linia jest pionowa. Ta komenda pozwala zamknąć obecny obszar rysowania linią i wrócić do punktu początkowego.

Krzywe Beziera

Prawdziwe możliwości znacznika "path" dają jednak dopiero krzywe Beziera. Spójrzmy na poniższy przykład: Dodaliśmy kropki, by oznaczyć punkty. Komenda ta rysuje krzywą Beziera z pnktu (x1,y1) do punktu (x2,y2) z użyciem jednego punktu kontrolnego (xc,yc).

Podobnie działa komenda "S": z tą różnicą, że: zbędne jest podawanie punktu wyjściowego, bo za takowy jest uznawane aktualne położenie pisaka. Podajemy tylko punkt kontrolny (xc,yc) oraz punkt docelowy (x2,y2).

Jak łatwo domyśleć się z poprzednich przykładów, za pomocą dużych liter "C" i "S" definiujemy punkty bezwzględnie, zaś przy użyciu małych - względnie.

Do dzieła - pobaw się krzywymi Beziera, nim przejdziemy do następnego przykładu. W ten sposób możesz narysować dowolny, gładki kształt.

Wstawianie tekstu

Nic nie stoi na przeszkodzie, by na rysunku SVG umieścić dowolny napis. Text jako pierwszy z prezezntowanych elementów posiada znacznik zamykający, a pośrdoku treść wiadomości. Paramtery x i y, jak łatwo się domyśleć, definiują połóżenie początkowego punktu pisania. (lewego górnego punktu kanwy napisu) Prawdziwą jednak magię oferuje pisanie po ścieżce - widzieliście kiedyś coś takiego w przeglądarce? ;) Kluczowe jest zdefiniowanie ścieżki, po której będziemy pisać, w przestrzeni znaczników: W tym przykładzie użyliśmy krzywej z poprzedniej strony, ale nic nie stoi na przeszkodzie, byś stworzył/a własną.

Kluczowe jest zawarcie w przestrzeni znacznika <text /> nowego znacznika: atrybut "xlink:href="#sciezka" " daje dostęp do wcześniej zdefiniowanej ścieżki.

Obracanie elementów

Żeby nie było nudno, DOWOLNY z poznanych dotąd elementów (kształt, ścieżkę, tekst) można obrócić: Wystarczy do dwolonego obiektu dodać atrybut: Kąt to oczywiście podany w miarze stopniowej (<0,360>) obrót, zaś x,y to punkt, wedle którego będziemy obiekt obracać. Spróbujmy stworzyć jakiś praktyczny przykład - słońce z promyczkami ;-)

Gradienty

W SVG figurę można wypełnić nie tylko jednolitym kolorem, ale także gradientem. Spójrzmy na przykład: jest to gradient liniowy. Można także zastosować gradient rozchodzący się kołowo:

Praktyczne przykłady: mapa polski

Jak widać, możliwości SVG są naprawdę spore i tylko od Twojej wyobraźni i doskonalonych umiejętności zależy, jak je wykorzystasz. My zaprezentujemy Ci kilka prostych, autorskich przykładów.

Na początek - mapa Polski, którą można w zależności od potrzeb pokolorować różnymi odcienami barw(y). W jakiejkolwiek innej technice webowej - niewykonalne.


Kod dla tego przykładu:

SVG i Java Script (przykład)

Za pomocą SVG można tworzyć dowolną, statyczną grafikę. Jednak to, co wyróżnia tę technikę jeszcze bardziej i czyni ją realnym następcą Flasha, to możliwość obsługi zdarzeń i wchodzenia w intereakcję czyli po prostu współpraca z technologią JavaScript.

Jeżeli nie znasz języka JS - trudno, choć jeśli zajmujesz się/planujesz zajmować tworzeniem stron internetowych, musisz jak najprędzej nadrobić te braki. Poniższy przykład jest na tyle prosty, że nawet elementarna znajomość programowania powinna wystarczyć do zrozumienia.
W przykładzie korzystamy z bardzo powszechnej biblioteki jQuery, w jej najnowszej wersji. A oto i przykład:

Ruszaj myszką po tęczy, by zmieniać jej kolor! Tylko od Ciebie zależy, jakie przybierze barwy. ;-)

Kod SVG dla tego przykładu prezentuje się następująco - jeśli sumiennie przerobiłeś/aś poprzednie strony, z pewnością niczym Cię nie zaskoczy: Więcej uwagi poświęcimy kodowi JavaScript. W całości, prezentuje się on następująco: Funkcja los pobiera dwa argumenty i generuje losową liczbę w przedziale od "poczatek" do "koniec" - kolory tęczy są losowe, tak więc taka funkcja jest nam niezbędna. Fragment: oznacza funkcję wywoływaną po najechaniu na dowolny element "path". (w naszym przykładzie za pomocą tego znacznika zdefiniowaliśmy wyłącznie pasma naszej tęczy) Ta linia powoduje utworzenie zmiennej lokalnej (tylko dla jednego wywołania funkcji) tworzącej losowy kolor w formacie nam już znanym - rgb(r,g,b). Liczba zwracana przez funkcję los jest zmiennoprzecinkowa, tak więc musimy ją jeszcze przekonwertować na liczbę całkowitą - stąd funkcja parseInt. Komenda zmieniająca atrybut styli (w tym przypadku konturu) na wartość zmiennej "kolor".

Jako że domyślnie kolory naszych linii są zdefiniowane jako czerwone, musimy za pierwszym załadowaniem pokolrować je na losowe barwy - tak, jakby na każdą najechać myszką. Stąd komenda: na każdym elemencie "path" jest wywoływane zdarzenie "mouseenter" - najechanie myszką. A to, co powinno się przy takim najechaniu stać, już opisaliśmy.
To proste!

Praktyczne przykłady: Angry Birds

A na deser taka oto perełka - wszystko oczywiście od początku do końca stworzone za pomocą kodu, bez użycia jakiegokolwiek pliku graficznego!