SVG to format grafiki wektorowej, powstały z myślą o stronach internetowych. Jednak korzystanie z SVG wciąż jest problemem, gdyż nie wszystkie przeglądarki go odczytują.
SVG to formatu grafiki wektorowej, utworzony
w 1999 r. przez konsorcjum W3C. Chociaż
powstał z myślą o stronach internetowych,
wkrótce zaczął być powszechnie używany jako
uniwersalny format grafiki 2D. Obecnie korzystanie
z SVG przy projektowaniu stron WWW wciąż nie
jest w pełni możliwe, ale dzięki staraniom twórców
przeglądarki Opera sytuacja ta ulega powoli
zmianie.
Standard SVG został oparty na języku XML. Jest
więc zrozumiały i prosty, a zarazem oferuje naprawdę
bogate możliwości. Operując stosunkowo
prostym kodem, możesz tworzyć dowolne kształty
geometryczne, dodawać do nich tekst, nakładać
filtry i generować animacje. Obecnie oficjalnie zalecany
przez W3C jest standard SVG w wersji 1.1, do
której będziemy odnosić się w tym artykule.
Do zalet SVG należy łatwa integracja z językiem
HTML, możliwość korzystania ze stylów CSS i manipulowania
drzewem DOM dokumentu HTML.
Daje to w rezultacie potężną gamę możliwości
zastosowania formatu. W internecie można znaleźć
różne przykłady bardzo zaawansowanych projektów,
z których najbardziej efektowny to stworzona
w SVG i JavaScript gra Space Invaders (http://croczilla.com/svg/samples/invaders/invaders.svg).
SVG jest na tyle dobrym formatem, że jest często
stosowany do zapisywania grafiki wektorowej
w zastosowaniach poza internetowych.
Duża w tym zasługa popularnego open source\’owego edytora
Inkscape, który najlepiej współpracuje z plikami
SVG, a jednocześnie w przeciwieństwie do innych
profesjonalnych edytorów, jest dostępny za darmo.
W tym artykule zajmiemy się jednak podstawami
składni oraz najważniejszymi znacznikami
formatu SVG. Dowiesz się, jak zastosować go na
szerszą skalę, co przyda się, gdy będzie on już
w pełni obsługiwany przez wszystkie przeglądarki
internetowe.
Obecnie właśnie brak wsparcia ze strony najpopularniejszych
przeglądarek internetowych stanowi
największą przeszkodę na drodze do upowszechnienia
plików SVG na stronach WWW. Najsłabiej
wypada tutaj Internet Explorer. Wyświetlenie
grafiki SVG w IE wymaga instalacji dodatkowej
wtyczki, np. Adobe SVG Viewer (http://www.adobe.com/svg/viewer/install/). Nawet tak chwalony
Firefox radzi sobie z wyświetlaniem grafiki SVG
jedynie częściowo. Pełną obsługę gwarantuje
jedynie norweska Opera.
Dołączanie grafiki SVG
Grafikę SVG możemy wyświetlić na kilka
różnych sposobów. Pierwsza możliwość to wyświetlenie
bezpośrednio samego pliku graficznego.
Z tym radzi sobie właściwie każda przeglądarka
(oczywiście Internet Explorer potrzebuje wspomnianej
wcześniej wtyczki).
Druga metoda to użycie w kodzie HTML
znaczników {stala}EMBED{/stala} lub {stala}OBJECT{/stala}, które raczej ograniczają
możliwości webmastera. Efekt ich działania
pozostawia wiele do życzenia i nie jest to sposób
warty polecenia.
Jak się zapewne domyślasz, jedną z podstawowych
opcji powinno być wyświetlenie pliku SVG
na stronie WWW poprzez użycie znacznika IMG.
Niestety, nie jest to takie proste. Przeglądarka Microsoftu
nie radzi sobie z tym zadaniem nawet po instalacji wtyczki. Firefox odczyta plik tylko wtedy,
gdy typ MIME dokumentu zostanie zmieniony na
{stala}application/xhtml+xml{/stala}, ale to z kolei uniemożliwia
przeglądanie strony w IE. Z popularnych
przeglądarek jedynie Opera 9.5 potrafi poprawnie
wyświetlić obrazek SVG wstawiany na stronę przez
znacznik IMG. Ta wersja przeglądarki o nazwie
kodowej Kestrel wciąż jest w fazie beta.
Według niezależnego testu implementacji SVG
w różnych przeglądarkach, dostępnego na stronie
http://www.codedread.com/svg-support.php, Opera
9.5 rozumie 93,8% elementów języka, co jest
bardzo dobrym wynikiem. Pozostaje mieć nadzieje,
że w ślady jej twórców pójdą pozostali producenci
i zadbają o odpowiednią obsługę formatu SVG
w przyszłości.
Kolejna możliwość to dołączenie kodu SVG
bezpośrednio do dokumentu XHTML. Język ten,
w przeciwieństwie do HTML-a, oparty jest także na
XML-u. To znaczy, że kod w nim napisany można
łatwo łączyć z innymi XML-owymi językami, jak
np. MathML lub właśnie SVG. Jednak musi to być
prawdziwy dokument XHTML wysyłany do przeglądarki,
jako {stala}application/xhtml+xml{/stala}, o co można
zadbać, dodając odpowiednią formułę w pliku
{stala}.htaccess{/stala}:
AddType application/xhtml+xml .html
lub wysyłając do serwera odpowiedni nagłówek
przy użyciu kodu PHP:
Jednak w przypadku zmiany typu MIME
dokumentu znów wystąpi problem z Internet
Explorerem, dla którego pozostanie on niezrozumiały.
Rozwiązaniem może być tzw. negocjacja
nagłówków i ich zmiana tylko dla nowoczesnych
przeglądarek.
Jeszcze innym rozwiązaniem jest interpretacja
grafiki SVG po stronie serwera i przesłanie do
przeglądarki pliku w innym formacie, np. PNG.
Najbardziej zaawansowanym narzędziem tego
typu jest Batik (http://xmlgraphics.apache.org/batik/)
– program napisany w Javie, będący częścią
pakietu Apache XML Graphics. Jest to jednak tylko
półśrodek, niezapewniający pełnego wykorzystania
możliwości SVG.
Jedną z takich wspaniałych zalet jest wyświetlanie
plików SVG poprzez arkusze stylów CSS
w postaci tła dla elementów HTML. Obecnie radzi
sobie z tym jedynie przeglądarka Opera. A szkoda,
gdyż jest to jedna z ciekawszych funkcji SVG do
zastosowania na stronach internetowych.
Gradienty
Odpowiednio użyte gradienty potrafią bardzo
uatrakcyjnić każdą grafikę. Nic więc dziwnego,
że format SVG umożliwia ich tworzenie. Spróbuj
teraz dodać gradient do jednego z wcześniejszych
przykładów, np. wielokąta:
Możesz skorzystać z gradientu liniowego lub
radialnego. Gradient musi być wcześniej zdefiniowany
w tagu {stala}defs{/stala} i użyty jako tło:
Uzyskany efekt możesz obejrzeć na rys. 14.
Tag LinearGradient musi posiadać określone id,
do którego odwołujesz się jako tła dla elementu,
któremu chcesz nadać gradient. Wynika z tego
prosty wniosek, że danego gradientu możesz bez
przeszkód używać wielokrotnie.
Następnie dla parametru stop podajesz dwie
pary kolorów i wartości procentowych, które utworzą
nowy gradient. Każda z nich może być wyrażona
w procentach od 1 do 100. Do gradientów
możesz dodać także dodatkowe efekty poprzez
użycie {stala}gradientTransform{/stala}:
Właściwość {stala}rotate{/stala} oznacza obrót. Powyższy
kod obraca gradient o 50 stopni zgodnie z ruchem
wskazówek zegara. Oczywiście przekształcenia
można stosować także w przypadku kształtów.
Poniższy kod skaluje naszą figurę do jej dwukrotnej
wielkości:
Możesz skorzystać jeszcze z przekształcenia
translate, która przyjmuje dwie wartości i przesuwa
obiekt na osi X i Y:
Dokładną listę przekształceń wraz z przykładami
znajdziesz we wspomnianej już specyfikacji
SVG 1.1. Teraz przyjrzyj się jeszcze gradientowi
radialnemu. Tworzy się go na podobnej zasadzie,
co koło i elipsę:
Właściwość r określa promień wewnętrznej
części gradientu, cx i cy, a fx i fy koordynaty części
zewnętrznej. Wynik działania kodu możesz obejrzeć
na rys. 15.
Z kolei rys. 16 przedstawia ten sam przykład
z dodanym atrybutem {stala}spreadMethod{/stala}, przyjmującym
wartości {stala}reflect{/stala}, pad lub {stala}repeat{/stala}. Definiuje on,
co się stanie, gdy gradient nie wypełni całej wolnej
przestrzeni:
Przykładowy plik znajdziesz w plikach gradient1.svg oraz gradient2.svg.
|
|
|
|
W oczekiwaniu na SVG
Oczywiście format SVG posiada o wiele większe
możliwości, z których warto wymienić chociażby
obsługę animacji. Aby jednak w pełni przyjął się on
na stronach internetowych, przeglądarki muszą zacząć
w pełni obsługiwać nowy standard. Wówczas
na pewno wrócimy do tego tematu.
Odpowiedni DTD
Zacznijmy od analizy struktury dokumentu
o rozszerzeniu .svg. Na samym jego początku
musisz umieścić poniższy kod:
Pierwsza linijka oznacza, że masz do czynienia
z dokumentem opartym na XML-u. Druga definiuje
odpowiedni DOCTYPE, podobnie jak w przypadku
innych standardów opracowanych przez W3C.
Pomaga on przeglądarce zrozumieć, z jakim typem
dokumentu ma do czynienia. W następnej kolejności
w dokumencie należy umieścić element svg:
Wewnątrz niego zawarty zostanie cały dalszy
kod obrazka. Korzystając z odpowiednich atrybutów,
musimy jeszcze ustalić szerokość i wysokość
obrazka, wersję specyfikacji oraz informacje o używanej
przestrzeni nazw. Całość wraz z poprzednimi
znacznikami może wyglądać w ten sposób:
Wymiary obrazu możesz ustalać także w innych
wielkościach, np. centymetrach lub wielkościach
skalowalnych, jak em. Umożliwia to tworzenie
grafik dostosowujących się do rozmiarów okna
przeglądarki i elementów strony.
Rysujemy prostokąty
Na początek przećwiczymy rysowanie prostokątów.
Tworzy się je za pomocą znacznika rect:
Powyższy kod wygeneruje prostokąt o szerokości
(width) 80px i wysokości (height) 80px (patrz
rysunek 1). Parametr x odpowiada za przesunięcie
kształtu względem osi poziomej, a y względem osi
pionowej. W tym przypadku narysowany kwadrat
będzie odsunięty od lewej i górnej krawędzi równo
o 10 pikseli. Pamiętaj, że musi się on zmieścić
w polu wyznaczonym przez znacznik svg. W połączeniu
z poprzednim kodem otrzymamy gotowy
kod obrazka w formacie SVG:
Zmodyfikuj teraz powyższy przykład tak, aby
prostokąt przyjął kolor niebieski:
Jak widać, najprostszym sposobem na osiągnięcie
takiego efektu jest użycie parametru style.
Przykład ten można jeszcze bardziej rozbudować.
Dobrze by było, gdyby cały obrazek był
dodatkowo wypełniony tłem. Jak możesz je stworzyć?
Wystarczy narysować pod kwadratem jeszcze
jeden prostokąt. Grafika SVG działa bowiem na
zasadzie warstw, więc kolejne kształty układają się
jeden na drugim. Najpierw zwiększ powierzchnię
obrazu:
Na dużej grafice łatwiej będzie obserwować
efekty wprowadzanych zmian. Dodaj teraz pierwszą
czarną warstwę:
A teraz niebieski prostokąt, który wyświetli się
nad prostokątem służącym jako tło:
Aby do takiego prostokąta dodać obramowanie,
możesz posłużyć się właściwościami {stala}stroke{/stala}
i {stala}stroke-width{/stala}. Uzupełnij teraz poprzedni kod:
Prostokąt otrzymał białe obramowanie o szerokości
5 pikseli. Trzeba przyznać, że operowanie
tego rodzaju kodem jest proste i przyjemne. Aby
dodatkowo uatrakcyjnić obraz, możesz także dodać
do prostokąta zaokrąglone rogi. Odpowiadają za
to parametry rx i ry:
Uzyskany efekt zademonstrowany na rys. 3 jest
całkiem przyjemny dla oka. Posługując się tego
typu relatywnie prostymi znacznikami i atrybutami
możesz tworzyć dużo bardziej skomplikowane obrazy.
Cały kod obrazu prezentuje się następująco:
Powyższy przykład znajdziesz w załączniku, w pliku kwadrat.svg.
|
|
|
|
Koło i elipsa
W równie prosty sposób możesz narysować
koło. Służy do tego znacznik {stala}circle{/stala}. Jako atrybuty
należy podać parametry określające położenie
środka koła oraz jego promień:
Atrybut cx definiuje położenie koło na osi X,
a cy na osi Y. Atrybut r oznacza promień koła.
Koło z powyższego przykładu ma także białe tło
i pomarańczowe obramowanie o szerokości 4
pikseli (rys. 4).
Podobnie przebiega rysowanie elipsy. Różnice
polegają na użyciu znacznika {stala}ellipse{/stala} oraz dwóch
promieni – rx i ry:
Oba przykłady znajdziesz w plikach
kolo.svg oraz elipsa.svg.
|
|
|
|
Linie
Kolejnym przydatnym kształtem, który da się
zapisać jako SVG, jest zwykła linia. Tworząc ją,
powinieneś podać położenie punktu początkowego,
punktu końcowego oraz kolor i grubość. Należy
więc skorzystać z kilku parametrów:
Atrybut x1 definiuje położenie punktu początkowego
linii na osi X, natomiast atrybut y1 na
osi Y. Tak samo punkty x2 i y2 określają położenie
punktu końcowego. Style wcześniej używane do
tworzenia obramowania w tym przypadku określają
grubość i kolor linii (rys. 6). Linia może być także
łamana, wówczas do jej tworzenia posłużyć się
możesz znacznikiem {stala}polyline{/stala}:
Kolejne zestawy punktów podane w atrybucie
{stala}points{/stala} oznaczają załamania linii i może być ich
dowolna ilość. W ten sposób możesz nakreślić
wiele różnorodnych kształtów. Pamiętaj, że wolne
przestrzenie między załamaniami otrzymują wypełnienie. Jeżeli chcesz je usunąć, ustal kolor
wypełnienia na taki sam, jak kolor tła. Zwróć
uwagę na następny przykład:
Dwie powyższe linie przedstawiają… litery \”IM\”
(rys. 6). Pierwsza w kolorze niebieskim,
druga w ciemnoczerwonym. Obraz został pozbawiony
wypełnienia, a linie są widoczne dzięki
odpowiedniemu obramowaniu. Dwa przedstawione
tutaj przykłady możesz znaleźć na płycie CD
w plikach linia1.svg i linia2.svg.
Wielokąty i ścieżki
Kolejny znacznik, {stala}polygon{/stala}, umożliwia rysowanie
wielokątów o liczbie wierzchołków większej
od 3:
Efekt działania powyższego kodu przedstawia
rysunek 7. W praktyce zarówno wielokąty, jak
i linie łamane można wykorzystywać do podobnych
zastosowań, gdyż temu drugiemu rodzajowi
kształtów także możesz nadać wypełnienie.
Bardziej zaawansowane kształty da się tworzyć
za pomocą ścieżek (znacznik path). Możesz posługiwać
się krzywymi, liniami, krzywymi Béziera czy
też łukami. W ten sposób narysujesz nawet bardzo
skomplikowane kształty. Rzecz jasna, w wielu
przypadkach rozsądniejszym wyjściem będzie ich
wygenerowanie w edytorze Inkscape.
Poniżej prezentujemy prosty kod generujący łuk
przy użyciu krzywej Béziera:
W atrybucie d należy podać kolejne polecenia
tworzące ścieżkę. Litera M oznacza przesunięcie
ścieżki w punkt o podanych współrzędnych na
osi X i Y. Parametr Q tworzy kwadratową krzywą
Béziera – w jej przypadku należy wyznaczyć
dwa punkty – punkt ugięcia krzywej oraz punkt
końcowy.
Korzystając z atrybutu d, możesz użyć wielu
innych parametrów. Za pomocą L wytyczysz linię,
dzięki H linię poziomą, a V – pionową. Posługując
się C, możesz narysować zaokrąglenie, a A łuk
eliptyczny. Przedstawiony przykład znajduje się
na płycie CD w pliku sciezka.svg. Wiele innych
cennych przykładów znajdziesz w oficjalnej
specyfikacji W3C, dostępnej na stronie http://www.w3.org/TR/SVG11/.
|
|
|
|
Przezroczystość
Do narysowanych kształtów możesz dodać
wiele efektów. Jeden z nich to przezroczystość.
Przykładową grafikę z jego zastosowaniem przedstawia
rysunek 9. Oto pełny kod tego przykładu:
Narysowany zostały kwadrat, nad nim koło,
a nad kołem kolejny kwadrat. Przezroczystość dla
tła uzyskuje się poprzez użycie stylu {stala}fill-opacity{/stala}. Jak
być może się już domyślasz, przezroczystość dla
obramowania można uzyskać przez zastosowanie
{stala}fill-stroke{/stala}. Niestety obecnie nawet przeglądarka
Opera nie potrafi ich interpretować. Przykład możesz
obejrzeć, otwierając plik przezroczystosc.svg.
Czas na tekst
Kolejnym istotnym elementem obrazów SVG
jest rzecz jasna tekst. Możesz go wstawić za pomocą
znacznika text. Poza atrybutami oznaczającymi
położenie tekstu, warto podać odpowiednie style:
Internet Maker Jak możesz zauważyć, w przeciwieństwie do
innych znaczników, element text ma także znacznik
zamykający. Powyższy kod tworzy niebieski napis
\”Internet Maker\” (rys. 10).
Można przesuwać poszczególne litery, podając
po kolei ich współrzędne:
Internet Maker Uzyskany efekt (tutaj bardzo prosty) ukazuje rysunek
11. Tekst mógłbyś także umieścić na ścieżce
za pomocą polecenia {stala}textPath{/stala}:
Internet Maker
W powyższym kodzie możesz zaobserwować
kilka nie opisywanych wcześniej poleceń (efekt widoczny
jest na rys. 12). Zajmijmy się nimi po kolei.
Najpierw pojawia się {stala}defs{/stala} grupujący definicje
znaczników. Dzięki niemu raz ustalone wartości
mogą być używane wiele razy. W tym przypadku
masz do czynienia ze ścieżką. W celu późniejszego
odwoływania się do niej, został jej poprzez atrybut
id nadany identyfikator.
|
|
|
|
Kolejny znacznik {stala}TextPath{/stala} występuje wewnątrz
znacznika {stala}text{/stala} i również posiada znacznik
zamykający. Dzięki konstrukcji {stala}xlink:href=\”#im\”{/stala}
pobieramy wartości ze ścieżki, która została wcześniej
zdefiniowana.
Ostatnim elementem jest znacznik use. Nie
pobiera on samej wartości, ale pozwala na bezpośrednie
użycie całego, wcześniej zdefiniowanego,
znacznika. Taki sposób konstrukcji kodu zawarty
w naszym przykładzie sprawia, że nie musimy dwa
razy pisać tego samego. W bardziej rozbudowanych
konstrukcjach jest to element wręcz niezbędny.
Oprócz {stala}defs{/stala} możesz użyć znacznika g do grupowania
elementów. Zwróć uwagę na przykład:
Styl nadany elementowi g sprawi, że każdy
z trzech kwadratów będzie posiadać zielone tło
(rys. 13). Którą jeszcze właściwość można by przenieść
do g? Jeżeli pomyślałeś teraz o {stala}stroke-width{/stala},
to masz rację. Przykłady wykorzystania tekstu
w grafice SVG znajdują się na płycie CD w plikach
tekst1.svg, tekst2.svg oraz tekst3.svg.
