SVG

AKADEMIA GÓRNICZO-HUTNICZA
Wydział Elektrotechniki Automatyki Informatyki i Elektroniki
Katedra Telekomunikacji
PRACA MAGISTERSKA
Analiza możliwości wykorzystania grafiki
wektorowej SVG do projektowania aplikacji
internetowych
Paweł Król
Promotor: dr inż. Jacek Romanowski
KRAKÓW 2007

Spis Treści
1. Wstęp...........................................................................................................5
2. Wprowadzenie do standardu SVG...................................................................7
2.1. Podstawowe informacje............................................................................7
2.1.1. Co to jest SVG?.................................................................................7
2.1.2. Czy potrzebujemy kolejnego nowego standardu?.................................8
2.1.3. Historia SVG jako rekomendacji W3C..................................................9
2.1.4. Aktualny stan prac standaryzacyjnych...............................................11
2.2. Rozmaitości...........................................................................................12
2.2.1. Ogólny przegląd standardu...............................................................12
2.2.2. Metody umieszczania grafiki SVG na stronach WWW..........................15
2.2.3. SVG dla urządzeń o niewielkiej mocy obliczeniowej............................16
2.3. Podsumowanie......................................................................................22
3. Szczegółowy przegląd możliwości SVG...........................................................23
3.1. Podstawowe składniki rekomendacji........................................................23
3.1.1. Przedstawienie treści pierwszych rozdziałów......................................24
3.1.2. Zagadnienia renderowania grafiki w SVG...........................................24
3.1.3. Typy danych....................................................................................25
3.1.4. Struktura dokumentu SVG................................................................25
3.1.5. Style...............................................................................................26
3.1.5. Obszar rysunku................................................................................27
3.1.6. Skalowanie w praktyce.....................................................................28
3.1.7. Jednostki wielkości...........................................................................29
3.1.8. Przedstawienie treści kolejnych rozdziałów........................................29
3.1.9. Metadane i kompatybilność wstecz....................................................29
3.1.10. Rozszerzalność języka SVG.............................................................31
3.1.11. Podsumowanie podstawowych informacji........................................31
3.2. Najważniejsze możliwości SVG................................................................32
- 2/141 -

3.2.1. Modelowanie kształtów za pomocą ścieżek........................................32
3.2.2. Wykreślanie figur za pomocą kształtów.............................................34
3.2.3. Wprowadzanie tekstu na rysunku SVG..............................................37
3.2.4. Wypełnienia oraz kontury obiektów...................................................40
3.2.5. Wypełnianie figur za pomocą gradientów i wzorów............................41
3.2.6. Podsumowanie najważniejszych możliwości.......................................46
3.3. Zaawansowane właściwości SVG.............................................................46
3.3.1. Maski oraz ścieżki maskujące............................................................46
3.3.2. Efekty graficzne...............................................................................49
3.3.3. Interaktywność................................................................................53
3.3.4. Hiperłącza.......................................................................................54
3.3.5. Możliwości zastosowania języków skryptowych..................................54
3.3.6. Animacje.........................................................................................57
3.4. Podsumowanie.......................................................................................59
3.4.1. SVG a XML......................................................................................60
3.4.2. Kierunki rozwoju SVG: wersje 1.2 i 2.0..............................................62
4. Praktyczna realizacja przykładowych aplikacji.................................................66
4.1. Generator wykresów statystycznych........................................................66
4.1.1. Zastosowanie aplikacji......................................................................67
4.1.2. Struktura dokumentu SVG................................................................67
4.1.3. Moduł Perla do generowania wykresów.............................................69
4.1.4. Czy SVG jest koniecznością?.............................................................74
4.1.5. Wykres jako skrypt CGI....................................................................76
4.1.6. Możliwości rozbudowy......................................................................77
4.2. Generator wykresów pogodowych...........................................................78
4.2.1. Zalety wykorzystania grafiki wektorowej SVG.....................................79
4.2.2. Format przechowywania danych pogodowych....................................80
4.2.3. Proces transformacji danych arkuszem stylu XSLT..............................84
4.2.4. Przykładowe wykresy.......................................................................93
- 3/141 -

4.2.5. Ocena wykonania aplikacji..............................................................101
4.3. Podsumowanie.....................................................................................102
5. Zakończenie...............................................................................................105
6. Dodatki: kody źródłowe..............................................................................108
6.1. Generator wykresów statystycznych......................................................108
6.1.1. Moduł (klasa) ChartSVG do generowania wykresów.........................108
6.1.2. Porównanie liczby ludności państw świata.......................................114
6.1.3. Porównanie wyników wyborów parlamentarnych..............................117
6.2. Generator wykresów pogodowych.........................................................120
6.2.1. Dane XML do wykresu temperatury.................................................121
6.2.2. Dane XML do wykresu opadów.......................................................124
6.2.3. Arkusz transformacji XSLT..............................................................129
7. Bibliografia.................................................................................................137
8. Słownik trudniejszych pojęć........................................................................138
- 4/141 -

1. Wstęp
Tematem niniejszej pracy dyplomowej jest analiza możliwości wykorzystania grafiki
wektorowej SVG do projektowania aplikacji internetowych. Ponieważ obecnie
trudno wyobrazić sobie funkcjonowanie jakiejkolwiek aplikacji w oderwaniu od
globalnej sieci (brak współpracy z Internetem praktycznie dyskwalifikuje dany
program z powszechnego użycia), w treści swojej pracy szczególny nacisk
zdecydowałem się położyć na staranną analizę samego standardu SVG. Został on
zresztą zaprojektowany jako standard sieciowy, więc niejako sam w sobie zawiera
gotowe już mechanizmy predestynujące go do użycia w środowisku WWW.
Specjalistycznej literatury dedykowanej SVG w języku polskim brak, w związku z
czym podstawą wiedzy, na której oparłem wszystkie swoje informacje na temat
analizowanego standardu, stały się rekomendacje publikowane przez organizację
World Wide Web Consortium. Są one równocześnie najbardziej wiarygodnym
źródłem wiedzy na temat aktualnie obowiązujących w sieci Internet standardów, a
sama rekomendacja SVG została opracowana przez jedną z grup roboczych
wywodzących się z tego właśnie konsorcjum.
Wśród głównych celów, jakie postawiłem sobie podejmując ten właśnie temat
pracy dyplomowej, należy przede wszystkim wymienić dwa następujące:
 Chęć gruntownego poznania jednego z najciekawszych obowiązujących
obecnie w sieci standardów grafiki wektorowej, dokładne zapoznanie się z
jego możliwościami od strony technicznej oraz analiza konsekwencji, jakie
niesie ze sobą jego zastosowanie w projektowaniu nowych aplikacji
 Realizacja praktycznych przykładów wykorzystujących możliwości SVG,
adaptacja własnych pomysłów na potrzeby wykonania konkretnych zadań,
wreszcie lepsze zrozumienie istoty tworzenia grafiki wektorowej w oparciu o
- 5/141 -

analizowany standard dzięki poznaniu jego możliwości od strony czysto
praktycznej
Aby treść mojej pracy dyplomowej mogła jak najlepiej zaprezentować
najważniejsze informacje dotyczące grafiki SVG, zdecydowałem się podzielić ją na
trzy główne części. Rozdział drugi stanowi wprowadzenie do standardu SVG,
przedstawia w skrócie historię jego powstania oraz zawiera krótkie zestawienie
jego podstawowych funkcjonalności. W rozdziale trzecim zamieszczam szczegółową
analizę większości elementów oferowanych przez standard SVG, przedstawiam
treść rekomendacji W3C oraz prezentuję swoje pomysły oraz wnioski płynące z
analizy kolejnych opisywanych funkcji. Rozdział czwarty stanowi podsumowanie
mojego osobistego wkładu w pracę dyplomową i składa się z części poświęconych
prezentacji konkretnych zastosowań SVG na podstawie zrealizowanych przeze mnie
aplikacji.
Mimo iż niniejsza praca mogłaby mieć charakter czysto teoretyczny, zdecydowałem
się na zupełnie inne podejście. Poszczególne elementy analizowanego standardu
staram się na bieżąco dokumentować samodzielnie opracowanymi praktycznymi
przykładami. Dzięki temu nawet część przeglądowa pracy, opisująca dokładnie
standard SVG, nie składa się wyłącznie z tekstu, ale zawiera również liczne
przykłady kodów źródłowych, prezentujących pewne konkretne funkcjonalności na
bardzo konkretnych przykładach.
Wierzę również, że opracowane przeze mnie aplikacje stanowić będą wraz z
załączonym do pracy ich kodem źródłowym bardzo solidną dawkę praktycznej
wiedzy na temat możliwych zastosowań grafiki wektorowej SVG oraz sposobów ich
realizacji, podkreślający jednocześnie wielkie znaczenie, jakie może ona odegrać w
sieci WWW już w najbliższym czasie.
W tym miejscu pragnąłbym serdecznie podziękować dr inż. Jackowi
Romanowskiemu za życzliwość, okazaną pomoc oraz udzielanie cennych
wskazówek w trakcie pisania tej pracy.
- 6/141 -

2. Wprowadzenie do standardu SVG
W drugim rozdziale swojej pracy dyplomowej chciałbym przedstawić podstawowe
informacje dotyczące standardu SVG. Rozdział ten ma za zadanie stanowić krótkie i
zwięzłe wprowadzenie w świat grafiki wektorowej, dokonany nie od strony
technicznej, lecz od strony organizacyjnej. Chciałbym dokonać w nim ogólnego
przeglądu dokumentacji do standardu SVG, przedstawić pokrótce jego historię oraz
zwrócić uwagę na różnorodność istniejących w jego obszarze profili
przeznaczonych dla rozmaitych urządzeń końcowych. Rozdział został podzielony na
dwie części. W pierwszej z nich przedstawiam najbardziej podstawowe informacje
na temat SVG, w drugiej natomiast zaczynam stopniowo zagłębiać się w bardziej
konkretne tematy i zaawansowane zagadnienia, które kontynuowane i poszerzane
są w rozdziałach kolejnych.
2.1. Podstawowe informacje
Podstawowe informacje przedstawione w pierwszej części drugiego rozdziału
mojej pracy dyplomowej mają za zadanie nakreślić jej czytelnikowi elementarny
i poglądowy szkic standardu SVG. Pokrótce przedstawiam w nim podstawowe
reguły oraz pojęcia z nim związane, prezentuję historię oraz aktualny stan prac
standaryzacyjnych.
2.1.1. Co to jest SVG?
SVG stanowi skrót angielskiego określenia Scalable Vector Graphics, co
oznacza skalowalną grafikę wektorową. SVG posiada status rekomendacji
W3C – W3C (skrót od angielskiego określenia World Wide Web Consortium –
Konsorcjum WWW) jest bardzo wpływową międzynarodową organizacją,
- 7/141 -

zrzeszającą w swoich szeregach przedstawicieli z ponad 400 [1]
najważniejszych firm informatycznych (m.in. AOL, Hewlett-Packard, IBM,
Matsushita, Microsoft, Nokia), organizacji oraz uczelni (m.in. Helsinki
University of Technology, Oxford University, Stanford University, The Hebrew
University of Jerusalem, Universidad Politécnica de Madrid) z całego świata.
W3C zajmuje się rozwijaniem standardów sieciowych od roku 1994, w którym
zostało ono założone przez Tima Bernersa-Lee [2]. Obecnie W3C jest
administrowane wspólnie przez MIT Computer Science and Artificial
Intelligence Laboratory (CSAIL) w USA, European Research Consortium for
Informatics and Mathematics (ERCIM) z siedzibą główną we Francji i Keio
University w Japonii [3].
Podstawowa definicja SVG, przedstawiana na oficjalnej stronie internetowej
organizacji W3C [4], mówi, że SVG jest językiem opisu dwuwymiarowych
obrazów oraz aplikacji graficznych w XML. Aktualnie obowiązującym
standardem jest rekomendacja SVG 1.1 (ustanowiona 14 stycznia 2003 roku).
Nieustannie trwają również prace nad ulepszoną wersją standardu SVG w
wersji 1.2.
Zostały również opracowane pewne ograniczone wersje standardu,
przeznaczone dla telefonii komórkowej trzeciej generacji oraz innych
przenośnych urządzeń, które mocą obliczeniową nie dorównują współczesnym
komputerom stacjonarnym. Cechom charakterystycznym poszczególnych
profili SVG postaram się przyjrzeć bliżej w drugiej części bieżącego rozdziału
mojej pracy.
2.1.2. Czy potrzebujemy kolejnego nowego standardu?
Przede wszystkim SVG nie jest kolejnym nowym standardem. Rekomendacja
SVG w wersji 1.0 została opublikowana 4 września 2001 roku [5], a zatem już
ponad 5 lat temu. Niemniej jednak termin SVG nie zdołał się natychmiastowo
- 8/141 -

wpisać do zbiorowej świadomości użytkowników Internetu. Potrzeba było
czasu, aby szerokie grono twórców (i odbiorców) zainteresowało się poważnie
tym standardem (w niniejszej pracy będę się starał udowodnić, że SVG
zasługuje na znacznie większą uwagę niż obecnie).
W dalszej części rozdziału staram się pokrótce opisać, w jaki sposób
kształtował się standard SVG. Przedstawiam konkretne wydarzenia i
konkretne daty, które miały przełomowe znaczenie w tworzeniu
najważniejszych dla niego dokumentów, dyskutuję na temat aktualnego stanu
prac nad kolejnymi wersjami rekomendacji i wreszcie staram się podkreślić to,
jak ważne jest uczestnictwo wielu różnych firm oraz instytucji w
przygotowywaniu dokumentów stanowiących rekomendacje organizacji W3C.
2.1.3. Historia SVG jako rekomendacji W3C
Już wcześniej została podkreślona waga faktu, że SVG jest rekomendacją
W3C. Aktualnie obowiązującą (kwiecień 2007) wersją standardu jest SVG 1.1
oraz jego uszczuplone profile mobilne (ang. Mobile SVG Profiles): SVG Tiny
oraz SVG Basic [6].
Pierwszą istotną datą w rozwoju nowego standardu grafiki wektorowej jest 11
lutego 1999 roku. W tym dniu został opublikowany pierwszy ogólnodostępny
draft SVG. Prace nad ulepszeniem dokumentu były bardzo intensywne (w
międzyczasie ukazało się jeszcze osiem kolejnych draftów) i trwały do dnia 2
sierpnia 2000 roku, gdy SVG stał się oficjalnym kandydatem do rekomendacji
W3C. W przedstawionym wówczas dokumencie dokonano jeszcze kilku
poprawek i w dniu 5 września 2001 roku SVG 1.0 zostało uznane za oficjalną
rekomendację W3C. W tym samym dniu opublikowano również inny standard:
Animacje SMIL (ang. SMIL Animation), którego głównym celem jest
przygotowanie szkieletu projektowego (ang. framework) pod integrację
animacji z dowolnym dokumentem stworzonym w oparciu o język XML. SVG
- 9/141 -

wykorzystuje Animacje SMIL do tworzenia animowanych efektów na swoich
własnych elementach.
Jak widać prace nad standardem trwały dość długo, bo od pierwszej
propozycji draftu do publikacji oficjalnej rekomendacji minęło ponad 30
miesięcy, a w dokumencie nieustannie dokonywano licznych poprawek.
Świadczy to o tym, iż standard SVG został opracowany bardzo starannie i
rzetelnie przez grono ekspertów, któremu zależało na przygotowaniu
solidnego i bardzo praktycznego dokumentu.
Na miesiąc przed publikacją rekomendacji SVG 1.0, pojawiły się pierwsze
dokumenty, zawierające zestawienie podstawowych wymagań w odniesieniu
do jej następców: SVG w wersji 1.1 oraz 2.0. W tym samym czasie ukazał się
pierwszy draft dokumentu dotyczącego podstawowych wymagań stawianych
profilowi SVG Mobile. 30 października 2001 roku grupa robocza W3C (ang.
W3C Working Group) pracująca nad SVG ogłosiła pierwszą propozycję
specyfikacji 1.1, jak również dwóch dodatkowych profili SVG Tiny i SVG Basic.
14 stycznia 2003 roku dokument, którego opracowanie nadzorowali Jon
Ferraiolo (Adobe Systems), Jun Fujisawa (Canon Inc.) i Dean Jackson (W3C),
stał się oficjalną rekomendacją SVG 1.1, pod którą podpisało się World Wide
Web Consortium.
Przedstawiona historia standardu SVG [9] sięga już kilka lat wstecz. Mimo to
dopiero teraz przeciętni użytkownicy Internetu zaczynają kojarzyć ten
trzyliterowy skrót (SVG) z jego rzeczywistym przeznaczeniem. W prace nad
coraz lepszym dostosowaniem standardu do rosnących wymagań twórców i
użytkowników sieci WWW zaangażowanych jest wielu przedstawicieli
najważniejszych firm informatycznych, uczelni oraz innych instytucji z całego
świata.
- 10/141 -

2.1.4. Aktualny stan prac standaryzacyjnych
Nieustannie trwają prace nad standardem SVG w wersji 1.2. SVG 1.2 jest
aktualnie dostępne w formie draftu [7], zaproponowanego przez Deana
Jacksona z W3C oraz Craiga Northwaya z Canon Inc. Obecnie pracami grupy
przygotowującej nową wersję standardu kieruje Chris Lilley, a w skład
zespołu SVG Working Group wchodzą przedstawiciele takich firm i instytucji
jak Adobe Systems Inc., ERICSSON, France Telecom, Nokia czy Sun
Microsystems Inc. [8].
W związku z przeciągającymi się pracami nad SVG 1.2, szczególny nacisk
położono na szybkie dokończenie i rychłą publikację jego profilu SVG Tiny
1.2. W dniu 10 sierpnia 2006 roku opublikowano oficjalnie dokument SVG
Tiny 1.2 jako kandydata na rekomendację W3C [10]. Uznanie tego standardu
za oficjalną specyfikację sygnowaną przez W3C to kwestia najbliższej
przyszłości. Kolejny draft SVG 1.2 Full ma się ukazać niebawem jako
rozszerzenie SVG Tiny 1.2 o dodatkowe funkcjonalności.
Szczegółowy przegląd oraz porównanie możliwości poszczególnych profili oraz
wersji standardu SVG można znaleźć w drugiej części tego rozdziału. W tym
miejscu chciałbym jeszcze zwrócić uwagę na fakt, że nad przygotowaniem
dokumentu SVG Tiny 1.2 pracowali przedstawiciele tak ważnych firm jak
Adobe Systems (które wycofało się z pracy nad projektem w maju 2006
roku), czy Apple, Canon, Corel Corporation, Hewlett-Packard, IBM, Ikivo,
Macromedia, Microsoft, Motorola, Nokia, Opera Software, Sun Microsystems,
Xerox i wielu innych. Świadczy to o tym, iż standard SVG został uznany za
bardzo istotny element sieci Internet przez wszystkie światowe potęgi
informatyczne. Jednocześnie podkreśla to wagę rekomendacji
opracowywanych przez organizację W3C i konieczność uczestniczenia w
pracach nad nimi przez gigantów branży IT. Zdają oni sobie sprawę z tego jak
ważne jest wywieranie przez nich wpływu na kształt tych rekomendacji.
- 11/141 -

2.2. Rozmaitości
W drugiej części bieżącego rozdziału staram się przedstawić podstawowe
koncepcje, które składają się na będący przedmiotem niniejszej pracy standard.
Oprócz tego poddaję analizie samą nazwę standardu oraz jej implikacje,
wyjaśniam podstawowe pojęcia, z jakimi spotykamy się czytając treść
rekomendacji, by w końcu wskazać kilka sposobów wykorzystania grafiki SVG na
stronach WWW [12]. Na zakończenie rozdziału zwracam uwagę na pewien
podzbiór funkcjonalności SVG, definiowany jako profil przeznaczony dla
urządzeń o niewielkiej mocy obliczeniowej.
2.2.1. Ogólny przegląd standardu
Akronim SVG oznacza Skalowalną Grafikę Wektorową (ang. Scalable Vector
Graphics).
„Skalowalność” polega na możliwości jednolitego zmniejszania oraz
zwiększania rozmiaru. W grafice komputerowej odpowiada to sytuacji, w
której definicja obrazu nie jest ograniczona do pojedynczych pikseli o dobrze
określonej wielkości. Z pojęciem skalowalności spotykamy się również w
sieciach telekomunikacyjnych, gdzie przymiotnik „skalowalny” określa te
techniki, które pozwalają na łatwe przystosowanie usługi zarówno do
niewielkiej, jak i bardzo dużej liczby użytkowników, plików czy aplikacji.
Standard uznaje skalowalność SVG w obu powyższych znaczeniach. Dzięki
temu wyświetlany obraz nie traci na jakości bez względu na to, czy zostanie
on wyświetlony na ekranie niewielkiego urządzenia przenośnego, czy też
wykorzystany do wykonania wydruku na drukarce w najwyższej
rozdzielczości. Obraz może być dowolnie powiększany oraz pomniejszany w
zależności od tego, w jakich okolicznościach jest on przedstawiany. Jeszcze
inną cechą skalowalności SVG jest to, że obrazy SVG mogą stanowić
samodzielne rysunki, jak i być włączane do innych obrazów SVG jako ich
- 12/141 -

części składowe. Dzięki temu skomplikowane ilustracje mogą być budowane z
oddzielnych części nawet przez wiele niezależnie pracujących od siebie osób.
Rys.2.1. Przykładowy wykres pogody na stronie WWW Prognoza Pogody ICM.
Doskonałym przykładem wykorzystania SVG w sieci Internet, który nasuwa mi
się w tym miejscu, może być tworzenie ilustracji, przedstawiającej prognozę
pogody dla wybranego obszaru. Kilka niezależnych zespołów programistów
oraz grafików może mieć przypisane oddzielne zadania. Każdy z nich może
pracować nad ilustracją odpowiadającą innym zbieranym danym: ciśnieniu,
opadom, temperaturze, zachmurzeniu, itp. Następnie wszystkie te fragmenty
łączone są w jeden większy obraz, prezentowany na monitorze użytkownika.
Na stronie internetowej prognozy pogody ICM [11] możemy zobaczyć, jak
- 13/141 -

wygląda taka „modułowa” budowa grafiki (podgląd strony przedstawiłem
również na rysunku 2.1). W tym jednak przypadku nie skorzystano z
możliwości oferowanych przez standard SVG – obrazy przedstawiane są
użytkownikowi w postaci statycznych rysunków w formacie GIF, a co za tym
idzie nie ma możliwości ich bezstratnego powiększania. W tym miejscu
chciałbym zaznaczyć, że jednym z pierwszych celów, jakie postawiłem sobie
do realizacji praktycznej w ramach niniejszej pracy dyplomowej, było
opracowanie aplikacji, umożliwiającej proste generowanie podobnych
wykresów pogodowych, tyle że w formacie SVG.
Kolejną ważną właściwością grafiki SVG jest określenie jej jako „wektorowej”.
Grafika wektorowa zawiera informację o obiektach geometrycznych takich jak
linie proste lub krzywe. Powoduje to, że jest ona zdecydowanie bardziej
elastyczna niż grafika rastrowa (reprezentowana przez obrazy w takich
formatach jak JPG czy PNG), która opiera się na przechowywaniu danych dla
każdego pojedynczego piksela grafiki. Dodatkowo grafika wektorowa posiada
zdolność włączania grafiki rastrowej i jej łączenia z treścią wektorową, np. do
tworzenia ścieżek maskujących (ang. clipping path).
Do pozostałych ważnych cech standardu SVG możemy zaliczyć: fakt, że jest
on aplikacją XML (XML jako rekomendacja W3C jest powszechnie uznanym i
szeroko stosowanym standardem wymiany informacji), za czym idzie
możliwość integracji komponentów SVG w ramach wielu przestrzeni nazw w
większych aplikacjach XML (przykładowo włączając obrazy SVG do
dokumentów napisanych w języku XHTML czy MathML) oraz możliwość
zastosowania arkuszy stylu do kontrolowania wartości atrybutów
poszczególnych elementów dokumentu SVG.
W SVG grafika modelowana jest na poziomie obiektów, a nie pojedynczych
punktów. Podstawowym elementem jest ścieżka (ang. path), która pozwala
na tworzenie rozmaitych obiektów graficznych. Możliwe jest również
- 14/141 -

skorzystanie z kilku podstawowych figur (ang. basic shapes) takich jest
prostokąty czy elipsy.
Standard SVG pozwala użytkownikom na tworzenie nowych, redefiniowanie
istniejących oraz współdzielenie swoich własnych symboli bez konieczności
gromadzenia informacji o nich w scentralizowanych rejestrach. Dzięki temu
różne społeczności użytkowników (np. elektronicy, kartografowie) mogą
tworzyć swoje własne elementy SVG, bez konieczności wprowadzania
dodatkowych modyfikacji do samego standardu.
Bardzo ciekawą propozycją organizacji W3C było wyszczególnienie osobnej
linii rozwojowej standardu SVG, przeznaczonej dla urządzeń mobilnych: profil
SVG Tiny dedykowany telefonom komórkowym oraz profil SVG Basic dla
palmtopów (ang. PDA – Personal Digital Assistant). Specyfikacja SVG Tiny 1.2
posiada status kandydata do rekomendacji (ang. W3C Candidate
Recommendation), a bieżąca wersja draftu została opublikowana w dniu 10
sierpnia 2006 roku. Temat tych uproszczonych wersji standardu SVG
kontynuuję w rozdziale 2.2.3. W związku z faktem, że ani SVG 1.2 Full, ani
SVG 1.2 Tiny nie są jeszcze oficjalnymi rekomendacjami, skupiam się w nim
na krótkiej analizie porównawczej specyfikacji SVG Tiny oraz SVG Basic z SVG
Full, rekomendacjach opublikowanych w dniu 14 stycznia 2003 roku [13].
2.2.2. Metody umieszczania grafiki SVG na stronach WWW
Twórcy grafiki mają do dyspozycji kilka metod, pozwalających na
umieszczanie ich obrazów na stronach internetowych. Wśród możliwych opcji
można wymienić m.in.:
 samodzielna (ang. standalone) grafika SVG: w tej sytuacji całkowitą
zawartość strony WWW stanowi dokument SVG, ładowany
bezpośrednio do przeglądarki i tak prezentowany użytkownikowi
 osadzanie poprzez odwołanie (ang. embedding by reference): w tym
- 15/141 -

przypadku nadrzędny dokument (strona WWW) odwołuje się do
przechowywanej w oddzielnym pliku grafiki SVG. Takie osadzenie
można wykonać za pomocą jednego z trzech elementów
HTML/XHTML: <img>, <object> lub <applet>
 osadzanie wewnętrzne (ang. embedding inline): treść dokumentu SVG
zawarta jest bezpośrednio wewnątrz dokumentu nadrzędnego (np.
strony WWW)
 łącze zewnętrzne: wykorzystanie elementu <a> języka HTML
umożliwia przeglądanie grafiki w dowolnym programie akceptującym
format SVG
2.2.3. SVG dla urządzeń o niewielkiej mocy obliczeniowej
SVG Working Group zdecydowało się na opracowanie oddzielnych
rekomendacji dla urządzeń mobilnych przede wszystkim dlatego, że
urządzenia te bardzo znacząco różnią się od siebie w wielu aspektach, między
innymi szybkością procesora (ang. CPU speed), rozmiarem dostępnej pamięci
oraz liczbą wyświetlanych kolorów. Aby skutecznie zaimplementować obsługę
standardu SVG w tak różnorodnych urządzeniach, zdecydowano się na
przygotowanie dla nich oddzielnych profili: SVG Tiny przeznaczone dla
przyrządów o bardzo ograniczonych możliwościach (np. telefonów
komórkowych) oraz SVG Basic dla urządzeń dysponujących nieco większymi
zasobami (np. palmtopy). Podstawowym założeniem obydwu profili jest
umożliwienie renderowania grafiki SVG na ekranach urządzeń przenośnych,
dysponujących ograniczonymi zasobami pamięci czy szybkości procesora.
Na profil SVG Tiny składają się następujące moduły (w obrębie poniższej listy
elementów oraz atrybutów sygnalizuję tylko obecność pewnych
funkcjonalności, szczegółowy opis właściwości wybranych elementów
standardu jest przedmiotem następnego rozdziału):
- 16/141 -

 Moduł podstawowych atrybutów (ang. Core Attribute Module),
definiujący zbiór atrybutów (ang. attribute set) Core.attrib, które mogą
wystąpić w dowolnym elemencie. Są to cztery atrybuty: id,
xml:base, xml:lang, xml:space
 Moduł podstawowej struktury dokumentu SVG (ang. Basic Structure
Module), w ramach którego zawierają się następujące elementy: defs,
desc, g, metadata, svg, title, use
 Moduł podstawowych atrybutów rysowania (ang. Basic Paint Attribute
Module), który definiuje zbiór atrybutów nazwany Paint.attrib, w
którym znajdują się atrybuty takie jak color, fill, stroke,
stroke-width i kilka innych, określających styl rysowania elementów
 Moduł podstawowych atrybutów grafiki (ang. Basic Graphics Attribute
Module) to moduł, który definiuje dwa atrybuty: display,
visibility
 Moduł hiperłącza (ang. Hyperlinking Module) określa listę dozwolonych
atrybutów elementu a (m.in. Style.attrib, transform, target),
służącego do tworzenia hiperłączy w dokumencie SVG
 Moduł atrybutów XLink (ang. XLink Attribute Module) definiuje zbiory
atrybutów: XLink.attrib, XLinkRequired.attrib, XLinkEmbed.attrib i
XLinkReplace.attrib, zawierające atrybuty związane z właściwościami
hiperłączy
 Moduł przetwarzania warunkowego (ang. Conditional Processing
Module) zawiera jeden element switch oraz listę dozwolonych dla
niego atrybutów
 Moduł figur geometrycznych (ang. Shape Module) opisuje podstawowe
elementy, za pomocą których możemy definiować proste kształty na
- 17/141 -

rysunku SVG. Są to: okrąg (element circle), elipsa (ellipse),
odcinek (line), ścieżka (path), wielokąt (polygon), linia łamana
(polyline) i prostokąt (rect). Każdy z tych elementów posiada listę
dozwolonych atrybutów, które pozwalają określić np. położenie obiektu
w układzie współrzędnych, długości boków lub promień oraz kilka
zestawów atrybutów opisanych w pozostałych podpunktach tego
zestawienia, np. Paint.attrib czy Graphics.attrib
 Moduł obrazu (ang. Image Module) opisuje listę dozwolonych
właściwości elementu image, m.in. atrybuty transform, x, y,
width, height oraz kilka innych zestawów atrybutów
 Moduł tekstowy (ang. Basic Text Module) zawiera listę dozwolonych
zestawów atrybutów dla elementu text, dozwolone wartości tego
elementu oraz atrybuty wchodzące w skład kolekcji Font.attrib (są to
właściwości opisujące krój, rozmiar oraz styl stosowanej czcionki:
font-family, font-size, font-style, font-weight) oraz
TextContent.attrib (zawierający atrybut text-anchor, określający
wyrównanie tekstu, np. wycentrowanie w poziomie)
 Moduł czcionki (ang. Basic Font Module) definiuje listę dozwolonych
atrybutów dla elementów: font, font-face, font-face-name,
font-face-src, glyph, hkern, missing-glyph, służących do
definiowania czcionek
 Moduł animacji (ang. Animation Module), definiujący zbiór
podstawowych elementów pozwalających na tworzenie animowanych
efektów w SVG: animate, animateColor, animateMotion,
animateTransform, mpath, set oraz listę skojarzonych z nimi
atrybutów
 Moduł rozszerzalności (ang. Extensibility Module) opisuje tylko jeden
- 18/141 -

element foreignObject i jego atrybuty. Zawartością tego elementu
jest zawsze sekcja #PCDATA. Głównym przeznaczeniem tego modułu
jest umożliwienie włączania elementów z innych przestrzeni nazw w
dowolnym miejscu dokumentu SVG.
Powyższe zestawienie modułów daje nam obraz możliwości, jakie powinna
posiadać zgodna ze specyfikacją W3C implementacja profilu SVG Tiny.
Zdecydowałem się na tak dokładne wymienienie wszystkich modułów,
ponieważ stanowią one rdzeń nie tylko dla SVG Tiny, ale również wszystkich
pozostałych profili SVG.
Już teraz SVG Tiny zostało zaimplementowane w ponad 100 modelach
telefonów komórkowych, produkowanych przez takie koncerny jak LG,
Motorola, NEC, Nokia, Panasonic, Samsung, Sharp, Siemens, Sony Ericsson
czy Toshiba [14].
Profil SVG Basic posiada wszystkie cechy SVG Tiny, został on jednak
poszerzony o kilka dodatkowych modułów, dających mu znacznie większe
możliwości. Aby nie wymieniać wszystkich z nich po kolei tak, jak to zrobiłem
dla SVG Tiny, pozwolę sobie przedstawić pokrótce te, które uważam za
najistotniejsze i które decydują o tym, że profil SVG Basic jest znacznie
bardziej skomplikowany. Co za tym idzie, jest on implementowany w
urządzeniach mobilnych typu palmtopy, które posiadają większe możliwości
przetwarzania danych niż zwykłe aparaty telefoniczne.
Pierwszym modułem, na który chcę zwrócić uwagę, jest moduł stylów (ang.
Style Module), który pozwala na zastosowanie arkuszy stylu CSS lub XSL do
dokumentu SVG. Dzięki temu w samym dokumencie SVG możemy
zdefiniować tylko i wyłącznie „treść” rysunku (np. dane wykresu), natomiast
jego wygląd (np. kolory poszczególnych słupków na wykresie) możemy
kontrolować z poziomu zewnętrznego arkusza stylu.
Inną cenną własnością profilu SVG Basic jest implementacja modułu
- 19/141 -

atrybutów przezroczystości (ang. Opacity Attribute Module). Moduł ten
pozwala na definiowanie właściwości określających przezroczystość do
wszystkich elementów, które w wykazie swoich atrybutów posiadają zbiór
Opacity.attrib.
Jedną z najbardziej wyróżniających się różnic pomiędzy profilami SVG Basic i
SVG Tiny jest implementacja modułu gradientowego (ang. Gradient Module),
który pozwala na definiowanie gradientów liniowych oraz radialnych w SVG
Basic. W związku z faktem, że rysowanie gradientów wymaga znacznych
nakładów obliczeniowych, moduł ten nie mógłby być zaimplementowany w
SVG Tiny.
Moduł wzorów (ang. Pattern Module) pozwala na wykorzystanie
predefiniowanych obiektów złożonych z podstawowych elementów SVG jako
wypełnienia innych elementów rysunku. Pozwala to użytkownikowi na
definiowanie dowolnie skomplikowanych wzorów, a następnie ich
zastosowanie na przykład jako wypełnienia podstawowych figur.
W SVG Basic wprowadzone zostają dodatkowe moduły, odpowiedzialne za
interaktywność rysunku. Pierwszym z nich jest moduł atrybutów zdarzeń
dokumentu (ang. Document Events Attribute Module), który pozwala m.in.
określać, jak ma zachować się przeglądarka w przypadku nie załadowania
któregoś z elementów, niekompletnego załadowania elementu, skalowania
obrazu, przewijania obrazu w poziomie lub w pionie oraz jego powiększania
lub pomniejszania. Drugim interaktywnym modułem jest moduł atrybutów
zdarzeń elementów graficznych (ang. Graphical Element Events Attribute
Module), definiujący atrybuty dedykowane elementom graficznym obrazu
SVG, które pozwalają określić sposób reakcji przeglądarki na zdarzenia takie
jak naciśnięcie lub zwolnienie przycisku myszy nad wybranym elementem,
przemieszczanie wskaźnika myszy nad elementem, itp. Trzeci zbiór atrybutów
interaktywnych zdefiniowany jest w module atrybutów zdarzeń animacji (ang.
- 20/141 -

Animation Events Attribute Module). Moduł ten pozwala zdefiniować reakcje
na zdarzenia takie jak rozpoczęcie animacji, jej zakończenie oraz powtórzenie.
Bardzo ważnym modułem jest moduł skryptów (ang. Scripting Module).
Definiuje on tylko jeden element script, który posiada jednak potężne
możliwości. Przeznaczenie tego elementu jest dokładnie takie samo jak w
przypadku dokumentów HTML, tzn. pozwala on na zamieszczanie skryptów
wewnątrz dokumentów SVG (z tego też powodu zawartość tego elementu
może stanowić wyłącznie sekcja #PCDATA). Zastosowanie skryptów jest
szczególnie przydatne wówczas, gdy chcemy manipulować obrazem SVG w
wyniku zaistniałych zdarzeń. Banalny przykład: korzystając z obiektowego
modelu dokumentu SVG, możemy wywołać prosty skrypt, który w wyniku
kliknięcia myszą na elemencie, spowoduje zmianę jego rozmiarów. Możliwości
zastosowania skryptów są ogromne, ponieważ SVG umożliwia niezależne
kojarzenie zdarzeń z dowolnym elementem graficznym rysunku.
Ostatnim modułem, na który chciałbym zwrócić uwagę w tym skróconym
opisie, jest moduł podstawowych filtrów (ang. Basic Filter Module). Filtry są
doskonałym narzędziem do tworzenia efektów graficznych, urozmaicają
rysunek, sprawiają, że zawartość grafiki staje się o wiele bogatsza w stosunku
do prymitywnego oryginału. Filtrowanie poszczególnych części rysunku
pozwala na uzyskanie takich efektów graficznych jak rozmycie, przesunięcie,
rozświetlenie, łączenie różnych warstw, morfing, turbulencja i inne.
Oprócz wymienionych wyżej modułów, które decydują o tym, że SVG Basic
jest zdecydowanie bardziej skomplikowane niż SVG Tiny (chociaż ciągle nie
tak trudne w implementacji jak SVG Full), dostępnych jest jeszcze kilka innych
modułów, o których nie wspomniałem, by nie zagłębiać się w niezbyt ciekawe
szczegóły teorii.
Mimo iż są ograniczone w stosunku do SVG Full, to jednak zarówno SVG Tiny
jak i SVG Basic posiadają potężne możliwości tworzenia oraz manipulowania
- 21/141 -

obrazami. Co istotne, obie wersje mobilnego standardu SVG są obecnie
skutecznie implementowane w coraz większej liczbie urządzeń przenośnych
[14], na co już wcześniej zwróciłem uwagę.
2.3. Podsumowanie
W drugim rozdziale swojej pracy dyplomowej dokonałem krótkiego
wprowadzenia do standardu SVG, przedstawiłem podstawowe koncepcje oraz
pojęcia z nim związane, opisałem historię jego powstania oraz przebieg prac
standaryzacyjnych. Zwróciłem również uwagę na kilka zagadnień praktycznych,
takich jak umieszczanie grafiki SVG na stronach WWW. Na jego zakończenie
przybliżyłem elementy składowe okrojonych profili dyskutowanego standardu,
które przeznaczone są do implementacji w urządzeniach mobilnych ustępujących
mocą obliczeniową współczesnym komputerom stacjonarnym.
W rozdziale trzecim zamierzam przedstawić szczegółowo składniki rekomendacji
SVG w ostatniej opublikowanej wersji 1.1, dokonać precyzyjnej analizy
najważniejszych możliwości grafiki SVG oraz zaprezentować kilka konkretnych
przykładów jej wykorzystania. Z kolei rozdział czwarty poświęcam
charakterystyce aplikacji przygotowanych przeze mnie na potrzeby pracy oraz
demonstracji praktycznych ich możliwości.
- 22/141 -

3. Szczegółowy przegląd możliwości SVG
Trzeci rozdział pracy dyplomowej chciałbym poświęcić szczegółowemu przeglądowi
możliwości grafiki SVG. Poprzedni rozdział w sposób bardzo ogólny opisywał
podstawowe jej cechy. Sucha teoria, nie poparta konkretnymi przykładami, może
dać zaledwie przybliżony obraz potencjalnych możliwości dyskutowanej techniki.
Dlatego też ten rozdział będzie o wiele bardziej konkretny, zawierać będzie kilka
praktycznych przykładów i wartościowych, z praktycznego punktu widzenia,
informacji. Zdaję sobie sprawę z tego, że nie sposób ogarnąć wszystkich istotnych
właściwości skalowalnej grafiki wektorowej (nie mówiąc już o ogarnięciu standardu
SVG jako całości) w jednym krótkim rozdziale (potrzeba by na to
kilkusetstronicowej książki, a i ona zapewne nie wyczerpałaby do końca tematu,
nad którym pracuje od wielu lat szerokie grono ekspertów). Postaram się zatem
zwrócić uwagę tylko na te zagadnienia, które z punktu widzenia osoby chcącej
poznać od podstaw grafikę SVG mogłyby się wydać najciekawsze, a których
znajomość będzie jednocześnie doskonałym punktem wyjścia do dalszego
poszerzania wiedzy.
3.1. Podstawowe składniki rekomendacji
Wszystkie właściwości grafiki SVG można odnaleźć w rekomendacji W3C [15].
Kolejne rozdziały specyfikacji dotyczą różnorodnych aspektów tego standardu.
Celem przejrzystego zestawienia jego podstawowych cech pozwolę sobie
dokonać w niniejszym rozdziale krótkiej charakterystyki zagadnień, opisywanych
w kilku różnych rozdziałach specyfikacji, a dotyczących najbardziej
podstawowych obszarów wykorzystania grafiki SVG (rozdział trzeci mojej pracy
- 23/141 -

w całości został oparty na informacjach zawartych w rekomendacji W3C).
3.1.1. Przedstawienie treści pierwszych rozdziałów
Pierwszy rozdział rekomendacji wprowadza nas w świat SVG, wyjaśniając
podstawowe pojęcia i terminy stosowane w tekście specyfikacji, jak również
przedstawiając kilka kluczowych zagadnień z zakresu jej praktycznego
wykorzystania (przyjęte rozszerzenia plików SVG, typ MIME, przestrzeń nazw
SVG, deklarację DTD dokumentu).
W drugim rozdziale opisane zostają kluczowe koncepcje standardu:
wyjaśniona zostaje geneza nazwy SVG, jej najważniejsze idee, jak również
możliwości wykorzystania grafiki SVG w sieci WWW (o zagadnieniach tych
pisałem już wcześniej w rozdziałach 2.3.1 oraz 2.3.2).
3.1.2. Zagadnienia renderowania grafiki w SVG
Rozdział trzeci dotyczy szczegółów technicznych związanych z renderowaniem
grafiki SVG. Jest to krótki, ale bardzo ważny rozdział, ponieważ procedura
generowania rysunku determinuje to, w jaki sposób widzieć go będzie na
ekranie swojego monitora użytkownik końcowy. Kolejność nakładania
następujących po sobie elementów na prezentowany obraz ma bardzo istotne
znaczenie. Na przykład nie jest do końca oczywiste, czy elementy potomne
powinny być rysowane na pierwszym czy na drugim planie w stosunku do
swoich elementów nadrzędnych. Rekomendacja reguluje wszelkie tego typu
niejasności.
W rozdziale szczegółowo opisano, jak powinny być renderowane grupy
elementów, jak pojedyncze elementy, w jaki sposób nakładane mają być filtry
na wykreślone już wcześniej regiony, czy też jak realizować maskowanie oraz
nakładanie się różnych elementów. Informacje te są szczególnie istotne dla
osób i firm, zajmujących się implementacją standardu SVG w swoich
- 24/141 -

własnych aplikacjach, zwłaszcza w przeglądarkach internetowych oraz
edytorach graficznych.
3.1.3. Typy danych
W rozdziale czwartym rekomendacji przedstawione zostały bardzo
szczegółowe informacje na temat podstawowych typów danych oraz
interfejsów DOM stosowanych w SVG. Można dowiedzieć się stąd między
innymi o tym, że właściwości oraz atrybuty elementów SVG mogą mieć
przypisane wartości m.in. następujących typów: liczby całkowite oznaczane
jako <integer>, liczby rzeczywiste <number>, długości <length>
(dozwolone jednostki opisane zostały w rozdziale 7.10 specyfikacji),
współrzędne <coordinate>, listy wartości <list of xxx>, kąty
<angle>, kolory <color>, procenty <percentage>, częstotliwości
<frequency>, czas <time> oraz kilka innych.
Bardzo wartościową, zwłaszcza dla osób tworzących grafikę SVG w sposób
niebezpośredni (tzn. nie w specjalizowanych do tego edytorach graficznych,
ale na przykład za pośrednictwem innych języków programowania lub za
pomocą zwykłego edytora tekstu), jest sekcja zawierająca zestawienie
rozpoznawalnych jako kluczowe nazw kolorów. Przeglądając kod źródłowy
dokumentu SVG o wiele łatwiej można sobie wyobrazić wygląd rysunku, jeżeli
kolory opisane są przez wyrazy gold i brown zamiast rgb(255,215,0) i
rgb(165,42,42). Kolorów, które posiadają w SVG swoje nazwy, jest 147 –
jest to ilość zadowalająca nawet bardziej wymagających twórców grafiki.
3.1.4. Struktura dokumentu SVG
Rozdział piąty dotyczy struktury dokumentu SVG. Opisano w nim, w jaki
sposób poprawnie zdefiniować dokument SVG za pomocą elementu <svg>
oraz odpowiedniego zapisu przestrzeni nazw w elemencie nadrzędnym.
- 25/141 -

Zawarte zostały tam również informacje na temat dozwolonych atrybutów
elementu <svg>. W dalszej części rozdziału scharakteryzowane zostało
zagadnienie grupowania większej liczby elementów w jeden za pomocą
elementu <g>.
Kolejne zagadnienia dotyczą odwołań do innych zasobów za pomocą
identyfikatorów URI (ang. Uniform Resource Identifiers), zastosowania
elementów opisowych, przetwarzania warunkowego oraz innych kwestii
związanych z poprawną konstrukcją dokumentów SVG. Na zakończenie
rozdziału zestawione zostały wszystkie moduły SVG, które dotyczą
wspomnianych zagadnień, m.in. moduł atrybutów dozwolonych dla
wszystkich elementów, moduł struktury zawierający listę elementów
związanych ze strukturą dokumentu, moduł przetwarzania warunkowego
(ang. Conditional Processing Module) czy moduł obrazów (ang. Image
Module).
3.1.5. Style
O możliwościach zastosowania stylów w SVG można przeczytać w rozdziale
szóstym rekomendacji W3C. Style pozwalają na opisanie wielu różnorodnych
właściwości dokumentu SVG, przede wszystkim na zdefiniowanie sposobu, w
jaki renderowane będą elementy rysunku. Pozwalają na określanie takich
parametrów jak wypełnienia, kontury, grubości linii. W przypadku tekstu
pozwalają na przykład na określenie rozmiaru oraz rodzaju czcionki.
Modyfikują parametry, które wpływają na sposób generowania rysunku, takie
jak ścieżki maskujące, znaczniki czy filtry.
Właściwości wszystkich elementów rysunku SVG mogą zostać określone bez
definiowania stylów (czasami takie rozwiązanie jest konieczne, na przykład
gdy ten sam plik SVG przetwarzany jest za pomocą różnych programów, z
których nie każdy obsługuje zewnętrzne style), ale najczęściej stosuje się w
- 26/141 -

tym celu jeden z dwóch standardów: XSLT oraz CSS. Podejścia do
zagadnienia są tu jednak różne.
W przypadku zastosowania XSLT jesteśmy w stanie dokonać skomplikowanej
transformacji dowolnego dokumentu z danymi w formacie XML (a zatem
także rysunku SVG) do dowolnego innego formatu, na przykład SVG
(przykładem takiego zastosowania jest jedna ze zrealizowanych przeze mnie
aplikacji praktycznych, opisana w rozdziale zatytułowanym „Generator
wykresów pogodowych”).
Technika CSS pozwala nam na zastosowanie stylów do już istniejących
dokumentów SVG, dokładnie w taki sam sposób, jak stosuje się ją do
dokumentów HTML. Skojarzony z dokumentem SVG arkusz stylu CSS pozwala
na modyfikację atrybutów wszystkich elementów tego dokumentu.
Rekomendacja wskazuje szczegółowo, w jaki sposób można z poziomu
dokumentu SVG odwoływać się do zewnętrznego arkuszu stylu oraz jakie
reguły rządzą przetwarzaniem dokumentu SVG za pomocą techniki XSLT.
3.1.5. Obszar rysunku
Rozdział siódmy został poświęcony systemowi współrzędnych rysunku,
transformacjom oraz stosowanym jednostkom. Bardzo ważnym pojęciem, na
które zwraca uwagę rekomendacja, jest tutaj obszar obrazu (ang. canvas).
Obszar obrazu definiowany jest przez specyfikację jako „przestrzeń, na której
renderowana jest treść rysunku”. Oprócz tego definiowany jest również
widoczny obszar obrazu (ang. viewport), który określany jest jako „widoczna
dla użytkownika część obrazu”. W odniesieniu do tych terminów
definiowanych jest mnóstwo innych, określających rozmiary obrazu,
współrzędne rysunku, matryce transformacji, itd.
Przyjmuje się, że punkt w lewym górnym rogu rysunku ma współrzędne
(0,0). Przesuwając się w prawo wzdłuż osi X wartości rosną, podobnie
- 27/141 -

przesuwając się w dół wzdłuż osi Y wartości również rosną. Oczywiście za
pomocą odpowiednich transformacji możliwe jest przemieszczanie, obracanie,
przekrzywianie oraz skalowanie pierwotnego systemu współrzędnych i co za
tym idzie modyfikowanie prezentowanego użytkownikowi obrazu.
3.1.6. Skalowanie w praktyce
Bardzo ciekawym parametrem elementu <svg>, odnoszącym się do
skalowania, jest atrybut viewBox. Umożliwia on dopasowanie rozmiarów
rysunku do potrzeb użytkownika. W ten sposób, jeśli posiadamy rysunek o
oryginalnych rozmiarach 2000x2000 pikseli i chcemy, aby został on „ściśnięty”
na naszej stronie WWW do obszaru o wymiarach 150x200 pikseli (bo akurat
taki rozmiar jest wymagany przez układ graficzny naszej strony), wystarczy
zastosować atrybut viewBox, który spowoduje, że oryginalny obraz zostanie
przeskalowany i w całości wypełni obszar przeznaczony dla rysunku SVG:
<svg width="150px" height="200px" version="1.1"
viewBox="0 0 2000 2000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
Analogicznie do poprzedniego przykładu, jeżeli ten sam rysunek na innej już
stronie potrzeba by umieścić w obszarze o wymiarach 250x100 pikseli,
zapisalibyśmy:
<svg width="250px" height="100px" version="1.1"
viewBox="0 0 2000 2000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
W powyższym przykładzie w elemencie <svg> zdefiniowano jeszcze jeden
dodatkowy atrybut: preserveAspectRatio. Służy on do określenia, czy
rysunek ma zachować oryginalne proporcje, czy też może on całkowicie
wypełnić przeznaczony mu obszar. Lista dostępnych wartości tego parametru
jest długa i pozwala na bardzo precyzyjny dobór warunków skalowania
- 28/141 -

rysunku.
3.1.7. Jednostki wielkości
Innym interesującym zagadnieniem, poruszanym w siódmym rozdziale
rekomendacji, jest wspomniana wcześniej kwestia jednostek. W SVG wszelkie
współrzędne oraz rozmiary mogą być definiowane zarówno z jak i bez
identyfikatora jednostek. Jeżeli liczby podawane są bez jednostki, przyjmuje
się, że wartość podana jest w jednostkach użytkownika. Możliwe jest również
wskazanie którejś z jednostek absolutnych zdefiniowanych przez standard
CSS (tj. em, ex, px, pt, pc, cm, mm, in). Oprócz tego dozwolone jest także
określanie rozmiarów w procentach.
3.1.8. Przedstawienie treści kolejnych rozdziałów
Kilka kolejnych rozdziałów standardu dotyczy zagadnień, którym szczegółowo
przyjrzę się w rozdziale 3.2 pracy zatytułowanym „Najważniejsze możliwości
SVG”, ponieważ dotyczą one bezpośrednio tworzenia konkretnych elementów
SVG, takich jak ścieżki (rozdział 8 rekomendacji), podstawowe kształty
(rozdział 9), tekst (rozdział 10), wypełnienia i kontury (rozdział 11), gradienty
i wzory (rozdział 13) oraz czcionki (rozdział 20).
Bardziej skomplikowane właściwości SVG, takie jak przycinanie, maskowanie,
komponowanie (rozdział 14), filtry (rozdział 15), interaktywność (rozdział 16),
hiperłącza (rozdział 17), skrypty (rozdział 18) oraz animacje (rozdział 19)
będą przedmiotem rozdziału 3.3 niniejszej pracy zatytułowanego
„Zaawansowane właściwości SVG”. W tym miejscu pozostały mi do omówienia
jeszcze trzy ostatnie rozdziały specyfikacji.
3.1.9. Metadane i kompatybilność wstecz
Rozdział dwudziesty pierwszy dotyczy metadanych w SVG. Standard XML
- 29/141 -

pozwala na opisywanie danych przez inne dane nazywane dla rozróżnienia
metadanymi i zawieranie tych informacji wewnątrz samego dokumentu. W
związku z tym SVG posiada również taką możliwość, która realizowana jest za
pomocą elementu <metadata>.
W rozdziale dwudziestym drugim opisano dwa scenariusze, pozwalające na
zachowanie kompatybilności wstecz dokumentom SVG. Oczywistym jest, że
użytkownik końcowy może korzystać z takiej wersji przeglądarki internetowej
lub innego programu (ang. user agent), która nie została wyposażona w
obsługę standardu SVG (taka obsługa została/zostanie dopiero
zaimplementowana w jego kolejnej wersji lub w ogóle). W związku z tym
założenie, że rysunek SVG zostanie poprawnie wyświetlony na każdym
urządzeniu końcowym, jest błędne. Rekomendacja W3C proponuje
przeciwdziałać niekompatybilności starszych programów z nowym standardem
na dwa sposoby.
W przypadku dokumentów zgodnych ze standardem XML, które pozwalają na
osadzanie treści SVG, można użyć elementu <switch> w następujący
sposób, aby zapewnić alternatywny rysunek do wyświetlenia na wypadek,
gdyby program nie obsługiwał formatu SVG:
<switch>

<ref type="image/svg+xml" src="rysunek.svg"/>

<img src="alternatywny_rysunek.jpg"/>
</switch>
W przypadku HTML 4, rysunki SVG mogą być osadzane w dokumencie za
pomocą elementu <object> w następujący sposób:
<object type="image/svg+xml" data="rysunek.svg">
<!-- Jeżeli przeglądarka internetowa nie jest w stanie
wyświetlić rysunku SVG, wówczas przetwarzana będzie
- 30/141 -

poniższa zawartość: -->
<img src="alternatywny_rysunek.jpg" alt="opis">
</object>
3.1.10. Rozszerzalność języka SVG
Ostatni rozdział rekomendacji opisuje zagadnienia związane z rozszerzalnością
(ang. extensibility) języka SVG. Możemy się z niego dowiedzieć, że SVG
pozwala na włączanie elementów z obcych przestrzeni nazw w dowolnym
miejscu dokumentu. SVG dostarcza również mechanizmów pozwalających
innym językom XML na wstawianie swojej zawartości na obszar rysunku (np.
wstawianie wyrażenia matematycznego przygotowanego w języku MathML na
wybrany fragment rysunku). Służy do tego celu element <foreignObject>,
który przyjmuje cztery atrybuty określające położenie obcego elementu na
rysunku SVG (współrzędne x i y oraz rozmiary width i height).
W SVG możliwe jest również dodawanie własnych elementów oraz atrybutów
do składni DTD. W ten sposób użytkownik może zbudować w oparciu o
standard SVG swój własny rozszerzony język SVG, który najlepiej będzie
spełniał jego osobiste potrzeby.
3.1.11. Podsumowanie podstawowych informacji
Rekomendacja opisuje bardzo szczegółowo wymienione w tym rozdziale
mojej pracy zagadnienia. Moim celem nie było powielanie tych informacji, lecz
solidne ich streszczenie oraz dokonanie ogólnego przeglądu możliwości grafiki
SVG. Chciałem zasygnalizować potężne możliwości tego języka, jak również
przedstawić dokładniej kilka zagadnień, które wydały mi się najciekawsze. W
rozdziale 3.2 zaprezentuję na konkretnych przykładach w postaci kodu
źródłowego oraz wygenerowanych w przeglądarce internetowej rysunków, w
jaki sposób korzystać z podstawowych elementów graficznych oferowanych
przez standard oraz jak wygląda tworzenie grafiki w oparciu o te elementy.
- 31/141 -

3.2. Najważniejsze możliwości SVG
Przedmiotem niniejszego rozdziału jest przedstawienie najistotniejszych z punktu
widzenia twórcy grafiki możliwości, oferowanych przez standard SVG. W celu
realizacji tego zadania omówię oraz przedstawię kilka praktycznych przykładów
wykorzystania podstawowych elementów, będących składnikami języka SVG.
Mam nadzieję, że rozdział ten da znacznie szerszy obraz możliwości
dyskutowanego standardu niż omawiane do tej pory zagadnienia teoretyczne.
3.2.1. Modelowanie kształtów za pomocą ścieżek
Pierwszym elementem, na który chciałbym zwrócić uwagę w tym paragrafie,
jest ścieżka (ang. path). Rozdział ósmy rekomendacji W3C definiuje ścieżkę
jako kontur (ang. outline) figury, który może zostać wykorzystany na jeden z
trzech sposobów (lub jako ich kombinację): wypełnienie, obramowanie,
ścieżka maskująca. Ścieżka opisywana jest za pomocą koncepcji bieżącego
punktu (ang. current point) – co jest przez to rozumiane, łatwo sobie
wyobrazić stosując anologię z rysowaniem na papierze. Bieżący punkt jest
odpowiednikiem aktualnego położenia ołówka na kartce, po której rysujemy.
Jego pozycja może ulec zmianie w dowolnym momencie, kontur może być
zamknięty lub otwarty i wykreślany za pomocą linii krzywych lub prostych.
Ścieżka reprezentuje kontur obiektu, zdefiniowany za pomocą takich instrukcji
jak moveto (określenie nowej pozycji dla bieżącego punktu), lineto
(wykreślenie linii prostej do wskazanego punktu), curveto (wykreślenie linii
krzywej do wskazanego punktu przy wykorzystaniu miary Beziera), arc
(poprowadzenie łuku eliptycznego lub kołowego) oraz closepath
(zamknięcie kształtu poprzez przedłużenie ścieżki do ostatniego z elementów
moveto).
Ścieżki w SVG definiowane są za pomocą elementu <path>. Dozwolone są tu
następujące dwa atrybuty: d zawierający definicję konturu oraz pathLength
- 32/141 -

określający całkowitą długość ścieżki, służący do jej skalowania przez
aplikację. Kluczowym składnikiem jest tu atrybut d elementu <path>,
definiujący kształt ścieżki. Jego wartością jest wyrażenie, składające się z
instrukcji sformułowanych za pomocą pojedynczych liter, np. litera M
odpowiada instrukcji moveto, a litera L odpowiada instrukcji lineto. Po
instrukcji następują liczby, stanowiące parametry instrukcji (ich liczba zależy
od typu instrukcji), a po nich kolejne instrukcje. Całość wyrażenia jest
definicją ścieżki.
Na rysunku 3.2 przedstawiono przykładowy obraz SVG, utworzony wyłącznie
z elementów <path>, natomiast na rysunku 3.1 można przejrzeć kod
źródłowy SVG, który posłużył do jego wygenerowania. Jak widzimy do ścieżek
można stosować wszystkie podstawowe atrybuty, pozwalające na określanie
takich właściwości utworzonych figur jak chociażby kolor wypełnienia czy
grubość obramowania. Czyni to ścieżki jednymi z najefektywniejszych
narzędzi do edycji grafiki wektorowej.
<path d="M 10 280 L 180 10 L 140 260 Z"
fill="yellowgreen" stroke="darkgreen" stroke-width="5"
stroke-linejoin="round"/>
<path d="M 300 100 h -80 a 80 80 0 1 0 80 -80 Z"
fill="khaki" stroke="peru" stroke-width="5"
stroke-linejoin="square"/>
<path d="M 10 10 l 50 50 a 25 25 30 0 1 50 25 l 75 25 a
25 50 30 0 1 50 50 l 25 50 a 25 100 40 0 1 50 50 l 50
25" fill="none" stroke="sienna" stroke-width="6"
stroke-linejoin="square"/>
<path d="M 10 230 Q 60 10 180 180 T 390 250" fill="none"
stroke="dodgerblue" stroke-width="6"
stroke-linecap="round"/>
Rys.3.1. Kod źródłowy obrazu SVG, przedstawionego na rysunku 3.2
(pominięto nagłówek XML, deklarację DTD oraz element główny <svg>).
Starałem się na jednym obrazie zamieścić różne kształty wygenerowane za
pomocą tego samego elemetu SVG, tj. ścieżki <path>, aby pokazać jak
- 33/141 -

różnorodne i wszechstronne zastosowanie może mieć ten jeden tylko element
standardu.
Rys.3.2. Rysunek SVG utworzony wyłącznie z elementów <path>.
3.2.2. Wykreślanie figur za pomocą kształtów
Rozdział 9 rekomendacji W3C poświęcony został opisowi podstawowych
kształtów (ang. basic shapes), oferowanych użytkownikowi przez standard
SVG. Poza ścieżkami są one chyba najważniejszymi z podstawowych
elementów grafiki SVG. Odróżnia ich od ścieżek to, że są dużo łatwiejsze do
zastosowania dla początkujących użytkowników.
Specyfikacja oferuje następujące słowa kluczowe służące do definiowania
podstawowych kształtów: <rect> (prostokąt), <circle> (koło),
- 34/141 -

<ellipse> (elipsa), <line> (linia), <polyline> (linia łamana) i
<polygon> (wielokąt). Mimo iż każdy z tych kształtów, dla których
stworzono oddzielne słowa kluczowe, można uzyskać przez odpowiednie
zdefiniowanie ścieżki <path>, o wiele wygodniejsze wydaje się przecież
wykreślanie prostokąta za pomocą elementu <rect> niż poprzez
wykorzystanie ścieżki <path>. Rzut oka na kod źródłowy pozwala
zorientować się, w którym miejscu znajduje się definicja prostokąta, w
przypadku zastosowania nie opatrzonego żadnym komentarzem elementu
<path> nie jest to w żadnym wypadku oczywiste.
Każdy z wymienionych wyżej kształtów może posiadać kontur, zdefiniowany
za pomocą odpowiednich atrybutów (stroke, stroke-width, itp.). Może
również zostać wypełniony (atrybut fill). Wiąże się to z faktem, że każdy z
atrybutów dostępnych dla elementu <path> można zastosować również do
każdego z podstawowych kształtów.
Na rysunku 3.3 zamieszczono przykładowy obraz, na którym wykreślono po
jednym obiekcie dla każdego z elementów zawierających się w zbiorze
podstawowych kształtów. Warto zauważyć, że atrybuty poszczególnych
elementów są bardzo intuicyjne i możliwe do zrozumienia nawet bez
dogłębnej lektury specyfikacji. Atrybuty x i y zwykle oznaczają współrzędne
obiektu na płaszczyźnie – nie inaczej jest w tym przypadku. Atrubuty width
oraz height odpowiadają odpowiednio szerokości oraz wysokości obiektu, r
to oczywiście promień koła, natomiast rx i ry to dwa promienie elipsy. W
przypadku linii musimy określić współrzędne jej początku oraz końca, a zatem
zastosujemy zmienne z indeksem: x1 i y1 oraz x2 i y2. Jedynym wyjątkiem
są tu elementy <polyline> oraz <polygon>. Zbiór kolejnych punktów
figury stanowi wartość atrybutu points (współrzędne punktów podawane są
w układzie współrzędnych użytkownika). Każdy z wymienionych elementów
- 35/141 -

można ujrzeć w kodzie źródłowym obrazu zamieszczonym na rysunku 3.4.
Rys.3.3. Rysunek SVG utworzony za pomocą podstawowych kształtów.
<rect x="20" y="180" width="180" stroke-width="5"
height="100" fill="paleturquoise" stroke="darkcyan"/>
<circle cx="330" cy="100" r="50" fill="darkseagreen"
stroke="darkgreen" stroke-width="5"/>
<ellipse cx="135" cy="50" rx="120" ry="30"
fill="palegoldenrod" stroke="brown" stroke-width="5"/>
<line x1="220" y1="285" x2="280" y2="15"
stroke="olivedrab" stroke-width="5"/>
<polyline fill="none" stroke="steelblue" stroke-
width="5" points="20,110 30,155 125,155 135,110 225,110
235,155"/>
<polygon fill="orange" stroke="firebrick" stroke-
width="5" stroke-linejoin="round" points="316,175
332,218 380,218 342,245 357,288 316,262 275,288 290,245
250,218 300,218"/>
- 36/141 -

Rys.3.4. Kod źródłowy obrazu SVG, przedstawionego na rysunku 3.3.
3.2.3. Wprowadzanie tekstu na rysunku SVG
W rekomendacji SVG duży nacisk położony został nie tylko na elementy
związane bezpośrednio z wstawianiem elementów graficznych na rysunkach.
Bardzo rozbudowane zostały również rozdziały poświęcone wykreślaniu
tekstu. Rozdział dziesiąty poświęcony został w całości metodom wstawiania
tekstu na rysunek, natomiast rozdział dwudziesty traktuje o możliwościach
zastosowania różnych czcionek oraz stylów do wykreślanego tekstu.
Do umieszczania tekstu na rysunkach SVG służy element <text>. Tekst,
który ma zostać wyświetlony na ekranie, powinien się znaleźć pomiędzy
znacznikiem otwierającym oraz zamykającym element <text>.
Element tekstowy traktowany jest w dokładnie identyczny sposób jak
wszystkie pozostałe elementy SVG. Konsekwencją tego faktu jest to, że
wszelkie transformacje współrzędnych (będzie o nich mowa w rozdziale 3.3),
nakładanie, maskowanie czy wypełnianie kolorami ma dokładnie takie samo
zastosowanie w odniesieniu do tekstu jak do podstawowych kształtów oraz
ścieżek.
Aby wstawić nowy obiekt tekstowy na rysunek należy w elemencie <text>
określić jego położenie za pomocą atrybutów x oraz y oznaczających jego
bezwzględne współrzędne. Atrybut fill definiuje kolor znaków. Wyboru
czcionki dokonuje się za pomocą atrybutu font-family, jej rozmiaru
natomiast poprzez wartość atrybutu font-size. Istnieje możliwość
dostosowywania właściwości czcionki (kolor, wyróżnienie, indeksowanie, itp.)
oraz tekstu (zawijanie wierszy, zaawansowane formatowanie, itp.) w obrębie
jednego ciągu znaków poprzez zastosowanie kilku elementów <tspan>,
przyjmujących identyczne argumenty, zawartych wewnątrz pojedynczego
- 37/141 -

elementu <text>. Za pomocą atrybutu text-anchor można określić
wyrównanie tekstu w odniesieniu do jego współrzędnych (wyrównanie do
lewej, do prawej strony lub wyśrodkowanie osiąga się odpowiednio
wartościami start, end oraz middle).
Do ustalenia właściwości czcionki służą między innymi atrybuty: font-style
pozwalający na wybór pomiędzy pismem normalnym, ukośnym oraz kursywą,
font-weight służący do określenia poziomu pogrubienia liter, font-
stretch umożliwiający wskazanie pożądanego ściśnięcia bądź rozrzedzenia
przestrzeni pomiędzy znakami.
Rys.3.5. Wykreślanie tekstu w grafice SVG. Na rysunku widoczny jest
fragment zaznaczony poprzez przeciągnięcie nad nim wskaźnika myszy.
- 38/141 -

Oprócz wspomnianych właściwości w stosunku do elementów <text> oraz
<tspan> można zastosować wiele różnorodnych efektów: rotację znaków,
zróżnicowane odstępy pomiędzy literami oraz słowami, podkreślanie oraz
przekreślanie tekstu, zmianę jego orientacji (co jest przydatne zwłaszcza w
przypadku stosowania niektórych języków azjatyckich), czy na przykład
umieszczanie tekstu na ścieżce, dzięki czemu można tworzyć fantazyjnie
wyglądające napisy.
Bardzo ważną cechą elementów tekstowych w SVG jest to, że z punktu
widzenia użytkownika, przeglądającego rysunek, są one traktowane nie jako
obiekty graficzne, lecz jako tekst. Oznacza to, że użytkownik musi mieć
możliwość zarówno zaznaczenia wybranego fragmentu tekstu, jak i jego
skopiowania do schowka systemowego (ang. clipboard).
Na rysunku 3.6 zaprezentowano kilka sposobów wstawiania tekstu oraz jego
formatowania na rysunku SVG. Efekt zastosowania przedstawionego na nim
kodu źródłowego można zobaczyć na rysunku 3.5. Warto zwrócić uwagę na
fragment tekstu wyróżniony za pomocą wskaźnika myszy – widzimy, że
przeglądarka „Opera” ma możliwość zaznaczania oraz kopiowania tekstu z
rysunku SVG, zalecaną w rekomendacji W3C.
<text x="5" y="30" font-family="Verdana" font-size="22"
fill="dodgerblue">As far as the laws of <tspan font-
weight="bold" fill="magenta">mathematics</tspan></text>
<text x="200" y="80" font-family="Verdana" font-
size="48" fill="navy" font-style="italic" text-
anchor="middle">refer to reality</text>
size="32" fill="maroon" text-decoration="underline"
text-anchor="end">they are not</text>
<text font-family="Verdana" font-size="64"
fill="purple"><tspan x="10 40 80 130 190 270 350"
y="185">certain</tspan></text>
<defs><path id="MyPath" d="M 30 290 S 50 200 120 200 S
180 280 250 280 S 390 240 390 240"/></defs>
<text font-family="Verdana" font-size="16"
- 39/141 -

fill="darkslategrey"><textPath xlink:href="#MyPath"> As
far as they are certain, they do not refer to
reality...</textPath></text>
3.2.4. Wypełnienia oraz kontury obiektów
Rozdział jedenasty specyfikacji SVG został poświęcony rysowaniu wypełnień
(ang. fill) oraz konturów (ang. stroke). Każdy element ścieżki, tekstu oraz
podstawowych kształtów, omówiony oddzielnie w trzech poprzednich
rozdziałach może być wypełniony (wypełnienie rozumiane jest tutaj jako
zamalowanie wnętrza obiektu) oraz obrysowany (co oznacza wykreślenie
konturu wokół obiektu). Obie te operacje, tzn. wypełnianie oraz
obrysowywanie, razem określane są ogólniejszym terminem rysowania (ang.
painting). W grafice SVG możemy rysować (tzn. wypełniać obszary oraz je
obrysowywać) za pomocą:
 pojedynczego koloru
 pojedynczego koloru z określoną przezroczystością
 gradientu (liniowego lub kołowego)
 wzoru (wektorowego lub innego rysunku, również sąsiadująco (ang.
tiled))
 innych obiektów zdefiniowanych poprzez rozszerzenia SVG
Atrybuty fill oraz stroke przyjmują ten sam typ wartości, którym może
być: słowo kluczowe none (które oznacza, że operacja rysowania nie jest
wykonywana), nazwa koloru (jedna z niemal 150 dozwolonych nazw,
zebranych w czwartym rozdziale rekomendacji, np. gold lub brown), wartość
koloru (zapisana w formacie #RRGGBB, np. #FFD700 lub #A52A2A) lub
odnośnik URI (ten sposób stosowany jest dla gradientów, wzorów oraz
- 40/141 -

obiektów rozszerzonych, np. jeśli w obrębie tego samego dokumentu
zdefiniowano gradient i oznaczono go identyfikatorem myGradient,
wówczas odwołujemy się do niego pisząc url(#myGradient)).
Dostępne są jeszcze dwie dodatkowe opcje definiowania sposobu wypełniania
elementów. Atrybut fill-rule decyduje o tym, które fragmenty obszaru
rysowania należy uznać za znajdujące się wewnątrz obiektu, a więc dla której
części elementu ma zostać narysowane wypełnienie (dla większości
standardowych obiektów nie ma on jednak większego znaczenia). O wiele
bardziej atrakcyjny z punktu widzenia użytkownika wydaje się być atrybut
fill-opacity. Określa on poziom przezroczystości wypełnienia z zakresu
od 0 (całkowita przezroczystość) do 1 (wypełnienie nieprzezroczyste).
W przypadku rysowania konturów dostępnych jest o wiele więcej opcji.
Wspomniany już atrybut stroke definiuje kolor rysowania. Atrubut stroke-
width pozwala na dobór grubości linii, którą wykonywany jest obrys. Mamy
możliwość dokonania wyboru, czy zakończenie linii ma być kwadratowe czy
może zaokrąglone, dobierając odpowiednio wartość atrubytu stroke-
linecap. Podobnie rzecz ma się z połączeniami linii, stanowiących krawędzi
figur lub ścieżek – można je łączyć ze sobą na trzy sposoby: ostry (ang.
miter), skośny (ang. bevel) oraz zaokrąglony (ang. round), przypisując
pożądany typ połączenia atrybutowi stroke-linejoin. Mamy również
możliwość wykreślania linii kreskowanych, kropkowanych oraz dowolnych ich
kombinacji poprzez ustawienie wartości atrybutu stroke-dasharray.
Podobnie jak w przypadku wypełnienia, tak również do konturu można
zaaplikować dowolny stopień przezroczystości. Do tego celu służy atrybut
stroke-opacity (domyślnie zarówno kontur jak i wypełnienie są całkowicie
nieprzezroczyste).
Specyfikacja dostarcza również możliwości zakańczania ścieżek oraz linii
- 41/141 -

symbolami strzałek. Aby z niej skorzystać należy użyć elementu <marker>.
3.2.5. Wypełnianie figur za pomocą gradientów i wzorów
Jedne z najefektowniejszych, a jednocześnie wymagających niewielkich
nakładów pracy ze strony twórcy, rezultatów zastosowania grafiki SVG można
osiągnąć, korzystając z gradientów oraz wzorów, opisanych szczegółowo w
trzynastym rozdziale specyfikacji. Już wcześniej wspominałem, że SVG
pozwala na wypełnianie kształtów jak i obrysowywanie ich konturów nie tylko
za pomocą pojedynczego koloru, ale również za pomocą gradientów i
wzorów. Przyjrzymy się teraz szerzej tym możliwościom.
Czym w ogóle jest gradient? W grafice SVG przez gradient rozumiane jest
płynne przejście pomiędzy dwoma kolorami. Standard definiuje dwa rodzaje
gradientów: liniowy (ang. linear gradient) oraz kołowy (ang. radial gradient),
określane odpowiednio za pomocą elementów <linearGradient> oraz
<radialGradient>. Po zdefiniowaniu gradientu w dokumencie, można się
do niego odwoływać poprzez atrybuty fill i stroke wybranego elementu,
aby wskazać chęć jego wypełnienia bądź narysowania konturu za pomocą
określonego gradientu.
Wśród najważniejszych atrybutów służących do definiowania gradientów
liniowych możemy wyróżnić: współrzędne x1, y1 oraz x2, y2 (współrzędne
te określają punkt początkowy oraz punkt końcowy gradientu, najczęściej
określane są w procentach, domyślnie przypisane są im następujące wartości:
x1="0%", y1="0%", x2="100%", y2="0%"), identyfikator id (unikalny
identyfikator, który można przypisać każdemu elementowi dokumentu SVG, a
zatem również gradientowi, umożliwiający późniejsze odwoływanie się do
niego poprzez ten identyfikator) i spreadMethod (pozwalający określić
zachowanie gradientu, kończącego się wewnątrz). Kolory, pomiędzy którymi
dokonywane jest przejście gradientowe, definiuje się wewnątrz elementu
- 42/141 -

<linearGradient> za pomocą co najmniej dwóch elementów podrzędnych
<stop>, w których określone zostają wartości dwóch kluczowych atrybutów:
stop-color odpowiadający pożądanemu kolorowi oraz offset (wyrażany
głównie w procentach) służący do określenia położenia tego koloru w
gradiencie.
W przypadku gradientu kołowego dostępne atrybuty różnią się nieznacznie,
ponieważ jego charakter jest trochę inny niż gradientu liniowego. Zamiast
współrzędnych definiujących punkt początkowy oraz punkt końcowy mamy
tutaj możliwość zdefiniowania współrzędnych największego możliwego okręgu
(cx, cy, r), który będzie wchodził w skład gradientu (gradient zostanie
wykreślony w ten sposób, że jego kolor określony dla atrybutu
offset="100%" w elemencie <stop> będzie odpowiadał właśnie temu
największemu okręgowi). Z kolei punkt środkowy, od którego gradient
„promieniuje” definiuje się za pomocą atrybutów fx i fy, które określają
środek okręgu (punkt ten odpowiada kolorowi określonemu w elemencie
<stop> dla atrybutu offset="0%").
W grafice SVG efektownie rysować można nie tylko za pomocą gradientów,
ale również za pomocą samodzielnie zdefiniowanych wzorów (ang. patterns).
Poprzez wzór możemy rozumieć niezależny rysunek SVG, który można później
dowolnie wykorzystać. Przygotowanie wymyślnego wzoru, a następnie
wypełnienie nim wnętrza jakiegoś elementu może nieraz dać zadziwiający
efekt.
Do definiowania wzorów służy element <pattern>. Odwoływać się można
do niego w atrybutach fill i stroke dokładnie w taki sam sposób jak do
gradientów (patrz przykład na rysunku 3.8). Podstawowymi atrybutami
elementu <pattern> są: współrzędne x i y, szerokość width oraz
wysokość height (parametry te decydują, w jaki sposób zostaną
- 43/141 -

rozmieszczone poszczególne kafelki (ang. tiles) wzoru), a także
patternUnits (definiujący system współrzędnych dla wymienionych
atrybutów) i patternContentUnits (definiujący system współrzędnych dla
wszystkich elementów składających się na wzór). Wewnątrz elementu
<pattern> możemy zdefiniować nasz wzór dokładnie w taki sam sposób,
jakbyśmy definiowali niezależny rysunek SVG. Wzór może się składać ze
ścieżek, prostokątów, okręgów oraz wszelkich innych elementów SVG.
Jedynym ograniczeniem jest tu tylko inwencja twórcy.
Na rysunku 3.7 został przedstawiony obraz, na którym zamieszczono kilka
podstawowych elementów SVG, do których wypełnienia oraz obrysowania
zastosowano różnorodne techniki i właściwości opisane powyżej, włączając w
to gradienty, wzory, przezroczystości, zdefiniowane przez użytkownika
kreskowanie linii i inne. Kod źródłowy, który posłużył do wygenerowania tej
grafiki, został przedstawiony na rysunku 3.8.
- 44/141 -

Rys.3.7. Rysunek SVG prezentujący zastosowanie różnych technik
wypełniania oraz obrysowywania kształtów, między innymi za pomocą
gradientów i wzorów.
- 45/141 -

<defs>
<linearGradient id="MyGradient1" x1="0%" y1="0%"
x2="100%" y2="0%"><stop offset="0%"
stop-color="#00FF00"/><stop offset="100%"
stop-color="#0000FF"/></linearGradient>
<radialGradient id="MyGradient2"
gradientUnits="userSpaceOnUse" cx="190" cy="120" r="80"
fx="190" fy="120"><stop offset="0%"
stop-color="yellow"/><stop offset="100%"
stop-color="red"/></radialGradient>
<linearGradient id="MyGradient3" x1="0%" y1="0%"
x2="100%" y2="0%"><stop offset="0%"
stop-color="dodgerblue"/><stop offset="100%"
stop-color="purple"/></linearGradient>
<pattern id="MyPattern1" patternUnits="userSpaceOnUse"
x="0" y="0" width="10" height="10" viewBox="0 0 10
10"><path d="M 0 4 L 10 0 L 6 10 z" fill="red"
stroke="black"/><path d="M 0 4 L 6 10 L 0 10 z"
fill="yellow" stroke="black"/><path d="M 10 0 L 6 10 L
10 10 z" fill="lightgreen" stroke="black"/></pattern>
</defs>
<path d="M -50 230 Q 100 10 200 170 T 480 30"
fill="none" stroke="gold" stroke-width="120"
stroke-linecap="square" stroke-opacity="0.3"/>
<text x="50" y="275" font-family="Verdana"
font-size="112" font-weight="bold"
fill="url(#MyGradient1)" stroke-dasharray="9,4"
stroke="black" stroke-width="2">SVG</text>
<path d="M 20 270 Q 40 120 150 50 T 320 190 T 380 30"
fill="none" stroke="url(#MyGradient3)" stroke-width="15"
stroke-linecap="square"/>
fill="url(#MyPattern1)" stroke="brown" stroke-width="5"
fill-opacity="0.2" stroke-dasharray="2,1"
stroke-opacity="0.2"/>
fill="url(#MyPattern1)" stroke="brown" stroke-width="5"
fill-opacity="0.8" stroke-dasharray="2,1"/>
<circle cx="190" cy="100" r="40" stroke-width="5"
fill="url(#MyGradient2)" stroke="darkgreen"/>
fill="url(#MyGradient2)" stroke="darkred"/>
fill="url(#MyGradient2)" stroke="darkblue"/>
- 46/141 -

3.2.6. Podsumowanie najważniejszych możliwości
W rozdziale tym starałem się przedstawić najważniejsze z możliwości
oferowanych przez standard SVG. Znalazło się wśród nich wykreślanie
podstawowych kształtów, wyświetlanie tekstu na rysunku, wypełnianie oraz
ograniczanie obszarów, zarządzanie kolorami oraz stosowanie gradientów i
wzorów. Każde z zagadnień zostało poparte praktycznym przykładem, który
składał się z kodu źródłowego oraz podglądu wygenerowanego za
pośrednictwem przeglądarki internetowej obrazu. W następnym rozdziale
swojej pracy przyjrzę się bliżej bardziej zaawansowanym technikom SVG, nie
pomijając wyjaśnienia tak istotnych zagadnień jak filtry, interaktywność
elementów, hiperłącza, skrypty oraz animacje.
3.3. Zaawansowane właściwości SVG
Wśród zaawansowanych właściwości SVG, które są przedmiotem szczegółowej
analizy w niniejszym rozdziale, można odnaleźć kwestie związane z
maskowaniem, nakładaniem czy przycinaniem fragmentów rysunku,
zastosowaniem różnorodnych efektów filtrujących, opcjami interaktywności
poszczególnych elementów, możliwościami zastosowania hiperłączy w
odniesieniu do konkretnych składników grafiki, elementami umożliwiającymi
realizowanie animowanych sekwencji na rysunkach, a także sposobami
wykorzystania języków skryptowych do realizacji zadań związanych z obsługą
zdarzeń.
3.3.1. Maski oraz ścieżki maskujące
Zagadnienia maskowania są przedmiotem czternastego rozdziału
rekomendacji W3C. SVG oferuje użytkownikowi dwa podstawowe elementy
maskujące: ścieżki maskujące (ang. clipping paths) oraz maski (ang. masks).
Ścieżki maskujące składają się z dowolnej kombinacji podstawowych
- 47/141 -

elementów SVG (ścieżek, kształtów, tekstu), które pełnią rolę ramki (ang.
outline) dla maski w ten sposób, że wszystko co znajduje się wewnątrz ramki
zostaje pokazane, natomiast reszta (wszystko co znajduje się na zewnątrz
ramki) nie. Z kolei maski są obiektami mogącymi zawierać dowolne elementy
graficzne, które zostają użyte jako półprzezroczysta maska, umożliwiająca
przede wszystkim komponowanie obiektów pierwszoplanowych do aktualnego
tła. Najważniejsze rozróżnienie pomiędzy ścieżkami maskującymi oraz
maskami polega na tym, że te pierwsze mogą znajdować się tylko w jednym z
dwóch stanów: albo całkowitej przezroczystości, albo całkowitej
nieprzezroczystości. Maski natomiast zawierają obraz, w którym każdy
pojedynczy piksel może być determinowany przez inny stopień
przezroczystości.
Ścieżkę maskującą definiuje się za pomocą elementu <clipPath>. Jego
elementami potomnymi mogą być tylko następujące obiekty: ścieżki <path>,
napisy <text>, podstawowe kształty (np. <rect>), a także elementy
<use>, które mogą odwoływać się jedynie do tych trzech rodzajów
wymienionych obiektów. Każdy element graficzny SVG może odwoływać się
do ścieżki maskującej poprzez atrybut clip-path. Wartością tego atrybutu
może być none (brak maskowania) lub odwołanie URI do obiektu w ramach
tego samego dokumentu SVG, który będzie pełnił rolę ścieżki maskującej.
Każdy obiekt graficzny w SVG może zostać użyty jako maska do
wkomponowania innego obiektu w tło rysunku. Do definiowania maski służy
element <mask>. Odwołujemy się do niej za pomocą tak samo nazwanego
atrybutu mask. Przykłady zastosowania obu metod maskowania można
zobaczyć na rysunku 3.9. Przedstawiono na nim między innymi napis
maskowany za pomocą gradientu. Na rysunku jako pierwszy rysowany jest
jasnozielony prostokąt. Następnie nanoszony jest na niego napis SVG,
zawierający odwołanie do wcześniej zdefiniowanej maski. Tekst zostaje
- 48/141 -

wypisany w kolorze ciemnozielonym (widać to dobrze w kodzie źródłowym po
wartości atrybutu wypełnienia: fill="darkgreen"), ale zostaje do niego
zaaplikowana maska zawierająca definicję gradientu przezroczystości (atrybut
odwołania do maski w kodzie źródłowym: mask="url(#Mask1)").
Rys.3.9. Rysunek SVG prezentujący zastosowanie różnych technik
maskowania (dla ułatwienia rozpoznania ścieżki maskującej, narysowane
zostały zarówno kontury tej ścieżki, jak i wypełniony został oryginalny kształt
nie zamaskowanego obiektu) oraz dwóch przykładowych filtrów feTurbulence
i feComponentTransfer.
Dzięki temu lewa strona napisu jest prawie niewidoczna (całkowicie zlewa się
z kolorem tła, ponieważ maska jest w tym miejscu nieprzezroczysta),
natomiast prawa strona posiada dokładnie taki kolor jak zdefiniowano w
elemencie <text> (jest dobrze widoczna, ponieważ w tym miejscu maska
- 49/141 -

jest całkowicie przezroczysta). Kod źródłowy tego dokumentu SVG został
zamieszczony na rysunku 3.10.
<defs>
<clipPath id="MyClip1"><path d="M 20 20 L 250 50 L 180
160 Z" clip-rule="evenodd"/></clipPath>
<linearGradient id="Gradient1"><stop offset="10%" stop-
color="white" stop-opacity="0"/><stop offset="90%" stop-
color="white" stop-opacity="1"/></linearGradient>
<mask id="Mask1"><rect x="160" y="180" width="220"
height="100" fill="url(#Gradient1)"/></mask>
<filter id="Turbulence1"><feTurbulence
type="turbulence" baseFrequency="0.05"
numOctaves="5"/></filter>
<filter
id="ComponentTransfer1"><feComponentTransfer><feFuncR
type="linear" slope=".25" intercept=".25"/><feFuncG
type="linear" slope=".50" intercept=".25"/><feFuncB
type="linear" slope=".75"
intercept=".50"/></feComponentTransfer></filter>
</defs>
<rect clip-path="url(#MyClip1)" x="20" y="30"
width="220" height="100" fill="goldenrod"/>
<rect x="160" y="180" width="220" height="100"
fill="lightgreen"/>
weight="bold" font-size="96" text-anchor="middle"
fill="darkgreen" mask="url(#Mask1)">SVG</text>
filter="url(#Turbulence1)"/>
fill="url(#Gradient1)"
filter="url(#ComponentTransfer1)"/>
3.3.2. Efekty graficzne
Kolejną bardzo cenną właściwością grafiki SVG jest możliwość zastosowania
różnorodnych filtrów, pozwalających na generowanie niezwykle wyszukanych
efektów. Filtry oferowane przez SVG są zwykle dostępne w zaawansowanych
programach graficznych, co czyni je jednymi z najpotężniejszych narzędzi
- 50/141 -

wchodzących w skład tego standardu. Rozdział piętnasty specyfikacji,
poświęcony właśnie filtrom, jest bardzo rozbudowany i szczegółowo omawia
zastosowanie każdego z dostępnych efektów, zawiera również kody źródłowe
prezentujące przykładowe ich wykorzystanie.
Standardowo działanie filtru polega na wykonaniu określonych operacji na
źródle danych i wytworzeniu na ich podstawie nowych danych wyjściowych,
które stanowią ich modyfikację. Dokładnie tak samo funkcjonują filtry w SVG,
przy czym danymi źródłowymi są tu dane grafiki (od pojedynczego elementu
aż po grupy obiektów), natomiast wyjściem filtru jest obraz, jaki otrzymuje na
ekranie swojego monitora użytkownik końcowy.
Filtry definiowane są za pomocą elementu <filter>. Aby dany efekt został
zastosowany do wybranego obiektu, należy ustawić wartość jego atrybutu
filter tak, aby wskazywała na identyfikator zdefiniowanego wcześniej
filtru.
Każdy filtr zawiera zbiór prymitywów (ang. filter primitives), z których każdy
może być jednym z jego elementów podrzędnych. Każdy prymityw wykonuje
na danych wejściowych jedną fundamentalną operację graficzną, np.
rozmycie (ang. blur) lub efekt oświetlenia (ang. lighting effect), w wyniku
której uzyskuje się wyjściowe dane graficzne.
Dwa przykłady zastosowania filtrów zostały przedstawione na rysunku 3.9,
natomiast kod źródłowy prezentujący sposób ich definiowania został
zamieszczony na rysunku 3.10.
Szczegółowa analiza wszystkich prymitywów wykracza poza ramy tej pracy.
Niemniej jednak chciałbym pokrótce wymienić ich kompletną listę wraz z
krótka charakterystyką uzyskiwanych w ich rezultacie efektów, aby odnieść
się do postawionej wcześniej tezy, że filtry są jednymi z najpotężniejszych
narzędzi oferowanych przez standard SVG. Oto pełna lista opisanych w
rekomendacji prymitywów filtrów:
- 51/141 -

 feBlend: prymityw nakłada dwa obiekty na siebie, używając jednego z
popularnych trybów mieszania obrazów (ang. image blending mode)
 feColorMatrix: prymityw aplikuje matrycę transformacji do każdego
piksela wejściowej grafiki, w rezultacie której otrzymujemy nowy zbiór
kolorów w zapisie RGBA
 feComponentTransfer: prymityw wykonuje odwzorowanie danych
składowych koloru dla każdego piksela, umożliwiając operacje takie jak
korekta jasności, regulacja kontrastu, balans kolorów czy progowanie
(ang. thresholding)
 feComposite: prymityw dokonuje połączenia dwóch obrazów na
poziomie pojedynczych pikseli
 feConvolveMatrix: prymityw zastosowania matrycy splotu łączy ze
sobą sąsiednie piksele, aby wytworzyć obraz wynikowy; poprzez splot
można uzyskać wiele interesujących efektów graficznych takich jak
rozmycie, detekcja krawędzi (ang. edge detection), wyostrzanie (ang.
sharpening), gofrowanie (ang. embossing) czy ukosowanie (ang.
beveling)
 feDiffuseLighting: prymityw oświetla rysunek wykorzystując kanał
przezroczystości (ang. alpha channel) do mapowania wypukłości (ang.
bump map); obliczenia są zgodne ze standardem odbicia światła w
modelu oświetlenia Phonga; w rezultacie działania filtru uzyskiwany jest
obraz nieprzezroczysty
 feDisplacementMap: prymityw wykorzystuje wartości pikseli z
rysunku podanego jako wartość atrybutu in2 do przestrzennego
przesunięcia (ang. spatial displacement) obrazu z in
 feFlood: prymityw tworzy prostokąt wypełniony kolorem podanym w
- 52/141 -

atrybucie flood-color oraz przezroczystością podaną w atrybucie
flood-opacity
 feGaussianBlur: prymityw realizuje rozmycie gaussowskie (ang.
Gaussian blur)
 feImage: prymityw odwołuje się do zewnętrznej grafiki (którą może być
obraz rastrowy lub rysunek SVG)
 feMerge: prymityw nakłada na siebie kolejne warstwy rysunków
(„jedna nad drugą”) podanych jako jego argumenty wejściowe
 feMergeNode: prymityw nakładający nową warstwę rysunku
 feMorphology: prymityw wykonuje „pogrubianie” (ang. fattening) lub
„odchudzanie” (ang. thinning) rysunku; jest przydatny w szczególności w
odniesieniu do kanału przezroczystości
 feOffset: prymityw przesuwa (ang. offset) wejściowy rysunek
względem jego bieżącej pozycji w przestrzeni obrazu (ang. image space)
o określony wektor; jest on szczególnie przydatny do generowania
efektów takich jak rzucanie cienia (ang. drop shadow)
 feSpecularLighting: prymityw oświetla rysunek wykorzystując kanał
przezroczystości do mapowania wypukłości; obliczenia są zgodne ze
standardem odbicia światła w modelu oświetlenia Phonga; w rezultacie
działania filtru uzyskiwany jest obraz przezroczysty
 feTile: prymityw wypełnia wskazany prostokąt powtarzalnym wzorem,
którym jest rysunek, podany jako parametr wejściowy filtru
 feTurbulence: prymityw tworzy rysunek na podstawie funkcji
turbulencji Perlina, umożliwiającej generowanie sztucznych tekstur
przypominających wyglądem chmury, marmur, itp.
 feDistantLight: prymityw definiujący kierunkowe źródło światła
- 53/141 -

 fePointLight: prymityw definiujący punktowe źródło światła
 feSpotLight: prymityw definiujący reflektorowe źródło światła
 feFuncR: funkcja przenoszenia (ang. transfer function) dla czerwonego
komponentu wejściowej grafiki
 feFuncG: funkcja przenoszenia dla zielonego komponentu wejściowej
grafiki
 feFuncB: funkcja przenoszenia dla niebieskiego komponentu wejściowej
grafiki
 feFuncA: funkcja przenoszenia dla komponentu przezroczystości (ang.
alpha component) wejściowej grafiki
Na podstawie powyższej listy jesteśmy w stanie śmiało stwierdzić, że
rzeczywiście za pomocą filtrów możemy definiować niezwykle wyrafinowane
efekty graficzne, dzięki którym nasze obrazy nie muszą w niczym ustępować
wymyślnym rysunkom stworzonym w zaawansowanych edytorach
graficznych.
3.3.3. Interaktywność
Elementy SVG mogą być interaktywne, tzn. mogą reagować na zdarzenia
inicjowane przez użytkownika, dzięki następującym właściwościom:
 inicjowane przez użytkownika akcje, takie jak na przykład wciśnięcie
lewego przycisku myszy, mogą spowodować rozpoczęcie wykonywania
animacji lub skryptów
 użytkownik ma możliwość inicjować hiperłącza do innych stron
internetowych poprzez takie działania jak kliknięcie lewego przycisku
myszy nad konkretnym elementem grafiki
 w wielu przypadkach (zależy to od możliwości przeglądarki internetowej
- 54/141 -

jak i od ustawień atrybutu zoomAndPan w elemencie głównym <svg>)
użytkownik jest w stanie powiększać oraz przesuwać obraz SVG
 ruchy myszą mogą powodować zmianę wyglądu wskaźnika (ang.
pointing device)
Rozdział szesnasty rekomendacji W3C szczegółowo opisuje informacje na
temat dostępnych zdarzeń (łącznie z warunkami definiowanymi za pomocą
atrybutu pointer-events, które muszą być spełnione, aby dane zdarzenie
mogło zostać wywołane), sposobu sprawdzenia czy dany dokument może być
powiększany oraz przesuwany (ang. panned), jak również sposobu wyboru
bieżącego wskaźnika myszy (wraz z listą dostępnych wartości
przekazywanych poprzez atrybut cursor).
3.3.4. Hiperłącza
Do definiowania każdego rodzaju łącz SVG korzysta ze standardu XLink. W
rozdziale siedemnastym specyfikacji zostały omówione łącza zewnętrzne,
które tworzy się za pomocą podobnego jak w języku HTML elementu <a>.
Służy on do wskazywania innych elementów, które będą stanowić hiperłącze.
Przykładowy kod łącza do zewnętrznego zasobu sieciowego przedstawiono na
rysunku 3.11. W tym przykładzie wykreślony zostaje prostokąt. Po kliknięciu
na nim użytkownik przechodzi na internetową stronę wyszukiwarki Google.
Hiperłącze może jednak wskazywać na dowolny inny zasób sieciowy, np.
rysunek, film, program, inny dokument SVG, stronę HTML i inne.
<a xlink:href="http://www.google.pl">
<rect x="0" y="0" width="10" height="10" fill="green"/>
</a>
Rys.3.11. Kod źródłowy łącza do zewnętrznego zasobu sieciowego.
- 55/141 -

3.3.5. Możliwości zastosowania języków skryptowych
W rozdziale osiemnastym rekomendacji opisano reguły pisania skryptów oraz
zestawiono atrybuty dostępnych zdarzeń. Domyślnym językiem skryptowym
dla dokumentów SVG jest ECMAScript. Zmiany języka można dokonać
redefiniując atrybut contentScriptType w elemencie głównym <svg>
(domyślną wartością tego atrybutu jest text/ecmascript). Oczywiście
można również określić język skryptowy indywidualnie dla każdego elementu
<script>, ustawiając jego atrybutu type.

Rys.3.12. Rysunek SVG prezentujący wykorzystanie skryptu ECMAScript do
tworzenia interaktywnych obrazów (po lewej stronie przedstawiono
oryginalny rysunek, natomiast po prawej obraz zmodyfikowany po kliknięciu
przyciskiem myszy na prostokącie).
Element <script> w SVG odpowiada takiemu samemu elementowi z języka
- 56/141 -

HTML. Każda funkcja zdefiniowana wewnątrz tego elementu ma zasięg
globalny w odniesieniu do całego dokumentu SVG. Przykład wykorzystania
skryptu ECMAScript zamieszczono na rysunku 3.12. Przedstawia on prostokąt,
na który należy kliknąć przyciskiem myszy, aby zmienić jego rozmiar oraz
kolor. Na rysunku zaprezentowano obie fazy działania skryptu: przed oraz po
kliknięciu. Kod źródłowy można zobaczyć na rysunku 3.13. W skrypcie
zdefiniowano funkcję onRectClick, która zostaje wywołana przez zdarzenie
onclick, skojarzone z elementem <rect>. To właśnie w niej dokonują się
modyfikacje atrybutów prostokąta. Dodatkowo przy przesuwaniu myszy nad
prostokątem, wskaźnik zmienia wygląd ze strzałki na dłoń z wysuniętym
palcem wskazującym (ustawienie atrybutu cursor="pointer"), co
sugeruje użytkownikowi możliwość wywołania jakiejś akcji po kliknięciu na
obiekt.
<script type="text/ecmascript"><![CDATA[
function onRectClick( evt ) {
var myRect = evt.target;
if( myRect.getAttribute("x") == 70 ) {
myRect.setAttribute( "x", 30 );
myRect.setAttribute( "width", 340 );
myRect.setAttribute( "y", 150 );
myRect.setAttribute( "height", 250 );
myRect.setAttribute( "fill", "purple" );
} else {
myRect.setAttribute( "x", 70 );
myRect.setAttribute( "width", 260 );
myRect.setAttribute( "y", 50 );
myRect.setAttribute( "height", 450 );
myRect.setAttribute( "fill", "green" );
}
}
]]></script>
fill="darkgreen" onclick="onRectClick(evt)"
cursor="pointer"/>
- 57/141 -

3.3.6. Animacje
Na zakończenie szczegółowej analizy możliwości grafiki SVG przedstawię
najistotniejsze informacje dotyczące animacji, której poświęcony został w
całości dziewiętnasty rozdział rekomendacji W3C. Specyfikacja definiuje
animację w SVG jako dynamiczną zmianę grafiki wektorowej w czasie.
Animację można zrealizować na jeden z trzech poniższych sposobów:
 korzystając z przeznaczonych do tego elementów animacji, np.
<animate>
Używając umiejętnie elementów animacji można tworzyć ruchome
ścieżki (ang. motion paths), efekty rozjaśniające i zaciemniające obraz
oraz obiekty, które rosną, kurczą się, obracają lub zmieniają kolor.
 korzystając z obiektowego modelu dokumentu SVG DOM, np. w
skryptach
Każdy atrybut oraz każdy styl dokumentu SVG jest dostępny w
skryptach. SVG posiada dodatkowe interfejsy DOM, umożliwiające
efektywne tworzenie animacji za pomocą skryptów. Dzięki nim można
uzyskać praktycznie każdy możliwy rodzaj animacji.
 SVG został zaprojektowany w taki sposób, aby umożliwić przyszłym
wersjom języka SMIL (Synchronized Multimedia Integration Language
– język opisu prezentacji multimedialnych korzystający z techniki XML)
wykorzystanie obrazów SVG jako komponentów multimedialnych.
SVG oferuje użytkownikowi cztery elementy animacji opisane w
specyfikacji SMIL: <animate> (modyfikuje wartości atrybutów oraz
właściwości w określonym czasie), <set> (synonim elementu
<animate>, wygodny w sytuacjach, gdy opisujemy animację poprzez
zmianę wartości atrybutów nienumerycznych), <animateMotion>
(przesuwa element wzdłuż ruchomej ścieżki), <animateColor>
- 58/141 -

SVG

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

En vedette

En vedette (18)

Similaire à SVG

Similaire à SVG (20)

SVG