SVG (ang. Scalable Vector Graphics) jest to format, który pozwala na przechowywanie grafiki wektorowej. Jego zaletą jest przynależność do rodziny XML. Oznacza to, że jego obiekty tworzy się w bardzo podobny sposób jak kod strony HTML. Ponadto warto nadmienić, że grafika wektorowa jest rekomendowana i obecnie wspierana przez wszystkie przeglądarki. Tego typu format zapisu nadaje się do tworzenia wykresów, schematów, ale nie zdjęć lub obrazków zawierających mnóstwo różnych kolorów.
Do tworzenia grafiki wektorowej można wykorzystać gotowe narzędzie takie jak Inkspace. Jednak w celu zrozumienia konceptu formatu SVG, jego zapisu i ograniczeń warto rozpocząć naukę używając... zwykłego notatnika. Choć brzmi to mało realnie prawda jest taka, że pierwszy obrazek można stworzyć przy pomocy nawet zwykłego notatnika. Jednak zalecane jest użycie bardziej zaawansowanego edytora tekstu.
Każdy, prawidłowy plik SVG musi rozpocząć się od deklaracji. Dzięki temu dowolny edytor lub przeglądarka są w stanie określić co aktualnie rozpoznają. Przykładowo znacznik <svg> bez atrybutu xmlns byłby wyświetlony jako nierozpoznany plik XML. Przykładowa prawidłowo deklaracja pliku SVG wygląda następująco:
(1.) Deklaracja zawartości formatu SVG i określenie jego rozmiaru. (3.) Zamknięcie znacznika SVG. Tak samo jak w przypadku HTML istnieją znaczniki, których nie trzeba zamykać, ale wymagają na końcu />. Jeśli jakiś znacznik nie zostanie poprawnie zamknięty obrazek może nie wyświetlać się prawidłowo. Podany plik należy zapisać jako plik o dowolnej nazwie i rozszerzenie *.svg.
Linię można narysować przy pomocy znacznika line. Do prawidłowego wyświetlenia linii należy podać cztery argumenty x1 i y1, które określą w którym miejscu jest początek liniioraz x2, y2, które określą gdzie rysowana linia się kończy. Nie istnieje potrzeba podawania jednostki wpisywanych wartości. Domyślnie są to piksele "px". Przykładowo linie reprezentuje poniższy kod:
Kod rysuje linię zaczepioną w lewy górnym rogu, która będzie biec do prawego dolnego rogu. Dodatkowym argumentem, który został dopisany jest stroke. Określa ona kolor linii, a w przypadku innych obiektów wektorowych - ich kolor obramowania. Powyższy kod należy wstawić zamiast trzech kropek w przedstawionej wcześniej deklaracji. Plik zapisać, a następnie otworzyć np. przy pomocy przeglądarki lub innego programu graficznego, który wspiera tego typu format. Pierwszy obrazek "narysowany pisaniem" wygląda następująco:
Obrazek choć nie jest imponujący pozwala zauważyć jak określa się pozycję obiektów w formacie SVG. Od powszechnie używanego układu kartezjańskiego wartości Y rosną w dół, a nie do góry. Układ współrzędnych dla formatu SVG wygląda następująco:
W celu sprawdzenia czy dobrze zrozumiało się układ współrzędnych warto narysować kwadrat o boku 100 tak jak przedstawia to poniższy obrazek:
Początkowo odgadnięcie punktów na płaszczyźnie może być problematyczne jednak bardzo ważne jest dokładne opanowanie go, ponieważ bardzo ułatwi to pracę podczas pisania pliku. W przypadku edytora graficznego taka wiedza również się przydaje, ponieważ bardzo często obiekty łatwiej ustawić ręcznie niż przy pomocy przeciągania.
Styl obiektów SVG można ustalić przy pomocy CSS. Do każdego obiektu można dodać argument style razem z odpowiednimi wartościami. Do tej pory został przedstawiony argument stylu stroke, który pozwala określić kolor obramowania (lub linii). Dodatkowo można określi stroke-width, który określi grubość obramowania. Należy pamiętać, że w przypadku podawania grubości należy podać jednostkę, ponieważ nie jest już ona domyślnie określona.
Poniższe ćwiczenia mają za zadanie pomóc opanować rysowanie linii ustalania ich stylu. Postaraj się uzyskać efekt jak najbliższy do przedstawionych poniżej. Ze względu na brak konkretnych długości obiektów proporcje mogą zostać delikatnie zachwiane.
W celu sprawdzenia kodu dowolnego rysunku wystarczy zapisać obrazek np. na pulpicie i otworzyć w edytorze tekstu.
