andrzej jurzec praca magisterska

86 Pages·2009·0.78 MB·Polish

INSTYTUT INśYNIERII I GOSPODARKI WODNEJ
POLITECHNIKA KRAKOWSKA im. TADEUSZA KOŚCIUSZKI
Andrzej Jurzec
WYKORZYSTANIE FORMATU SVG
W SYSTEMACH INFORMACJI PRZESTRZENNEJ
praca magisterska
studia dzienne
kierunek studiów: informatyka
specjalność: informatyka stosowana w inŜynierii środowiska

promotor: dr inŜ. Robert Szczepanek
nr pracy:

KRAKÓW 2009

ul. Warszawska 24, 31-155 Kraków tel/fax [phone] e-mail: [email protected] internet: www.iigw.pl
Składam serdeczne podziękowania mojej żonie Ani.
2
Spis Treści
Wstęp.....................................................................................................................................6
1. Wprowadzenie do SVG.....................................................................................................7
1.1. Grafika rastrowa.............................................................................................................7
1.2. Grafika wektorowa.....................................................................................................8
1.3. XML...........................................................................................................................9
1.3.1. Definicja XML....................................................................................................9
1.3.2. Pochodzenie XML.............................................................................................11
1.3.3. Struktura dokumentu.........................................................................................12
1.3.3.1. Prolog.........................................................................................................12
1.3.3.2. Elementy.....................................................................................................13
1.3.3.3. Atrybuty......................................................................................................13
1.3.3.4. Komentarze.................................................................................................13
1.4. SVG..........................................................................................................................14
1.4.1. Historia SVG.....................................................................................................14
1.4.2. SVG skompresowany – SVGZ..........................................................................15
2. Specyfikacja SVG...........................................................................................................16
2.1. Wprowadzenie..........................................................................................................16
2.1.1. Typy danych użyte w opisie specyfikacji..........................................................16
2.1.2. Jednostki............................................................................................................17
2.2. Struktura dokumentu................................................................................................18
2.2.1. Nagłówek dokumentu........................................................................................18
2.2.2. Element svg.......................................................................................................18
2.2.3. Grupowanie obiektów – element g....................................................................19
2.2.4. Tworzenie szablonów – element defs i symbol.................................................19
2.2.5. Wstawianie metadanych – elementy desc i title................................................20
2.2.6. Element use.......................................................................................................20
2.3. Układy współrzędnych, widoki i transformacje.......................................................21
2.3.1. Układy współrzędnych......................................................................................21
2.3.2. Widoki...............................................................................................................22
2.3.3. Transformacje....................................................................................................23
2.3.3.1. Macierz przekształcenia.............................................................................23
2.3.3.2. Przesunięcie................................................................................................24
3
2.3.3.3. Skalowanie.................................................................................................25
2.3.3.4. Obrót...........................................................................................................25
2.3.3.5. Przekrzywienia...........................................................................................26
2.4. Ścieżki......................................................................................................................27
2.4.1. Atrybuty elementu path.....................................................................................27
2.4.1.1. Otwarcie ścieżki.........................................................................................28
2.4.1.2. Zamknięcie ścieżki.....................................................................................28
2.4.1.3. Linie proste.................................................................................................28
2.4.1.4. Krzywe Bézier'a trzeciego stopnia.............................................................29
2.4.1.5. Krzywe Bézier'a drugiego stopnia..............................................................31
2.4.1.6. Wycinek koła..............................................................................................32
2.5. Figury podstawowe..................................................................................................33
2.5.1. Prostokąt............................................................................................................34
2.5.2. Okrąg.................................................................................................................35
2.5.3. Elipsa.................................................................................................................36
2.5.4. Linia...................................................................................................................37
2.5.5. Polilinia..............................................................................................................38
2.5.6. Wielokąt............................................................................................................39
2.6. Tekst.........................................................................................................................40
2.6.1. Element text.......................................................................................................40
2.6.2. Element tspan....................................................................................................41
2.6.3. Element tref.......................................................................................................43
2.6.4. Element textPath................................................................................................44
2.7. Rysowanie i wypełnianie..........................................................................................45
2.7.1. Wypełnianie.......................................................................................................46
2.7.1.1. Właściwość fill...........................................................................................46
2.7.1.2. Właściwość fill-rule....................................................................................46
2.7.1.3. Właściwość fill-opacity..............................................................................46
2.7.2. Obrysowywanie.................................................................................................47
2.7.2.1. Właściwość stroke......................................................................................47
2.7.2.2. Właściwość stroke-width............................................................................47
2.7.2.3. Właściwość stroke-linecap.........................................................................47
2.7.2.4. Właściwość stroke-linejoin.........................................................................48
2.7.2.5. Właściwość stroke-miterlimit.....................................................................48
4
2.7.2.6. Właściwość stroke-dasharray.....................................................................49
2.7.2.7. Właściwość stroke-dashoffset....................................................................49
2.7.2.8. Właściwość stroke-opacity.........................................................................49
2.7.3. Znaczniki...........................................................................................................50
2.7.3.1. Wprowadzenie............................................................................................50
2.7.3.2. Element marker...........................................................................................51
2.8. Gradienty i wzorce....................................................................................................52
2.8.1. Gradienty...........................................................................................................53
2.8.1.1. Wprowadzenie............................................................................................53
2.8.1.2. Gradienty liniowe.......................................................................................53
2.8.1.3 Gradient kołowy..........................................................................................54
2.8.1.4. Przejścia kolorów w gradientach................................................................56
2.8.2. Wzorce...............................................................................................................56
2.9. Wycinanie ścieżek i nakładanie masek....................................................................58
2.9.1 Ścieżki wycinające.............................................................................................58
2.9.2. Maski.................................................................................................................60
3. Wykorzystanie SVG........................................................................................................63
3.1. Przeglądarki..............................................................................................................63
3.2. Narzędzia..................................................................................................................64
3.2.1. Inkscape.............................................................................................................64
3.2.2. GeoTools...........................................................................................................66
3.2.3. Batik ..................................................................................................................67
3.3. Aplikacje typu serwer...............................................................................................68
3.3.1. MapServer.........................................................................................................68
3.3.2. GeoServer..........................................................................................................72
3.3.3. Google Maps .....................................................................................................74
3.4. Aplikacje typu desktop.............................................................................................76
3.4.1. gvSIG.................................................................................................................76
3.4.2. Quantum Gis......................................................................................................79
Podsumowanie i wnioski.....................................................................................................81
Bibliografia..........................................................................................................................83
Spis listingów......................................................................................................................84
Spis rysunków.....................................................................................................................85

5
Wstęp

Wykorzystanie grafiki wektorowej jest nieodzowne w pracach
inżynieryjno–projektowych. Format grafiki wektorowej niesie ze sobą liczne korzyści, ale
też problemy.
O ile w przypadku grafiki rastrowej istnieje wiele formatów (BMP, JPEG, GIF),
które potrafią obsłużyć wszystkie programy zajmujące się wyświetlaniem lub edycją tejże
grafiki, tak w przypadku grafiki wektorowej takiego uniwersalnego formatu, który by
zdobył szeroką popularność, nie ma. Wynika to poniekąd z faktu, że grafika wektorowa
jest skomplikowana, trudna do opisania i nie ma sposobu jej zapisu, który można by było
uznać za najlepszy. Z kolei firmy zajmujące się produkcją oprogramowania wolą mieć
swój format zapisu, który jest przez nich pilnie strzeżony, co wymusza na klientach
korzystanie z produktów danej firmy.
Celem mojej pracy jest przybliżenie formatu grafiki wektorowej SVG (Scalable
Vector Graphics). Pokazanie, że posiada on możliwości, by stać się uniwersalnym
formatem grafiki wektorowej, niezależnym od systemu operacyjnego ani od platformy
sprzętowej.
W rozdziale pierwszym przedstawiam informacje wstępne dotyczące grafiki
rastrowej i wektorowej, języka XML, na którym zbudowany jest format SVG, oraz
informacje dotyczące samego formatu SVG.
W rozdziale drugim przybliżam najważniejszą część specyfikacji SVG, co pozwala
poznać szerokie możliwości tego formatu.
Natomiast w rozdziale trzecim zamieściłem przykłady systemów informacji
przestrzennej, w których jest używany format SVG, oraz programów, które nie są
związane z systemami GIS, jednak dzięki nim można edytować lub wyświetlać pliki
zapisane w formacie SVG.
6
1. Wprowadzenie do SVG
1.1. Grafika rastrowa

Obraz grafiki rastrowej jest plikiem reprezentującym prostokątną siatkę pikseli.
Kolor każdego piksela jest definiowany osobno. Jakość obrazka rastrowego jest określana
przez całkowitą liczbę pikseli (wielkość obrazu) oraz ilość informacji przechowywanych
w każdym pikselu (głębia koloru). Najczęściej spotykane głębie koloru to1:
(cid:1) 1-bit – 2 kolory;
(cid:1) 8-bit – umożliwia wyświetlenie 28, czyli 256 kolorów. Zielony i czerwony
kodowane są na 3 bitach każdy, a niebieski na pozostałych dwóch.
(cid:1) 16-bit High Color – umożliwia wyświetlenie 216, czyli 65536 kolorów. Czerwony
i niebieski kodowane są na 5 bitach, co daje po 32 odcienie każdego z nich. Zielony
kodowany jest na 6 bitach, co daje 64 możliwe odcienie. Zielony kodowany jest na
1 bicie więcej, ponieważ oko ludzkie rozpoznaje więcej odcieni koloru zielonego;
(cid:1) 24-bit True Color – umożliwia wyświetlenie 224, czyli 16777216 kolorów. Koduje
każdy z kolorów RGB na 8 bitach, co daje 256 odcieni każdego koloru;
(cid:1) > 24-bit – liczba kolorów jest taka sama jak w zapisie 24 bit, przy czym dodatkowe
bity wykorzystywane są na dane niedotyczące koloru takie jak: przezroczystość
alfa, odległość "z", chropowatość, czy inne informacje ułatwiające przekształcenia
obrazu i wyeliminowanie niepożądanych skutków tych przekształceń.

Ponieważ obrazy rastrowe zajmują stosunkowo dużo miejsca (obraz o rozmiarze
800x600 pikseli o głębi koloru 24bit zajmuje prawie 1,4 MB), często stosuje się technikę
kompresji danych celem zmniejszenia wielkości zajmowanego miejsca. Niektóre techniki
zmieniają (zmniejszają, usuwają) pewne informacje, aby uzyskać mniejszy plik. Niestety

1 http://en.wikipedia.org/wiki/Color_depth
7
nie są to bezstratne metody kompresji. Przykładami takich kompresji są JPEG, GIF
(obcinanie do głębi 8bit).

Zalety grafiki rastrowej:
(cid:1) dobrze oddaje półcienie;
(cid:1) łagodne przejścia między kolorami;
(cid:1) subtelne cieniowanie obrazów ciągłotonowych;
(cid:1) mnogość narzędzi do wyświetlania i edycji;
(cid:1) popularne formaty zapisu.

Wady grafiki rastrowej:
(cid:1) skalowanie obrazu powoduje utratę jego jakości;
(cid:1) źle wygląda przy dużych powiększeniach;
(cid:1) stosunkowo duże rozmiary.

Zastosowanie grafiki rastrowej:
(cid:1) zapisywanie zdjęć i realistycznych obrazów – rysunków, grafik;
(cid:1) efekt końcowy skanowania obrazów analogowych;
(cid:1) przechowywanie zawartości okna ekranowego aplikacji;
(cid:1) tworzenie obrazów o skomplikowanych kolorach, przejściach tonalnych,
gradacjach barw itp.;
(cid:1) obróbka zdjęć np. retuszowanie;
(cid:1) tworzenie grafiki ekranowej dla aplikacji multimedialnych;

1.2. Grafika wektorowa
„Obraz wektorowy opisany jest za pomocą figur geometrycznych, tzw. obiektów,
które zbudowane są z podstawowych elementów nazywanych prymitywami, czyli prostych
figur geometrycznych takich jak odcinki, krzywe, okręgi, wielokąty. Obiekty maja swoje
współrzędne (umiejscowienie, wysokość, szerokość itp) oraz atrybuty, mówiące np.
o grubości i kolorze linii, kolorze wypełnienia figury lub wypełnieniu niejednolitym jak
wypełnienie gradientem albo wzorem, stopniu przezroczystości”2.

2 http://www.ikkiz.pl/
8
Zalety:
(cid:1) stała jakość obrazu niezależnie od tego w jakiej skali zostanie on wyświetlony;
(cid:1) możliwość edycji pojedynczych obiektów niezależnie od pozostałych;
(cid:1) stosunkowo niewielkie rozmiary plików (dla obrazów nie fotorealistycznych);
(cid:1) możliwość opisu przestrzeni 3D (nie wszystkie formaty).

Wady:
(cid:1) duża złożoność obliczeniowa dla obrazów fotorealistycznych;
(cid:1) brak uniwersalnego formatu zapisu.

Zastosowanie:
(cid:1) wykresy;
(cid:1) rysunki techniczne;
(cid:1) prezentacja danych i modelowanie;
(cid:1) prezentacja tekstu;
(cid:1) zapis dokumentów nie przeznaczonych do dalszej edycji (PDF);
(cid:1) oprogramowanie do wizualizacji danych (pakiety statyczne, arkusze kalkulacyjne,
programy do kreślenia wykresów);
(cid:1) graficzne środowiska wspomagania projektowania (CAD);
(cid:1) systemy modelowania rzeczywistości wirtualnej;
(cid:1) wizytówki, emblematy, znaki firmowe;
(cid:1) symulacja dla wizualizacji naukowej;
(cid:1) animacje i gry komputerowe;

1.3. XML
1.3.1. Definicja XML

XML (eXtensible Markup Language, czyli rozszerzalny język znaczników),
zaprojektowany został przez World Wide Web Consortium – organizację która stworzyła
takie standardy jak HTML, CSS, PNG i inne. XML nie jest językiem do tworzenia
dokumentów, lecz jest to rama składniowa do tworzenia języków dla specyficznych
zastosowań. Dopiero one mogą służyć do budowania dokumentów. XML może posłużyć
9
np. do stworzenia wewnętrznego formatu plików dla dowolnej aplikacji. Języki takie
nazywamy aplikacjami XML. Takich języków jest coraz więcej, najbardziej znane to:
(cid:1) XHTML – tworzenie stron internetowych;
(cid:1) MathML – tworzenie dokumentów zawierających formuły matematyczne;
(cid:1) WML – tworzenie stron WAP dla urządzeń mobilnych;
(cid:1) GedML – obsługa danych genealogicznych;
(cid:1) MusicML – notacja muzyczna;
(cid:1) VoiceML – dane głosowe;
(cid:1) ThML – teksty teologiczne;
(cid:1) SVG – grafika wektorowa;
(cid:1) BITS – język technologii bankowych;
(cid:1) XMLNews – wymiana aktualnych wiadomości;
(cid:1) PDML – opis produktów;
(cid:1) TEI – kodowanie tekstu wraz z informacją o jego treści.

Jak widać takich języków jest sporo i są one wykorzystywane praktycznie we
wszystkich dziedzinach życia i nauki.

Zaletami XML’a jest to, że jest:3
(cid:1) otwarty – nie jest obwarowany żadnymi patentami;
(cid:1) elastyczny – oddzielony od treści, dlatego można go wykorzystać do dowolnych
celów;
(cid:1) bezpłatny;
(cid:1) niezależny od platformy sprzętowej;
(cid:1) można określać dane wraz z ich strukturą;
(cid:1) dokumenty XML są czytelne dla ludzi;
(cid:1) możliwość dokładnej kontroli poprawności składni dokumentów XML;
(cid:1) duża ilość narzędzi do przetwarzania dokumentów XML na inne formaty.

Jednak jak wszystko XML posiada też swoje wady:4
(cid:1) składnia jest nadmiarowa (szczególnie dla danych tabelarycznych) w porównaniu
do reprezentacji binarnej;

3
http://serwisy.blogspot.com/2008/07/serwisy-webowe-xml.html
4
http://serwisy.blogspot.com/2008/07/serwisy-webowe-xml.html
10