POLITECHNIKA KRAKOWSKA im. Tadeusza KościuszkiWydział Inżynierii Środowiska

Instytut Inżynierii i Gospodarki Wodnej

Damian Maziarz

Biblioteka symboli meteorologicznychw formacie SVG

Praca inżynierskaNr pracy: 2542

Studia stacjonarne I stopniaKierunek studiów: Ochrona środowiskaSpecjalność: Kształtowanie Środowiska

Praca wykonana pod kierunkiem:dr inż. Robert Szczepanek

Recenzent:dr hab. inż. Wiesław Gądek, prof. PK

Ocena pracy: ........................

Kraków, 2013

Oświadczenie kierującego pracą

Oświadczam, że niniejsza praca została przygotowana pod moim kierunkiem i stwier-dzam, że spełnia ona warunki do przedstawienia jej w postępowaniu o nadanie tytułu za-wodowego.

............................. .............................data podpis kierującego pracą

Załącznikdo zarządzenia Nr 37Rektora PK z dnia

31 października 2006r.

Oświadczenie

Ja, niżej podpisany(a) Damian Maziarz, student(ka) Wydziału inżynierii Środowiskaoświadczam, że przedkładaną pracę dyplomową inżynierska pt.:

Biblioteka symboli meteorologicznych w formacie SVG

wykonałem(am) samodzielnie, tzn. nie zlecałem(am) opracowania pracy dyplomowej,ani jej części osobom trzecim, jak również nie odpisywałem pracy dyplomowej, ani jej częściod innych osób.Jednocześnie przyjmuję do wiadomości, że w przypadku stwierdzenia popełnienia przeze

mnie czynu polegającego na przypisaniu sobie autorstwa istotnego fragmentu lub innychelementów cudzej pracy lub ustalenia naukowego, właściwy organ stwierdzi nieważnośćpostępowania w sprawie nadania mi tytułu zawodowego (art. 193 ustawy z dnia 27 lipca2005r – Prawo o szkolnictwie wyższym, Dz. U. Nr 164 poz. 1365, z późniejszymi zmianami).

............................. .............................data podpis

Prace dedykuje Rodzicom, którzy wspierali mnieprzez cały okres studiów.

Spis treści

Spis treści i

1 Wstęp 1

2 Grafika rastrowa a grafika wektorowa 2

3 Meteorologia synoptyczna 4

4 Format SVG 84.1 Historia SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2 Jednostki dokumentu SVG . . . . . . . . . . . . . . . . . . . . . . . . . 104.3 Struktura dokumentu SVG . . . . . . . . . . . . . . . . . . . . . . . . . 10

4.3.1 Elementy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.3.2 Atrybuty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.4 Figury podstawowe i ich atrybuty . . . . . . . . . . . . . . . . . . . . . 124.5 Czysty svg a inkscape svg . . . . . . . . . . . . . . . . . . . . . . . . . 144.6 SVGZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.7 Kompatybilność SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5 Inkscape - program do grafiki wektorowej 185.1 Wprowadzenie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195.2 Rozmieszczanie, skalowanie i wyrównywanie obiektów . . . . . . . . . . 20

5.2.1 Siatka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205.2.2 Prowadnice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205.2.3 Funkcje przyciągania . . . . . . . . . . . . . . . . . . . . . . . . 205.2.4 Wyrównaj i rozmieść . . . . . . . . . . . . . . . . . . . . . . . . 20

5.3 Kontur w ścieżkę i Obiekt w ścieżkę . . . . . . . . . . . . . . . . . . . . 215.4 Narzędzie ”Wektoryzuj bitmapę” . . . . . . . . . . . . . . . . . . . . . 215.5 Pozostałe narzędzia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

6 Proces tworzenia ikon 23

i

6.1 Nazwy ikon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.2 Metadane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236.3 Warunki użytkowania ikon . . . . . . . . . . . . . . . . . . . . . . . . . 246.4 Trudne początki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246.5 Łączenie figur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256.6 Obiekty tekstowe - praktyczne wykorzystanie . . . . . . . . . . . . . . . 276.7 Kontur w ścieżkę i łączenie obiektów a mieszanie stylów i proporcji . . 27

6.7.1 ”Połącz” i ”kontur w ścieżkę” - test . . . . . . . . . . . . . . . . 286.7.2 ”Połącz” a ”Grupowanie” . . . . . . . . . . . . . . . . . . . . . 30

7 Wykonane symbole meteorologiczne 31

8 Wykorzystanie opracowanym symboli w programie Quantum GIS 38

9 Podsumowanie 41

Bibliografia 42

Spis rysunków 43

ii

Rozdział 1

Wstęp

Celem niniejszej pracy jest stworzenie biblioteki symboli meteorologicznych w for-macie SVG i opisanie metod ich powstawania.

Celem jest również udowodnienie, jak stworzyć łatwą do odnalezienia bibliotekęsymboli i dlaczego skalowalna grafika wektorowa idealnie nadaje się do tego zadania.

Jednym z powodów dla powstania pracy jest rosnące zainteresowanie grafiką wek-torową i wzrost znaczenia formatu SVG w cyberprzestrzeni.

Do napisania pracy zmotywowali mnie użytkownicy oprogramowania Quantum GISwyrażający trudności w odnalezieniu symboli meteorologicznych i potrzebę ich wyko-rzystania 1.

W realizacji postawionych celów pomogło mi darmowe oprogramowanie open sour-ce. Pozwala tworzyć obrazy wektorowe bez znajomości skomplikowanego języka XMLi specjalistycznej informatycznej wiedzy. Ku mojemu zaskoczeniu środowisko edytoraInkscape jest bardzo przyjazne dla użytkownika.

Następne rozdziały przybliżą nieco znaczenie pojęcia meteorologii synoptycznej,skrótu SVG, edytora Inkscape i jego przydatnych funkcji z których korzystałem. Stwo-rzyłem również kilka ciekawych testów i porównań, przedstawiłem wszystkie ikony którewykonałem z ich szczegółowym opisem oraz krótko opisałem możliwość ich zastosowa-nia w programie Quantum GIS.

1http://trac.osgeo.org/qgis/ticket/312

1

Rozdział 2

Grafika rastrowa a grafika wektorowa

Zasoby internetu udostępniają nam w większości grafiki rastrowe, zwane równieżbitmapami. Oprócz grafiki rastrowej możemy spotkać się z mniej popularnym typemgrafiki, grafiką wektorową. Jest ona głównym tematem mojej pracy, gdyż to właśnie jejtworzeniem się zająłem, jak również część pracy dotyczy formatu, który ją obsługuje.

Zasadnicza różnica między tymi dwoma typami grafik polega na sposobie tworzeniaobrazu. Podstawowym elementem grafiki rastrowej jest piksel (px). Piksel ma kształtkwadratu lub prostokąta. Obraz rastrowy tworzony jest z siatki pikseli tzn. wielu poje-dynczych pikseli (Rys. 1 ). Wartość (kolor) piksela zakodowana jest w obrazie zwanymmapą bitową. W bitmapie kolor każdego piksela definiowany jest osobno. Obraz czarno-biały wymaga jednego bitu na piksel. W zależności od rodzaju bitmapy wyróżniamyodmienne głębie kolorów. Od całkowitej liczby pikseli i informacji przechowywanych wjednym pikselu (bitmapy) zależeć będzie jakość obrazu rastrowego. Główne zalety gra-fiki rastrowej to łagodne przejścia między kolorami, dobre odwzorowywanie półcieni,popularne formaty zapisu. Główną wadą jest to iż skalowanie obrazu rastrowego powo-duje utratę jego jakości. Świetnie nadaje się do zapisu zdjęć i realistycznych obrazów.

Rysunek 1: pikselizacja [Źródło http://pl.wikipedia.org].

2

Rodzaje zapisu grafiki rastrowej według głębi kolorów:

• 1 bit - czarno-biały

• 8 bitów - 256 kolorów

• 16 bitów - 65536 kolorów

• 24 bity - 12,8 mln kolorów

Grafika wektorowa natomiast, jest opisana za pomocą naniesionych na płaszczyznęfigur geometrycznych (obiektów), które zbudowane są z elementów zwanych prymity-wami. Są one nanoszone na matematycznie zdefiniowany układ współrzędnych.

Co daje ten matematyczny opis grafiki wektorowej? Otóż właśnie z niego wynikagłówna zaleta grafiki wektorowej, którą jest jej skalowalność, przy zachowaniu jakościobrazu. Grafikę tą w przeciwieństwie do rastrowej możemy dowolnie powiększać lubpomniejszać, zmieniać jej proporcje, rozciągać bez pogorszenia jej jakości. Możemyedytować każdy obiekt z osobna, niezależnie od pozostałych. Dla obrazów niefotoreali-stycznych pliki zajmują mało miejsca na dysku. Główną wadą jest brak uniwersalnegoformatu zapisu i duży rozmiar obrazów fotorealistycznych wynikający ze złożonościobliczeniowej. Doskonale znajduje zastosowanie w animacjach i grach komputerowych,rysunkach technicznych, wykresach, prezentacji danych i modelowaniu, przy tworzeniuikon, wizytówek, znaków firmowych, banerów (Cieśla, 2013).

Rysunek 2: Obraz rastrowy i wektorowy [Źródło http://pl.wikipedia.org].

3

Rozdział 3

Meteorologia synoptyczna

Meteorologia synoptyczna jest nauką badającą prawidłowości rozwoju procesówatmosferycznych związanych z przewidywaniem pogody. Możemy powiedzieć krótko,że jest to nauka o pogodzie i jej przewidywaniu (Zwieriew, 1965).

Pogodą natomiast nazywamy stan atmosfery charakteryzujący się w określonejchwili lub okresie czasu określonym zespołem wartości czynników meteorologicznych.

Najważniejszymi czynnikami atmosferycznymi charakteryzującymi pogodę są:

• temperatura powietrza

• zachmurzenie

• opady atmosferyczne

• zjawiska takie jak zamiecie, mgły, nawałnice, burze itp.

Do badania i prognozowania pogody służą specjalne metody z których najważniej-szą jest metoda synoptyczna. Polega na analizie map synoptycznych, tj. map geogra-ficznych z naniesionymi na nie wynikami jednoczesnych obserwacji meteorologicznychi aerologicznych w różnych punktach.

Słowo synoptyczny pochodzi od greckiego ”sinoptikos” - poglądowy. Mapa synop-tyczna pozwala oglądać jednocześnie warunki pogody nad dowolnym rejonem geogra-ficznym.

Opracowywanie map synoptycznych polega na nanoszeniu na mapę możliwie jaknajwięcej informacji o pogodzie przy jednoczesnym zachowaniu przejrzystości. Zasadananoszenia danych meteorologicznych na mapy pogody polega na stosowaniu określo-nego systemu cyfr i umownych symboli (Zwieriew, 1965).

4

Aby zrozumieć znaczenie stworzonych przeze mnie symboli meteorologicznych, na-leży zapoznać się z kilkoma definicjami: (Kożuchowski, 2004)

• chmury - produkt kondensacji pary wodnej w atmosferze. Są to widoczne naniebie zbiory małych kropelek wody lub kryształków lodu a często mieszaninajednych i drugich, które ”zawieszone” w swobodnej atmosferze przemieszczająsię wraz z prądami powietrznymi. W chmurach mogą znajdować się też większecząstki - krople deszczu, płatki śniegu, gradziny, cząstki pyłu itp. Chmury różniąsię od otaczających je mas powietrza kształtami, barwą oraz wodnością czylimasą wody zawartą w jednostce objętości powietrza

• zachmurzenie - stopień pokrycia nieba chmurami

• zmętnienie - ograniczenie widoczności spowodowane pyłami i aerozolem atmos-ferycznym.

• mgła - zjawisko, występujące w przyziemnej warstwie powietrza które na skutekobecności skondensowanej pary wodnej (kropelek lub rzadziej kryształów loduktóre powstają przy dużym mrozie) ogranicza poziomą widzialność poniżej 1 km.Mniejsze ograniczenie widzialności nazywa się zamgleniem

• wiatr - poziomy lub prawie poziomy ruch mas powietrza atmosferycznego wzglę-dem powierzchni ziemi

• wichura - wiatr wiejący z prędkością powyżej 75 km/h

• trąba powietrzna - jest powstającym w chmurze burzowej silnym wirem powietrz-nym. Ma kształt leja sięgającego od podstawy chmury do powierzchni Ziemi. To-warzyszy jej szybki spadek ciśnienia oraz silne wiatry. Powoduje duże zniszczenia,opady deszczu, gradu czy wyładowania elektryczne

• opad - powstaje na skutek zwiększenia się rozmiarów kropelek wody lub kryształ-ków lodu w chmurze co powoduje ich swobodne i dostatecznie szybkie wypadaniepod wpływem siły grawitacji

• deszcz - opad w postaci kropelek wody o średnicy powyżej 0,5 mm

• mżawka - opad w postaci kropelek wody o średnicy poniżej 0,5 mm

• śnieg - opad w postaci kryształków lodu zwykle o kształcie sześcioramiennychgwiazdek, łączących się w płatki śniegu

• grad - opad w postaci brył lodu (gradzin, gradowin) o średnicy powyżej 5 mm

• szadź - powstaje z drobnych kropelek przechłodzonej wody tworzących mgłę wmomencie zetknięcia kropelki z powierzchnią przedmiotu1

1http://www.eduscience.pl/

5

• burza - intensywne opady deszczu lub deszczu i gradu którym towarzyszą wyła-dowania elektryczne2

Rysunek 3: Mapa synoptyczna z 1874 roku [Źródło:http://www.geography.hunter.cuny.edu]

2http://pl.wikipedia.org

6

Rysunek 4: Mapa z zasobów uniwersytetu w Koloni [Źródło: http://www.uni-koeln.de/]

7

Rozdział 4

Format SVG

Format gafiki wektorowej SVG (scalable vector grahics) zbudowany jest z językaxml.

XML (Extensible Markup Language: Rozszerzalny Język Znaczników) został stwo-rzony przez grupę W3C (World Wide Web Consortium), która zajmuję się tworzeniemstandardów dla sieci web. Język ten służy jako składowa, szablon, do tworzenia językówdla konkretnych zastosowań. Jest to tak zwany meta język czyli język służący do opisuinnych języków. Dzięki niemu powstają1:

• XHTML - do tworzenia stron internetowych

• MathML - do tworzenia dokumentów zawierających formuły matematyczne

• TEI - do kodowania tekstu wraz z informacją o jego treści

• GedML - do obsługi danych genealogicznych

• XMLNews - do wymiany aktualnych wiadomości

• SVG - do tworzenia grafiki wektorowej

Takich języków na bazie XML wykorzystywanych w cyberprzestrzeni jest dużo wię-cej. Znajdują one praktyczne zastosowanie i ułatwiają życie informatykom przy two-rzeniu aplikacji, a nam dostarczają wielu ciekawych rozwiązań.

Głównymi zaletami XML’a są:

• jest uniwersalny - może być wykorzystywany do wielu różnych celów

• nie jest ograniczony żadną licencją - jest to format otwarty

• jest bezpłatny1http://www.w3schools.com/

8

• jest niezależny od platformy sprzętowej

• dokumenty XML są czytelne dla ludzi

• dzięki ogólnie dostępnemu oprogramowaniu z łatwością można go przekształcaćdo innych formatów

XML posiada również wady:

• poza danymi w postaci nieskompresowanej muszą być przechowywane znacznikiteż w postaci nieskompresowanej. Znaczniki mogą stanowić nawet 80 procentwielkości dokumentu

Rysunek 5: Przykładowy dokument XML [Jurzec, 2009]

4.1 Historia SVG

Format SVG, a ściśle jego pierwsza wersja ”1.0” powstała w 1999 r. RekomendacjęW3C otrzymała w 2001 roku. Po ukończeniu wersji SVG 1.0 rozpoczęto pracę prowa-dzące do dalszego rozwoju standardu SVG 1.1.. Dalsze prace skupiały się głównie nawprowadzaniu odpowiednich modułów, których celem jest podzielenie specyfikacji tak,aby uzyskać produkt uproszczony przeznaczony do konkretnych celów. W ten sposóbpowstały specyfikacje SVG Mobile 1.1 (dla telefonów komórkowych) czy SVG Tiny 1.1(dla palmtopów). W 2011 roku rekomendację W3C otrzymała wersja SVG 1.1 (SecondEdition).

Wprowadzono zmiany stylistyczne specyfikacji aby uczynić ją bardziej czytelną.Indeks atrybutów został przeanalizowany i jest wolny od błędów. Wprowadzono noweelementy i atrybuty dotyczące zdarzeń, animacji, gradientu.

9

4.2 Jednostki dokumentu SVG

Jeżeli jednostka nie zostanie określona domyślnie, wartość przyjmuję jednostkę px(piksel)- liczba pikseli w pionie i poziomie uzależniona jest od rozdzielczości w jakiejpracuje monitor.

Jednostki które możemy przypisać to również2:

• pica (pc) = 1/6 cala = 4,2333 mm

• procent (%) = procentowa wielkość tak zwanego ”viewbox” czyli okna w którymwyświetlany jest svg obiekt

• punkt (pt) = 1/72 cala = 0,3528 mm

• firet (em) - stopień pisma, wielkośc tej jednostki jest uzależniona od; rozmiaruczcionki. Idealna do określania parametrów tekstu

• wysokośc x (ex) - ”1 ex = x (wysokość małej litery bez wydłużeń) ex to jednostkawzględna, zależna od wysokości małych liter w danym kroju. 1 ex ma długośćrówną wysokości małych liter (bez wydłużeń dolnych) w danym kroju (np. litera„x” — stąd nazwa x-height ). Jak widać, wielkość ex jest zależna od rodzajuużytego kroju. Każdy krój ma inny stosunek wysokości dużych liter do małych.Średnio ten stosunek wynosi 1:2” (Jurzec, 2009)

• milimetry (mm)

• cale (in)

• centymetry (cm)

4.3 Struktura dokumentu SVG

4.3.1 Elementy

Każdy element składa się ze znacznika otwierającego i zamykającego

• 〈 nazwa 〉 - znacznik otwierający

• 〈 /nazwa 〉 - znacznik zamykający

Pomiędzy wyżej wymienionymi znacznikami można umieszczać różne dane lub wsta-wiać inne elementy. Element może zawierać atrybuty które należy zdefiniować w znacz-niku otwierającym np. 〈nazwaatr = ”wartosc”〉

2http://taat.pl/

10

4.3.2 Atrybuty

Jak już wspomniałem w poprzednim rozdziale, atrybuty mogą być dodawane doelementów, co ma na celu szczegółowy opis elementu.

Rysunek 6: Przykładowy dokument XML z elementem SVG [Źródło:http://www.w3.org/].

Standalone=”yes” oznacza iż dokument nie zawiera odwołania do pliku zewnętrz-nego. Dokument ten posiada element SVG elipse z opisującymi ją atrybutami.

Definicje atrybutów

3

Każdemu z atrybutów towarzyszy przypis ”Animatable” - element określający czydany atrybut może być animowany czy też nie. (Animatable: yes - może być animowanylub Animatable: no - nie może być animowany)

• version = ”〈 number 〉 ” - wskazuję wersję języka SVG dla której odpowiadaten fragment dokumentu. Dla SVG 1.1 atrybut powinien mieć wartość ’1 0,1 ’.Animatable: no.

• baseProfile = profile-name - atrybut ten nie określa żadnych ograniczeń w prze-twarzaniu dokumentu jednak może ostrzegać użytkownika gdy dokument jestmodyfikowany poza zakres określony w profilu bazowym ponieważ może mieć towpływ na poprawne renderowanie zawartości dokumentu. Atrybut ten może byćużyty jako narzędzie do ochrony praw autorskich. Animatable: no

• x = ”〈 coordinate 〉 ” - współrzędna osi x rogu prostokątnego obszaru. Jeżeli niezostanie określona przyjmie wartość 0. Animatable: yes

• y = ” 〈 coordinate 〉 ” - współrzędna osi y rogu prostokątnego obszaru. Jeżeli niezostanie określona przyjmie wartość 0. Animatable: yes

3http://www.w3.org/TR/2011/PR-SVG11-20110609/struct.html

11

• width = ”〈 length 〉 ” - szerokość prostokątnego obszaru w który zostanie wsta-wiony element SVG. Wartość 0 wyłącza renderowanie natomiast ujemna generujebłąd. Animatable: yes.

• height = ”〈 length 〉 ” - wysokość prostokątnego obszaru w który zostanie wsta-wiony element SVG. Wartość 0 wyłącza renderowanie natomiast ujemna generujebłąd. Animatable: yes

• postscriptowe = ”content-type” - określa domyślny język skryptów zastosowanydla danego fragmentu dokumentu SVG.

• contentStyleType = ”content-type” - określa domyślny język arkuszy stylów dladanego dokumentu

• zoomAndPan = ”disable — magnify” - pozwala powiększać i przesuwać danyfragment dokumentu lub gdy ”disable” - uniemożliwia użytkownikowi powięk-szanie dokumentu.

• preserveAspectRatio = ”[defer] 〈 align 〉 [〈 meetOrSlice 〉]” - stosowany do celówzachowania skalowania grafiki. Animatable: yes

4.4 Figury podstawowe i ich atrybuty

Każdej z figur podstawowych, jakie oferuje nam SVG tj. elipsy, okręgu, prostokąta,linii, polilinii i wielokąta możemy przypisać charakterystyczne dla ich kształtu atrybuty.

Dla przykładu, okrąg posiada trzy atrybuty opisujące jego kształt, natomiast pro-stokąt, sześć atrybutów. Nie będę tutaj zagłębiał się w szczegóły atrybutów każdej zfigur, a przedstawię jedynie dwa przykłady opisu elementów przy pomocy charaktery-stycznych atrybutów aby zrozumieć istotę tworzenia kształtów w SVG. Po szczegółyodsyłam do pracy Andrzeja Jurca.

Pierwszym przykładem będzie wspomniany wcześniej okrąg. Przyjrzyjmy się listin-gowi na podanym przykładzie (Rys.7):

12

Rysunek 7: Przykład użycia elementu circle [Źródło: http://www.w3.org/].

Analizując sformułowanie (Rys.7) możemy zauważyć 3 charakterystyczne atrybutyopisujące okrąg a są to:

• cx - współrzędna x środka koła

• cy - współrzędna y środka koła

• r - długość promienia okręgu

Jako drugi przykład wykorzystam prostokąt: Prostokąt definiuje element rect (Rys.8).

Prostokąt jest opisywany przez następujące atrybuty:

• x - współrzędna x lewego dolnego rogu prostokąta

• y - współrzędna y lewego dolnego rogu prostokąta

• width - szerokość prostokąta

• height - wysokość prostokąta

• rx - służy do zaokrąglania wierzchołków

• ry - służy do zaokrąglania wierzchołków

13

Rysunek 8: Przykład użycia elementu rect [Żródło: http://www.w3.org/].

4.5 Czysty svg a inkscape svg

Macierzystym formatem zapisu dokumentu programu Inkscape jest format SVG.W zależności od tego, czy projekt jest w wersji roboczej i przeznaczony jest to dalszejobróbki, czy jest to finalna wersja, mamy możliwość wybrania formatu zapisu Inksca-pe SVG lub Czysty format SVG. Drugi z nich w zasadzie jest przeznaczony dozapisu dokumentu lub jego kopii przed otwarciem go w innym programie. InkscapeSVG oprócz elementów zgodnych ze składnią języka SVG zawiera także dodatkoweinformacje, które są rozpoznawane jedynie przez Inkscape.

Wybór Czystego formatu w dalszym ciągu pozwala nam edytować dokument. Nie-mniej jednak niektóre funkcje będą ograniczone. Niektóre z narzędzi np. Obiekt 3dwymagają dodatkowych (niestandardowych informacji), aby móc zidentyfikować i pra-widłowo edytować utworzone wcześniej obiekty. Brak tych informacji nie spowodujeusunięcia obiektów czy zmiany w ich wyglądzie lecz spowoduje, iż te obiekty będątraktowane przez inne programy jako zwykłe prymitywy lub ścieżki. [K. Cieśla, 2013]

14

4.6 SVGZ

SVGZ jest skompresowanym w formacie gzip dokumentem svg. Zaletą tak skompre-sowanego dokumentu jest o około połowę mniejszy rozmiar pliku w stosunku do svg.Jest to jedyna zaleta SVGZ. Wady tego rozszerzenia to m.in (Cieśla, 2013) :

• svgz nie jest czytelny dla człowieka

• svgz nie może być przeszukiwany zwykłymi algorytmami do przeszukiwania tek-stu

• nie wszystkie programy (przeglądarki) obsługują pliki svgz

4.7 Kompatybilność SVG

Format SVG wykorzystywany przede wszystkim w cyberprzestrzeni ciągle się roz-wija, a jego funkcje są w coraz to większym stopniu obsługiwane przez przeglądarkiinternetowe. Na przestrzeni lat, odkąd powstał SVG, aż do teraz, format ten rośniew siłę, prężnie się rozwijając. Dowodem na to jest wzrastający poziom kompatybilnośćformatu wraz z pojawianiem się kolejnych, nowszych wersji przeglądarek internetowych.

W 2009 roku Andrzej Jurzec wykorzystał w swojej pracy tabele organizacji W3C,przedstawiającą informację, czy dany program wyświetla dokument SVG tak jak powi-nien wyglądać. Analizując to zestawienie i nowsze dostępne na http://www.codedread.com/można wyciągnąć kilka interesujących wniosków.

Starsza wersja analizy (Rys.9), bierze pod uwagę więcej wtyczek i typów przegląda-rek. W opracowaniu tym, skupiłem się głownie na tych najważniejszych branych poduwagę również w nowszym zestawieniu (Rys. 10).

Kompatybilność funkcji SVG branych pod uwagę w analizie przez popularne prze-glądarki Internet Explorer 7 i Internet Explorer 8 była zerowa tzn. format był całko-wicie nieobsługiwany. Był to duży problem dla SVG ponieważ internet explorer byłanajpopularniejszą przeglądarką internetową z której korzystało 70 procent internau-tów. Dane z 2011 roku (Rys.10) wskazują iż najnowsza wówczas wersja przeglądarkitj. internet explorer 9 obsługiwała nasz format w prawie 59,64 procent. Świadczy to owspomnianym wcześniej wzrastającym znaczeniu formatu SVG w internecie. Microsoftwreszcie wydał przeglądarkę która silnie wspiera SVG.

Przeglądarka OPERA obsługuje format w największym stopniu. Porównując obieanalizy można zauważyć niewielki spadek poziomu obsługi SVG przez wersje opery 10a1w stosunku do wersji 9.50 ale wynosi on zaledwie 0,18 procenta. Następnie dochodzido ponad procentowego wzrostu w stosunku do nowszej wersji OPERY przedstawionejna drugiej analizie. Wynik analizy dla OPERA 11.01 wyniósł aż 95,44 procenta!

Format również w dobrym stopniu obsługiwany jest przez przeglądarkę chrome iFirefox.

15

Jeżeli chodzi o wtyczki (plugins) z obu analiz najsłabiej wypada SVG WEB (Be-holder) 50,73 procenta kompatybilności. Jednak zaskakującym jest to, że uzyskała takwysoki wynik już na etapie alfa fazy.

Podsumowując, dawniej głównym niebezpieczeństwem dla formatu SVG było zerowsparcia dla niego ze strony Internet Explorer 7 i Internet Explorer 8. Teraz Inter-net Explorer 9 całkiem dobrze radzi sobie z jego obsługą. Andrzej Jurzec wyciągającwnioski wynikające z wówczas dostępnej analizy pisał ”Moim zdaniem jeżeli do Inte-rent Explorera nie zostanie dodana obsługa SVG (nic nie wiadomo o takich planach)to format ten nie zdobędzie szerokiej popularności” (Jurzec, 2009). Dlatego wszystkoskłania się ku stwierdzeniu, że format ZDOBĘDZIE szeroką popularność.

Rysunek 9: Wsparcie dla formatu SVG 2009 r. [Źródło: Jurzec, 2009].

Kolor zielony - Test zaliczony; Kolor żółty - Test prawie zaliczony (wystąpiłyproblemy);Kolor czerwony - Test niezaliczony

16

Rysunek 10: Wsparcie dla formatu SVG 2011 r. [Źródło: http://codedread.com].

Kolor zielony - Test zaliczony; Kolor żółty - Test prawie zaliczony (wystąpiłyproblemy); Kolor czerwony - Test niezaliczony

17

Rozdział 5

Inkscape - program do grafikiwektorowej

Program Inkscape jest edytorem dwuwymiarowej grafiki wektorowej, kompatybilnyz systemami Windows, Linux, Mac OS X. Interesującym czynią go takie czynniki jak:ciągły rozwój, darmowa licencja oraz wiele wersji językowych, w tym także polska.Nazwa Inkscape pochodzi od połączenia dwóch słów INK (tusz) i SCAPE (krajobraz).

Rozpowszechnienie Inskcape na licencji GNU GPL oznacza, iż jego wykorzystaniew celach komercyjnych, bądź prywatnych, jest w pełni darmowe. Duże znaczenie marównież stosowanie jako macierzystego formatu zapisu grafiki wektorowej SVG (ang.Scalable Vector Graphics – skalowalna grafika wektorowa). Format ten został stwo-rzony przez W3C (Word Wide Web Consortium), które zajmuję się standaryzacją napotrzeby internetu tego jak i innych formatów. Ze względu na charakter grafiki wekto-rowej Inkscape służy przede wszystkim do tworzenia logo, ikon, wykresów, diagramów,schematów1.

Format grafiki wektorowej SVG, w którym zapisywałem wszystkie projekty ikontworzone za pomocą Inkscape, pozwala nam korzystać z siedmiu różnych obiektów. Sąto: elipsa, okrąg, prostokąt, linia, linia łamana oraz wielokąt i tekst. Korzy-stając z Inkscape dodatkowym elementem jest ścieżka jednak formalnie nie zalicza sięona do wcześniej wymienionych obiektów. Pozwala ona na tworzenie bardzo zaawan-sowanych kształtów i daje praktycznie nieograniczone możliwości w tym względzie.Ratuje nas zawsze kiedy inne elementy zawodzą tzn. kiedy kształt nie jest możliwy douzyskania inną metodą.

1http://inkscape.org/

18

5.1 Wprowadzenie

Do wykonania wszystkich ikon posłużył mi format dokumentu 48x48 px. Celemkolejnych rozdziałów jest opisanie tylko najważniejszych tzn. najbardziej przydatnychi wybranych przeze mnie funkcji programu Inkscape, które wykorzystałem podczasprocesu tworzenia ikon.

Rysunek 11: Inkscape - płótno i siatka [Źródło własne]

19

5.2 Rozmieszczanie, skalowanie i wyrównywanie obiek-tów

5.2.1 Siatka

Siatka jest przydatnym narzędziem, które znacznie ułatwia zachowanie proporcjiobiektów danego projektu. Program daje możliwość zdefiniowania niestandardowychrodzajów i parametrów siatki. W swoim projekcie korzystałem ze standardowego ro-dzaju siatki tj. siatki prostokątnej o rozstawie linii głównych równym 5 px.

5.2.2 Prowadnice

Prowadnice podobnie jak siatka służą do precyzyjnego rozmieszczania obiektów.Standardowo mamy do wyboru cztery typy prowadnic: prowadnice pionową, prowad-nice poziomą oraz jedną położoną pod kątem 45 i kolejną pod kątem 135 . Prowadnicew przeciwieństwie do siatki nie pokrywają równomierne obszaru na którym pracujemylecz są umieszczane w określonej przez nas pozycji. Jest to bardzo przydatna funkcjaw projektach wymagających dużej dokładności i precyzji w rozmieszczaniu różnychobiektów na stronie czy względem siebie. W swoim projekcie nie korzystałem często zprowadnic - potencjał tego narzędzia odkryłem dopiero podczas tworzenia zestawieniakilku ikon z ich opisem w formie tekstowej na większym formacie.

5.2.3 Funkcje przyciągania

Aby precyzyjnie wyrównywać i wymiarować obiekty polecam korzystać z funkcjiprzyciągania. Przyciąganie możemy stosować nie tylko wobec węzłów obiektu ale tak-że innych elementów takich jak ścieżki, węzły, elementy obwiedni, elementy ścieżki,prowadnice i linie siatki lub też obwiednia obszaru dokumentu. Funkcja przyciąganiajest niezwykle pomocna w szczególności jeżeli interesuje nas określona pozycja obiektuwzględem innego obiektu lub elementu dokumentu. Z funkcją przyciągania powiązanajest znaczna liczba ustawień w preferencjach programu czy ustawieniach dokumentu.W swoim projekcie korzystałem ze standardowych ustawień przyciągania korzystając zaktywowania lub dezaktywowania odpowiednich właściwości przyciągania na paskachnarzędzi zwanych ”sekcja obwiedni obiektów” i ”sekcja ścieżek, węzłów i uchwytów”[K. Cieśla, 2013].

5.2.4 Wyrównaj i rozmieść

Praktycznie w każdym ze swoich projektów korzystałem z tej funkcji wyśrodkowu-jąc obiekty na osi pionowej i poziomej względem strony. W tym miejscu warto równieżwspomnieć że był to powód dla którego korzystałem z funkcji łączenia kilku obiektów

20

w jeden Połącz. Dzięki temu program mógł właściwie rozmieścić ikonę względem stro-ny. Gdybym nie skorzystał z tej opcji to wykonując tę operację na ikonie składającejsię z kilku mniejszych obiektów otrzymał bym rezultat w postaci tychże obiektów na-łożonych na siebie ponieważ program zastosował by formułę do każdego z obiektówz osobna i każdy z tych elementów wyrównał by i wyśrodkował w ten sam sposób.Program oczywiście daje możliwość korzystania z różnych opcji wyrównywania i roz-mieszczania obiektów jednak ja najczęściej korzystałem z wspomnianej na początku.

5.3 Kontur w ścieżkę i Obiekt w ścieżkę

Funkcja ta przekształca istniejący obiekt.Narzędzie to znajduję swoje zastosowanie w szczególności jeżeli stoimy przed proble-

mem stworzenia jakiegoś kształtu, a funkcja przekształcania którejś ze zdefiniowanychfigur w SVG nie jest wystarczająca, aby otrzymać interesujący nas obiekt.

Warto wspomnieć, że wszystkie obiekty poza tekstem, prostokątem i grafiką rastro-wą są tworzone za pomocą ścieżek. Specyficzny charakter obiektu jest zapamiętywanyw dodatkowych informacjach zapisanych w dokumencie SVG. To właśnie dzięki tyminformacjom obiekty mogą być rozpoznawane jako odrębny typ a nie ścieżki.

Wizualnie po zastosowaniu tej funkcji na prostokąt lub tekst, obiekt pozostaje takisam. Różnica jest widoczna dopiero po edycji węzłów. Różnica związana jest również ztypem obiektu SVG. Konwersja pociąga za sobą utratę informacji, które opisują danyobiekt, a co za tym idzie, tracimy możliwość edytowania treści czy zmieniania czcionkipo przekształceniu go w ścieżkę. Prostokąt w tym przypadku zyskuje dodatkowe węzłydzięki czemu możemy manipulować jego kształtem w niestandardowy sposób ale rów-nież traci wszystkie węzły edycyjne charakterystyczne dla prostokątów. Obiekt ten niejest już zdefiniowany jako prostokąt przez format SVG.

Zastosowanie funkcji obiekt w ścieżkę rozumiem na tej samej zasadzie co kontur wścieżkę jednak tyczy się ona obiektów nie posiadających kontur. Praktyczne zastoso-wanie tej funkcji możemy znaleźć przekształcając tekst np. jakąś z liter której konturnie został przez nas zdefiniowany ”nie określono”.

5.4 Narzędzie ”Wektoryzuj bitmapę”

Możliwość wektoryzacji bitmapy, jaką daje program Inkscape, z założenia wydajesię być doskonałym rozwiązaniem na stworzenie dowolnego kształtu, przy minimalnymwkładzie pracy z naszej strony.

W swoim projekcie kilkakrotnie korzystałem z tego narzędzia i szybko okazało się,że jego efekt w postaci zwektoryzowanej bitmapy nie może stanowić finalnej wersji pro-jektu. Otrzymany skonwertowany obraz może natomiast stanowić bazę do dalszej pracynad projektem. Dla mnie narzędzie to okazało się mało pomocne. Zdarzyło się jednak

21

że otrzymany obiekt posłużył mi jako podkładka do stworzenia bardziej wyszukanychkształtów za pomocą różnych narzędzi programu inkscape. Przydatność tej funkcji bar-dzo dobrze opisuje tutorial, który możemy znaleźć na http://inkscape.org/doc/tracing/tutorial-tracing.pl.html .

Funkcja ta, okazuje się bardziej przydatna do skomplikowanych graficznie projek-tów, aby stworzyć odpowiednią bazę do dalszej obróbki przez grafika. Konwertowanieza pomocą tego narzędzia, tak prostych graficznie obiektów jak ikony, a zarazem wy-magających dbałości o szczegóły jest mało praktyczne. Poddanie dalszej obróbce takwygenerowanej ikony wprowadza często jeszcze większy zamęt, a nierzadko wymagaod nas jeszcze większej pracy niż stworzenie ikony od podstaw.

5.5 Pozostałe narzędzia

Narzędzia z których najczęściej korzystałem to:

• Pióro - Rysowanie Krzywych Beziera i linii prostych,

• Gwiazda - Tworzenie gwiazd i wielokątów

• Okrąg

Najbardziej zaciekawiły mnie Krzywe Beziera jak również okazały się niezwykle przy-datne. Jest to świetne narzędzie jeżeli brak nam pomysłu na stworzenie jakiegoś obiektuza pomocą któregoś ze standardowych kształtów SVG. Umożliwia stworzenie każdegointeresującego kształtu jednak korzystanie z tego narzędzia wymaga nie lada precyzjii tworzenie skomplikowanych kształtów wyłącznie za jego pomocą jest czasochłonne.Podczas korzystania z krzywych Breziera niezwykle pomocna staje się opcja Zoom:przybliżanie i oddalanie rysunku. Dzięki niej praca w maksymalnym przybliżeniu sprzy-ja precyzji dzięki czemu ikona w standardowym powiększeniu wygląda estetycznie - wszczególności jeżeli chodzi o kąty nachylenia poszczególnych linii, wszystkie krągłościobiektu.

Krzywe Beziera to krzywe parametryczne. Oznacza to, że każdy punkt krzywejwyznaczany jest odpowiednią funkcją matematyczną z parametrami. Krzywa jest zde-finiowana poprzez węzły końcowe oraz ich punkty kontrolne . Punkty kontrolnedają możliwość wyginania krzywej, co powoduje zmianę współrzędnych punktów znaj-dujących się między punktami końcowymi. Ciekawostką jest iż krzywe Beziera zostaływykorzystane po raz pierwszy w celu uproszczenia modelowania konstrukcji samocho-dowych [K. Cieśla, 2013]

22

Rozdział 6

Proces tworzenia ikon

6.1 Nazwy ikon

Od nazwy ikony między innymi będzie zależała łatwość jej odnalezienia w wirtual-nym świecie. Umożliwi to również szybsze użycie tej jednej nas interesującej spośród125 pozostałych tworzących spójną bibliotekę. Z tego względu główna zasada jaką przy-jąłem to długość nazwy ikony, która mieści się w 3 charakterystycznych dla niej sło-wach. Następnie pojawia się kod synoptyczny przypisany danej ikonie. Zamiast spacjizastosowałem pauzy ”-” . Pełna nazwa symbolu znajduje się w metadanych. Przykład:

• pełna nazwa symbolu: Visibility reduced by smoke; nazwa ikony: Visibility-reduced-smoke-04

• pełna nazwa symbolu: Drizzle (not freezing) or snow grains not falling as sho-wer(s) ended in the past hour; nazwa ikony: Drizzle-snow-ended-20

• pełna nazwa symbolu: Severe duststorm or sandstorm has decreased during thepreceding hour; nazwa ikony: Severe-duststorm-decreased-33

6.2 Metadane

Służą do zdefiniowania lub opisu danych. Nazywane również ”danymi o danych”.Dzięki nim możemy dodać do dokumentu dowolne informacje tekstowe. Każdy elementSVG może zawierać element desc lub/i title. Istotnym jest, iż programy mogą filtrować(przeszukiwać) tekst zawarty w elemencie title dzięki czemu możemy szybko odnaleźći zidentyfikować dany dokument. Na temat metadanych powstaje wiele prac, główniew języku angielskim. Problematyka metadanych jest zagadnieniem bardzo na czasieze względu na ogrom przybywających informacji elektronicznych do cyberprzestrzeni.

23

Wraz z tym procesem coraz bardziej zyskują na znaczeniu i stają w odpowiedzi napotrzebę standaryzacji w dziedzinie informacji1.

6.3 Warunki użytkowania ikon

Licencja na podstawie której udostępniam swoje ikony to ”CC (Creative Commons)Uznanie autorstwa”

Pozwala ona na:

• kopiowanie

• edytowanie

• rozpowszechnianie

• tworzenie utworów zależnych tzn. wolno zmieniać, przekształcać, tworzyć dziełana podstawie chronionego tą licencją

• użytkowanie dzieła w sposób komercyjny

Na następujących warunkach:

• Uznanie Autorstwa - Dzieło należy oznaczyć w sposób określony przez Twórcęlub Licencjodawcę

6.4 Trudne początki

Jedną z pierwszych ikon, które stworzyłem była ikona Visibility-reduced-smoke-04(Rys. 12) Przysporzyła mi sporo trudności, ponieważ powstała na początku mojej zna-jomości z programem inkscape. Po kilku nieudanych próbach stworzenia jej z linii pro-stej i kilku półokręgów stwierdziłem, że najodpowiedniejszym narzędziem będą krzyweBreziera. Za ich pomocą udało mi się stworzyć estetycznie wyglądającą ikonę, jednakproces tworzenia był dość mozolny - stworzyłem kilkadziesiąt węzłów aby odpowiedniowyprofilować obiekt.

Porównując tę ikonę do już istniejącej (Rys. 14) można zauważyć, że dało się jązrobić dużo prościej. Moja składa się z kilkudziesięciu węzłów a ikona pochodzącaz wikimedii z jedenastu węzłów. Wizualnie obie wyglądają bardzo podobnie a conajważniejsze estetycznie. Porównanie tych ikon pozwala na wyciągnięcie wniosków.Znajomość posługiwania się węzłami i umiejętność ich odpowiedniego rozstawianiapod określonym kątem pozwala na stworzenie dowolnego kształtu w krótkim czasie, aco najważniejsze, zachowując precyzję. Wprawne korzystanie z linii Breizera nie tylkoskraca czas naszej pracy ale daje nieograniczone możliwości tworzenia najróżniejszychkształtów przy zachowaniu dużej dokładności.

1http://www.oss.wroc.pl/biuletyn/ebib14/nahotko.html

24

Rysunek 12: Symbol widzialności zmniejszonej przez dym (Visibility-reduced-smoke-04) [Źródło własne]

Rysunek 13: Symbol widzialności zmniejszonej przez dym w trybie edycji [Źródło wła-sne]

Rysunek 14: Visibility reduced by smoke [Źródło: http://commons.wikimedia.org]

6.5 Łączenie figur

Ikona ta (Rys. 15) powstała dzięki połączeniu trzech figur. Stwierdziłem, iż korzy-stanie z krzywych Breziera dla tego kształtu będzie zbyt czasochłonne i skomplikowane,a otrzymanie estetycznego kształtu niezwykle trudne. Symbol ten stworzyłem z 3 pół-okręgów poprzez połączenie ich zakończeń przy pomocy odpowiedniego manipulowania

25

węzłami. Ikona pochodząca z Wikimedii (Rys.16) została najprawdopodobniej zrobionaprzy pomocy krzywych Breziera. Zachowuje ona nieco lepsze proporcje od mojej (za-okrąglenia w środkowej części). Konfrontując własny projekt z już istniejącym mogęstwierdzić, że obie techniki mają swoje wady i zalety. Dzięki łączeniu obiektów bły-skawicznie możemy wykonać projekt. W tym przypadku (Rys. 15) problem pojawiasię podczas łączenia końcówek półokręgów tzn. ciężko o idealne zaokrąglenie, jednakpozostała część ikony zachowuje estetyczne krągłości. Metoda druga natomiast (Rys.16) pozwala na właściwe zaokrąglenia lecz sami musimy nadać kształt całej ikonie.Wydłuży to czas naszej pracy a przy słabej dokładności kształt może okazać się niere-gularny.

Rysunek 15: Symbol silnie rozwiniętych wirów pyłowych lub piaskowych (Dust-sand-whirl-08) [Źródło własne]

Rysunek 16: Symbol silnie rozwiniętych wirów pyłowych lub piaskowych [Źródło:http://commons.wikimedia.org].

26

6.6 Obiekty tekstowe - praktyczne wykorzystanie

Kształt pyłu zawieszonego w powietrzu (Rys. 17) mogłem stworzyć na dwa róż-ne sposoby. Wybrałem już mi znany korzystając z krzywych Breziera wzorując się naobiekcie tekstowym, literze ”S”. Gdybym jednak od samego początku posiadał wie-dzę jaką zdobyłem po ukończeniu całego projektu wybrałbym drugą metodę. Sposóbten okazuje się niezwykle prosty pod warunkiem, że wiemy jak i kiedy skorzystać zodpowiednich narzędzi programu. Polega on na stworzeniu obiektu tekstowego ”S” winteresującej nasz czcionce (kształcie) i skorzystaniu z opcji obiekt w ścieżkę. Dziękitemu zabiegowi symbol definiowany jako tekst zamienia się w obiekt definiowany przezścieżkę, którą możemy dowolnie manipulować zmieniając tym samych jego kształt wedlenaszych potrzeb. Poprzez usuwanie istniejących i wstawianie nowych węzłów możemynadać mu finalny kształt, jeżeli zdefiniowany wcześniej przez określoną czcionkę niejest zadowalający. Jak już wspomniałem, po zastosowaniu zabiegu obiekt w ścieżkę niejest on już rozpoznawany jako obiekt tekstowy, a co za tym idzie, tracimy możliwośćzmieniania czcionki na rzecz manipulacji węzłami.

Rysunek 17: Symbol pyłu zawieszonego w powietrzu (Widespread-dust-06) [Źródłowłasne].

6.7 Kontur w ścieżkę i łączenie obiektów a mieszaniestylów i proporcji

Symbol który powstał poprzez nałożenie na siebie kilku obiektów (Rys. 18). Pro-blem z łączeniem obiektów polegał na tym, że gdy chciałem połączyć dwa różne obiektystworzone w różnych stylach (wypełnienie lub jego brak, kontur lub jego brak i grubośćkontur) program ujednolicał styl i stosował jednakowy do nowo powstałego połączo-nego obiektu. W efekcie otrzymywałem ikonę o odmiennych od moich pierwotnychzałożeń proporcjach. W trakcie wykonywania pracy pojawiło się pytanie po co w ogólełączyć obiekty w jeden? Jednym z argumentów o którym wspominałem w poprzednichrozdziałach było wyrównywanie stworzonej ikony względem strony i intuicja która nie-raz podpowiadała, że finalna wersja musi być zdefiniowana jako jednolita całość a nie

27

zlepek figur. Szybko pojawiło się też rozwiązanie polegające na korzystaniu z narzę-dzia kontur w ścieżkę dzięki czemu łączenie kształtów o różnej grubości kontur stawałosię możliwe. Pytanie tylko po co to robić? Czy dokładna kalibracja obiektu względemstrony jest aż tak istotna? Jak łączenie obiektów wpływa na możliwość jego modyfi-kacji w Inkscapie i Quantum GIS ? Aby odpowiedzieć na te pytania w dalszej częścipracy poddam różnym zabiegom w programie quantum gis jak i samym inkscapie iko-ny stworzone poprzez funkcje połącz czy kontur w ścieżkę jak i te stworzone bez ichpomocy.

Rysunek 18: Symbol wichury pyłowej lub piaskowej (Duststorm-sandstorm-09) [Źródłowłasne]

6.7.1 ”Połącz” i ”kontur w ścieżkę” - test

Przeprowadziłem test na ikonie (Rys. 18) wykorzystując kombinacje 2 funkcji pro-gramu Inkscape tj. połącz i kontur w ścieżkę stosując jednocześnie różne kombinacjekonturu i wypełnienia. Celem testu jest zbadanie wpływu tych funkcji na wygląd ikonyi ich ewentualna użyteczność. Podczas testu wykonałem 12 prób (Rys. 19) użycia tychfunkcji na ikonę.

Porównując próbę 1 z próbą 2 (Rys. 19 możemy wyciągnąć wniosek iż funkcja połączpozytywnie wpłynęła na wygląd ikony ponieważ nastąpiło korzystne ułożenie elemen-tów tzn. w próbie nr. 1 wypełnienie nie zakrywa elementów strzałki a w 2 zakrywa.

Kontur w ścieżkę zastosowany w próbie 3 i 4 (Rys. 19) zadziałał tak samo napołączoną i nie połączoną ikonę. Efektem jest jednak wypełnienie różniące się od 1 i 2ponieważ pokrywa tylko namalowane elementy nie wypełniając obszaru między nimi.

Próba 5 i 6 (Rys. 19) w której zastosowałem kontur wyszła analogicznie do 1 i 2.Z kolei próba 7 i 8 (Rys. 19) zakończyła się korzystniej dla ikony z numerem 8

ponieważ według mnie wygląda ona lepiej. Połączenie elementów w próbie 7 wpłynęłona zespolenie elementów strzałki z kształtem przypominającym literę S a co za tymidzie przyczyniło się również do nieco innego rozłożenia wypełnienia.

Próba 9 i 10 (Rys. 19) została przeprowadzona z uwzględnieniem tych samychczynników co w dwóch poprzednim próbach z tymże bez wypełnienia. Jak widzimy niema żadnej różnicy pomiędzy dwiema ostatnimi ikonami.

28

Zestawienie czterech ostatnich przykładów, pozwala nam uświadomić sobie, jakfunkcja połącz wpływa na wypełnienie przy określonym konturze.

Główny wniosek z testu: jeżeli używamy kolorów a chcemy skorzystać z którejś ztestowanych funkcji dla określonego efektu lepiej korzystać tylko z funkcji kontur wścieżkę lub zamiast tego możemy łączyć ikony jeżeli efekt wizualny w postaci charak-terystycznego wypełnienia nam odpowiada.

Rysunek 19: Test funkcji połącz i kontur w ścieżkę [Źródło własne].

29

6.7.2 ”Połącz” a ”Grupowanie”

Po analizie edytora grafiki wektorowej Inkscape odnalazłem odpowiedź na pytanie”czy warto łączyć poszczególne obiekty w celu ich wyrównywania i rozmieszczania nastronie?”. Zdecydowanie NIE. Naprzeciw funkcji ”połącz” wychodzi ”grupowanie”.

Grupowanie umożliwia nam manipulowanie wszystkimi obiektami w grupie, takjak pojedynczym obiektem. Dzięki temu, możemy łączyć różne obiekty stworzone wodmiennych stylach, obok siebie lub na przykład nakładając je na siebie a następnierozmieszczać i wyrównywać względem strony z zachowaniem określonych przez nasodstępów czy proporcji. Obiekty nie rozpraszają się lub rozmieszczone w różnych miej-scach na stronie nie nakładają się na siebie tak jak to ma miejsce kiedy zaznaczymywiele osobnych obiektów naraz i skorzystamy z wyrównania. Obiekty zachowują swojeodmienne właściwości.

Kiedy zaś użyjemy funkcji ”połącz” na obiekty o różnych stylach, następuje ujed-nolicenie stylu tj. rodzaju wypełnia, grubości kontur itp..Wiąże się to z utratą charak-terystycznych dla obiektów stylów.

Rysunek 20: Porównanie funkcji połącz i grupowanie [Źródło własne]

A-obraz wyjściowy; B-Zgrupowane obiekty; C- Połączone obiekty.

30

Rozdział 7

Wykonane symbole meteorologiczne

Wykonałem 100 symboli bieżącej pogody (z ang. present weather symbols)1 (Rys.32), 10 symboli pokrywy chmur (Rys. 22) i 16 symboli prędkości wiatru (Rys. 21).

Numeracja symboli (Rys.22; Rys. 32) jest częścią SYNOP (surface synoptic observa-tions) - zakodowanej depeszy meteorologicznej zawierającej informacje o powierzchnio-wych obserwacjach meteorologicznych. Zakodowana informacja jest wysyłana ze stacjisynoptycznych automatycznych, oraz tycześnie ze stacji synoptycznych całego światajest podstawą do sporządzania większości prognoz pogody. Rozkodowana informacjananoszona jest na mapę synoptyczną (Zwieriew, 1965).h obsługiwanych przez obserwa-tora co godzinę. Depesza SYNOP zbierana prawie równocześnie ze stacji synoptycznychcałego świata jest podstawą do sporządzania większości prognoz pogody. Rozkodowanainformacja nanoszona jest na mapę synoptyczną (Zwieriew, 1965).

Rysunek 21: Symbole prędkości wiatru

[Źródło własne].

1http://www.srh.noaa.gov/jetstream/synoptic/wwsymbols.htm

31

Symbole pokrywy chmur (Rys. 22) posiadają również liczbowe oznaczenia tj. 1/8 ,2/8, 3/8, które oznaczające stopień zachmurzenia.

Rysunek 22: Symbole pokrywy chmur [Źródło własne].

0/8-bezchmurnie; 1/8-słonecznie; 2/8-mało chmur; 3/8-małe zachmurzenie;4/8-Częściowe zachmurzenie; 5/8-pochmurnie; 6/8-w większości pochmurnie;

7/8-chmury w większości zakrywające niebo; 8/8-całkowite zachmurzenie; 9/8-nieboniewidoczne lub wielkość zachmurzenia nie może być określona.

Aby logicznie przedstawić 100 (oznaczonych numerami 00-99) wykonanych symbolisłużących do opisywania aktualnego stanu pogody podzieliłem je na 9 grup:

1. Pierwsza grupa jest największa i najbardziej różnorodna (Rys. 23). Przedstawiasymbole związane z widocznością i występowaniem chmur oraz takie zjawiskapogodowe jak opad, grzmot, nawałnica i trąba powietrzna.

2. Druga grupa (Rys. 24) przedstawia symbole zjawisk pogodowych które miałymiejsce w ciągu ostatniej godziny i nie występują w momencie obserwacji.

3. Trzecia grupa (Rys. 25) przedstawia symbole wichury i zamieci o różnej inten-sywności występowania.

4. Czwarta grupa (Rys. 26) przedstawia symbole różnych rodzajów mgły.

5. Piąta grupa (Rys. 27) przedstawia symbole mżawki o różnej intensywności opa-dania.

6. Szósta grupa (Rys. 28) to symbole deszczu i deszczu ze śniegiem o różnej inten-sywności opadania.

7. Siódma grupa (Rys. 29) to symbole charakteryzujące opad śniegu.

8. Ósmą grupę (Rys. 30) tworzą symbole przelotnych opadów deszczu, deszczu ześniegiem, śniegu, krup lodowych i gradu.

9. Dziewiąta grupa (Rys. 31) to symbole zjawiska meteorologicznego zwanego burzą.

32

Rysunek 23: Symbole związane z widocznością oraz opad, grzmot, nawałnica i trąbapowietrzna [Źródło własne].

00-niebo bezchmurne; 01-chmury na ogół zanikają lub stają się cieńsze; 02-stan niebana ogół bez zmian; 03-chmury w stanie tworzenia lub rozwoju; 04-widzialność

zmniejszona przez dym; 05-zmętnienie; 06-pył zawieszony w powietrzu nie wzniesionyprzez wiatr na stacji lub w jej pobliżu w czasie obserwacji; 07-pył lub piasek

wzniesiony przez wiatr w czasie obserwacji, na stacji lub w jej pobliżu, lecz bezwyraźnych wirów pyłowych lub piaskowych czy też wichury pyłowej lub piaskowej;08-silnie rozwinięte wiry pyłowe lub pisakowe obserwowane na stacji lub w pobliżu

stacji w czasie obserwacji lub w ciągu ostatniej godziny, lecz nie wichura pyłowa lubpiaskowa; 09-wichura pyłowa lub piaskowa w zasięgu widzenia w czasie obserwacji lubna stacji w ciągu ostatniej godziny; 10-zamglenie; 11-cienka warstwa mgły lub mgły

lodowej na stacji, do 2 m na lądzie lub do 10m na morzu - w płatach; 12-cienkawarstwa mgły lub mgły lodowej na stacji do 2 m na lądzie lub do 10 m na morzu -mniej lub bardziej ciągła; 13-widoczna błyskawica, nie słychać grzmotu; 14-opad wpolu widzenia nie sięgający gruntu lub powierzchni morza; 15-opad w polu widzenia

sięgający gruntu lub powierzchni morza, lecz w większej odległości od stacji (ponad 5km); 16-opad w polu widzenia sięgający gruntu lub powierzchni morza w pobliżustacji, lecz nie na stacji; 17-grzmot w czasie obserwacji, ale bez opadu na stacji;

18-nawałnica na stacji lub w polu widzenia w czasie obserwacji lub w ciągu ostatniejgodziny; 19-trąba powietrzna.

33

Rysunek 24: Symbole zjawisk pogodowych zakończonych w ciągu ostatniej godziny[Źródło własne].

20-opad mżawki (nie marznącej) zakończony w ciągu ostatniej godziny; 21-opaddeszczu(nie marznącego)zakończony w ciągu ostatniej godziny; 22-opad śnieguzakończony w ciągu ostatniej godziny; 23-opad deszczu ze śniegiem lub deszczulodowego zakończony w ciągu ostatniej godziny; 24-opad mżawki marznącej lubdeszczu marznącego zakończony w ciągu ostatniej godziny; 25-opad przelotnego

deszczu zakończony w ciągu ostatniej godziny; 26-opad przelotnego śnieguzakończony w ciągu ostatniej godziny; 27-opad przelotnego gradu zakończony w ciąguostatniej godziny; 28- mgła lub mgła lodowa zakończona w ciągu ostatniej godziny ;

29-burza zakończona w ciągu ostatniej godziny.

Rysunek 25: Symbole wichury i zamieci [Źródło własne].

30-słaba lub umiarkowana wichura pyłowa lub pisakowa o zmniejszającej sięintensywności; 31-słaba lub umiarkowana wichura pyłowa o niezmieniającej się

intensywności; 32-słaba lub umiarkowana wichura pyłowa lub piaskowa ozwiększającej się intensywności; 33-silna wichura pyłowa lub piaskowa ozmniejszającej się intensywności; 34-silna wichura pyłowa lub piaskowa oniezmieniającej się intensywności; 35-silna wichura pyłowa lub piaskowa o

zwiększającej się intensywności; 36-słaba lub umiarkowana zamieć śnieżna niska;37-silna zamieć śnieżna niska; 38-słaba lub umiarkowana zamieć śnieżna wysoka;

39-silna zamieć śnieżna wysoka.

34

Rysunek 26: Symbole mgły [Źródło własne].

40-mgła (mgła lodowa) w pewnej odległości od stacji; 41-mgła (mgła lodowa) wpłatach; 42-mgła (mgła lodowa), niebo widoczne, staje się rzadsza; 43-mgła (mgła

lodowa), niebo niewidoczne, staje się rzadsza; 44-mgła (mgła lodowa), niebowidoczne, bez zmian w ciągu ostatniej godziny; 45-mgła (mgła lodowa), niebo

niewidoczne, bez zmian w ciągu ostatniej godziny; 46-mgła (mgła lodowa), niebowidoczne, gęstnieje; 47-mgła (mgła lodowa), niebo niewidoczne, gęstnieje; 48-mgłaosadzająca szadź, niebo widoczne; 49-mgła osadzająca szadź, niebo niewidoczne.

Rysunek 27: Symbole mżawki [Źródło własne].

50-słaba, niemarznąca mżawka z przerwami; 51-słaba, niemarznąca, ciągła mżawka;52-umiarkowana, niemarznąca mżawka z przerwami; 53-umiarkowana, niemarznąca,ciągła mżawka; 54-intensywna, niemarznąca mżawka z przerwami, 55-intensywna,

niemarznąca, ciągła mżawka, 56-słaba marznąca mżawka; 57-umiarkowana lub silnamarznąca mżawka; 58-słaba mżawka z deszczem; 59-umiarkowana lub silna mżawka z

deszczem.

Rysunek 28: Symbole deszczu i deszczu ze śniegiem [Źródło własne].

60-niemarznący, słaby deszcz z przerwami; 61-niemarznący, słaby, ciągły deszcz;62-niemarznący, umiarkowany deszcz z przerwami; 63-niemarznący, umiarkowany,

ciągły deszcz; 64-niemarznący, silny deszcz z przerwami; 65-niemarznący, silny, ciągłydeszcz; 66-słaby marznący deszcz; 67-umiarkowany lub silny marznący deszcz;

68-słaby deszcz ze śniegiem; 69-umiarkowany lub silny deszcz ze śniegiem.

35

Rysunek 29: Symbole śniegu [Źródło własne].

70-słaby śnieg z przerwami; 71-słaby, ciągły śnieg; 72-umiarkowany śnieg zprzerwami; 73-umiarkowany, ciągły śnieg; 74-silny śnieg z przerwami; 75-silny, ciągłyśnieg; 76-słupki lodowe; 77-śnieg ziarnisty; 78-oddzielne gwiazdki śniegu; 79-ziarna

lodowe lub deszcz lodowy.

Rysunek 30: Symbole przelotnych opadów [Źródło własne].

80-słaby przelotny deszcz; 81-umiarkowany lub silny przelotny deszcz; 82-gwałtownyprzelotny deszcz; 83-słaby przelotny deszcz ze śniegiem; 84-umiarkowany lub silnyprzelotny deszcz ze śniegiem; 85-słaby przelotny śnieg; 86-umiarkowany lub silnyprzelotny śnieg; 87-słabe przelotne krupy lodowe lub śnieżne; 88-umiarkowane lub

silne, przelotne krupy lodowe lub śnieżne; 89-słaby przelotny grad; 90-umiarkowanylub silny przelotny grad.

Rysunek 31: Symbole burzy [Źródło własne].

91-burza w ciągu ostatniej godziny, w czasie obserwacji lekki deszcz; 92-burza w ciąguostatniej godziny, w czasie obserwacji umiarkowany lub silny deszcz; 93-burza w ciąguostatniej godziny, w czasie obserwacji lekki śnieg lub deszcz ze śniegiem; 94-burza w

ciągu ostatniej godziny, w czasie obserwacji umiarkowany lub silny śnieg lub deszcz ześniegiem; 95-lekka lub umiarkowana burza w czasie obserwacji; 96-lekka lub

umiarkowana burza z gradem w czasie obserwacji; 97-silna burza; 98-silna burza zwichurą pyłową lub piaskową; 99-silna burza z gradem.

36

Rysunek 32: 100 Symboli służących do opisu aktualnego stanu pogody

[Źródło własne]

37

Rozdział 8

Wykorzystanie opracowanym symboliw programie Quantum GIS

Quantum GIS (QGIS) jest przyjaznym dla użytkownika oprogramowaniem GISopen source udostępniony na licencji GNU General Public License. Jest kompatybilnyz systemami:

• Linux

• Mac OS

• Unix

• Windows

Program powstał w 2002 roku jednak pierwsza stabilna wersja ”1.0” pojawiła się w2009 roku. Quantum GIS pozwala na wyświetlanie, edycję, przeglądanie, tworzenie da-nych wektorowych i rastrowych w różnych formatach. Jest zintegrowany z systememGRASS (Geographic Resources Analysis Support System) co daje możliwość wykony-wania zaawansowanych analiz. Umożliwia wyświetlanie warstw: OGC, WMS i WFS.

Funkcjonalność Quantum gis można zwiększać dodając lub tworząc różnego ro-dzaju wtyczki. Można nimi zarządzać poprzez menadżer wtyczek. Program posiadaciekawe wbudowane wtyczki służące na przykład do przesyłania tras z urządzeń GPSczy kalibracji rastra.

QGIS jest wykorzystywany na całym świecie przez samorządy, jednostki rządo-we, uniwersytety, studentów oraz wielu innych użytkowników do wielu różnych celów,zaczynając od wyświetlania danych rastrowych i wektorowych a kończąc na zaawanso-wanych, kompleksowych analizach dzięki wykorzystaniu modułu GRASS-a.

38

Rysunek 33: Rozwój QGis na przestrzeni lat 2002-2011 [Źródło: http://www.qgis.org]

Na lipiec 2013 r. planowane jest wydanie nowej wersji programu ”2.0”. Z tego wzglę-du umieściłem na liście dyskusyjnej QGIS-developer zapytanie do twórców programuczy byliby zainteresowani wydaniem wersji 2.0 wraz z moją biblioteką ikon meteorolo-gicznych. Otrzymałem odpowiedź, iż będzie to możliwe wraz z pojawieniem się wersji2.1 . Dzięki temu będzie miał do nich dostęp każdy użytkownik QGIS a co za tym idziemoje ikony trafią do użytkowników z różnych zakątków świata.

Quantum GIS bez problemu rozpoznał wszystkie ikony które umieściłem w folde-rze programu zawierającym pliki SVG. Kolejną częścią była prezentacja wybranychsymboli na mapie (Rys. 34; Rys. 35).

39

Rysunek 34: Przykładowy rozkład intensywności opadu deszczu na terenie Polski [Źró-dło: dane rastrowe z http://www.gadm.org/].

Rysunek 35: Przykładowy rozkład kierunku i prędkości wiatru na terenie Polski

[Źródło: dane rastrowe z http://www.gadm.org/].

40

Rozdział 9

Podsumowanie

Celem pracy było stworzenie biblioteki symboli meteorologicznych w formacie SVG.Stworzona biblioteka została udostępnioną w repozytorium 1 a wkrótce zostanie wy-dana z wersją 2.1 programu Quantum GIS.

Cel został osiągnięty a wyniki przeprowadzonych porównań i testów na potrzebypracy będą źródłem informacji dla przyszłych twórców grafiki wektorowej.

Wnioski:

1. Format grafiki wektorowej SVG jest obsługiwany coraz lepiej przez znane prze-glądarki internetowe.

2. Grafika wektorowa, dzięki skalowalności wynikającej z jej matematycznego opisu,doskonale nadaje się do tworzenia symboli.

3. Środowisko programu Inkscape jest niezwykle przyjazne dla użytkownika. Dziękiniemu, każdy może stać się twórcą grafiki wektorowej bez szczegółowej wiedzy natemat języków programowania.

4. Wiedza na temat praktycznego zastosowania narzędzi programu Inkscape i różnicmiędzy nimi ułatwia proces tworzenia i czyni go świadomym.

5. Zastosowanie porównań własnego projektu, do już istniejących zasobów grafikiwektorowej, pozwala krytycznie spojrzeć na własną pracę oraz dostarcza argu-mentów na potwierdzenie słuszności wybranej metody tworzenia.

6. Nazewnictwo i metadane ikon przyspieszają proces wyszukiwania właściwej ikony.

1http://trac.osgeo.org/osgeo/browser/graphics/trunk/map-icons

41

Bibliografia

1. Krzysztof Cieśla, Inkscape. Podstawowa obsługa programu, Wydawnictwo Helion,Gliwice 2013

2. Krzysztof Kożuchowski,Meteorologia i klimatologia, Wydawnictwo Naukowe PWN,Warszawa 2012

3. Siergiej Anatoljewicz Zwieriew, Meteorologia synoptyczna, Wydawnictwo Komu-nikacji i Łączności, Warszawa 1965

4. Andrzej Jurzec,Wykorzystanie formatu SVG w systemach informacji przestrzen-nej, praca magisterska, Politechnika Krakowska 2009

5. Specyfikacja SVG 1.1 http://www.w3.org/TR/SVG11

6. Wikipedia http://en.wikipedia.org

7. Wikimedia http://www.wikimedia.org/

8. Strona domowa Uniwersytetu w Koloni http://www.uni-koeln.de/

9. Strona z zakresu edukacji przyrodniczej http://www.eduscience.pl/

10. Strona dotycząca języka XML http://www.w3schools.com/

11. Strona Domowa Quantum Gis http://www.qgis.org

12. Strona domowa Inkscape http://www.inkscape.org/

13. Kalkulator jednostek, definicje http://taat.pl/

14. Storna domowa państwowego serwisu pogodowego USA http://www.srh.noaa.gov/

15. Dane rastrowe http://www.gadm.org/

16. Metadane http://www.oss.wroc.pl/biuletyn/ebib14/nahotko.html

17. Obsługa formatu SVG http://codedread.com

42

Spis rysunków

1 Pikselizacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Raster i wektor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

3 Mapa synoptyczna z roku 1874 . . . . . . . . . . . . . . . . . . . . . . . . 64 Mapa z zasobów uniwersytetu w Koloni . . . . . . . . . . . . . . . . . . . 7

5 Przykładowy dokument XML . . . . . . . . . . . . . . . . . . . . . . . . . 96 Przykładowy dokument XML z elementem SVG . . . . . . . . . . . . . . . 117 Przykład użycia elementu circle . . . . . . . . . . . . . . . . . . . . . . . . 138 Przykład użycia elementu rect . . . . . . . . . . . . . . . . . . . . . . . . . 149 Kompatybilność SVG z wybranymi programami i wtyczkami 2009 r. . . . . 1610 Kompatybilność SVG z wybranymi programami i wtyczkami 2011 r. . . . . 17

11 Inkscape - zrzut ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

12 Symbol widzialności zmniejszonej przez dym . . . . . . . . . . . . . . . . . 2513 Symbol widzialności zmniejszonej przez dym w trybie edycji . . . . . . . . 2514 Symbol widzialności zmniejszonej przez dym w trybie edycji . . . . . . . . 2515 Symbol silnie rozwiniętych wirów pyłowych lub piaskowych . . . . . . . . . 2616 Symbol silnie rozwiniętych wirów pyłowych lub piaskowych . . . . . . . . . 2617 Symbol pyłu zawieszonego w powietrzu . . . . . . . . . . . . . . . . . . . . 2718 Symbol wichury pyłowej lub piaskowej . . . . . . . . . . . . . . . . . . . . 2819 Test funkcji połącz i kontur w ścieżkę . . . . . . . . . . . . . . . . . . . . . 2920 Porównanie funkcji połącz i grupowanie . . . . . . . . . . . . . . . . . . . . 30

21 Symbole prędkości wiatru . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122 Symbole pokrywy chmur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3223 Symbole związane z widocznością, występowaniem chmur oraz opad, grzmot,

nawałnica i trąba powietrzna . . . . . . . . . . . . . . . . . . . . . . . . . 3324 Symbole zjawisk pogodowych zakończonych w ciągu ostatniej godziny . . . 3425 Symbole wichury i zamieci . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

43

26 Symbole mgły . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3527 Symbole mżawki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3528 Symbole deszczu i deszczu ze śniegiem . . . . . . . . . . . . . . . . . . . . 3529 Symbole śniegu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3630 Symbole przelotnych opadów . . . . . . . . . . . . . . . . . . . . . . . . . 3631 Symbole burzy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3632 100 Symboli służących do opisu aktualnego stanu pogody . . . . . . . . . . 37

33 Rozwój programu Quantum GIS na przestrzeni lat 2002-2011 . . . . . . . 3934 Rozkład intensywności opadu deszczu na terenie Polski . . . . . . . . . . . 4035 Rozkład kierunku i prędkości wiatru na terenie Polski . . . . . . . . . . . . 40

44