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!
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:
Zastosuj
Przywróć
Wyczyść
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:
x="50" y="20"
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.
width="250" height="150"
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:
style="fill:yellow;stroke:red;stroke-width:12;"
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")
Pora narysować koło. Za ten kształt odpowiada znacznik:
Zastosuj
Przywróć
Wyczyść
Przeanalizujmy atrybuty użyte w tym przykładzie:
cx="200" cy="200"
to współrzędne środka rysowanego koła zaś:
r="100"
to długość promienia. Jeśli chodzi o style, użyliśmy atrybutów znanych z poprzedniego przykładu oraz dwóch nowych:
fill-opacity: 0.5; stroke-opacity: 0.4;
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.
Jak narysować zwykły odcinek? Z pomocą przychodzi znacznik
Zastosuj
Przywróć
Wyczyść
Mamy tu nowe atrybuty:
x1="110" y1="120"
to współrzędne pierwszego punktu, zaś:
x2="210" y2="320"
drugiego. Zwróć uwagę na definicję koloru linii:
stroke:rgb(255,56,220);
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.
Co jeśli chcemy stworzyć bardziej złożone kształty niż prostokąt czy koło? Z pomocą przychodzi znacznik:
Zastosuj
Przywróć
Wyczyść
points="710,10 120,100, 200,400"
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:
Znacznie bardziej zaawansowane możliwości daje znacznik
Zastosuj
Przywróć
Wyczyść
kluczowy dla niego jest parametr
d=""
który definiuje dokładny przebieg ścieżki. Wyjaśnijmy użyte w powyższych przykładach symbole:
Mx,y
to przejście do dowolnego punktu (x,y) bez rysowania linii - zawsze używamy go na początku, by zacząć ścieżkę.
Lx,y
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)
Hx
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)
Vy
jak wyżej, przy czym w tym przypadku linia jest pionowa.
Z
Ta komenda pozwala zamknąć obecny obszar rysowania linią i wrócić do punktu początkowego.
Prawdziwe możliwości znacznika "path" dają jednak dopiero krzywe Beziera. Spójrzmy na poniższy przykład:
Zastosuj
Przywróć
Wyczyść
Dodaliśmy kropki, by oznaczyć punkty.
Cx1,y1 xc,yc x2,y2
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":
Zastosuj
Przywróć
Wyczyść
z tą różnicą, że:
Sxc,yc x2,y2
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.
Nic nie stoi na przeszkodzie, by na rysunku SVG umieścić dowolny napis.
Zastosuj
Przywróć
Wyczyść
Życie jest piękne!
Text jako pierwszy z prezezntowanych elementów posiada znacznik zamykający, a pośrdoku treść wiadomości.
treść
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? ;)
Zastosuj
Przywróć
Wyczyść
Życie jest piękne!
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.
Żeby nie było nudno, DOWOLNY z poznanych dotąd elementów (kształt, ścieżkę, tekst) można obrócić:
Zastosuj
Przywróć
Wyczyść
Wystarczy do dwolonego obiektu dodać atrybut:
transform="rotate(kąt x,y)"
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 ;-)
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.
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:
$('path').mouseenter(function()
{
...
})
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.
$(this).css('stroke', kolor);
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!