W grafice wektorowej SVG ścieżka to podstawa podczas tworzenia niestandardowych figur jak również ruchu w animacjach. Ich idea opiera się na zapisaniu listy poleceń złożonych z nazwy polecenia i podania dodatkowych argumentów. Podczas bardziej skomplikowanych rysunków nie jest to proste, więc zaleca się używanie edytorów grafiki wektorowej. Niemniej znajomość poszczególnych poleceń może pomóc podczas dokonywanie korekty wygenerowanego kodu.
Ścieżke deklaruje się w obiekcie path. Listę poleceń należy wtedy zapisać w atrybucie d. Polecenia są to pojedyncze znaki po których następują dwie liczby rozdzielone znakiem spacji. Polecenia występują w dwóch wersjach. Duży znak opisuje pozycję absolutną polecenia, a mały pozycję względną. Poniżej zostało opisane kilka podstawowych poleceń:
Polecenie moveto jest oznaczane przez literę "M". Polecenie to powoduje podniesienie "pisaka" z jego aktualnej pozycji i przesunięcia go do nowej wskazanej przez programistę. Każda nowa ścieżka musi się rozpoczynać od tego polecania. W przypadku wykorzystania jej poza pozycję początkową będzie oznaczać rozpoczęcie nowej ścieżki. Przykładowo zapis "M50 50" przesunie pisak na pozycję (50, 50), a zapis "m50 50" przesunie pisak o wektor (50, 50). Dokładne różnice zostaną wyjaśnione dalej.
Rysowanie linii odbywa się poprzez literę "L". Polecenie to powoduje przesunięcie pisaka na określoną opzycję z opuszczonym pisakiem co powoduje, że zostaje narysowana linia. Tak samo jak w przypadku przekładania pisaka na konkretną pozycję linię można narysować przesuwając o pewien wektor jeśli zastosuje się polecenie "l". Przykładowo w celu narysowania linii do pozycji (100, 100) należy wpisać "L100 100".
Polecenie zakończenia ścieżki powoduje narysowanie proste linii pomiędzy aktualną pozycją rysowania, a pozycją początkową. W tym przypadku oznaczenia "Z" i "z" niczym się nie różnią. Polecenie to nie przyjmuje dodatkowych parametrów.
Przy pomocy poznanych poleceń spróbujmy narysować prostą linię z pozycji (5, 5) do (95, 95).
Zadeklarowana ścieżka ma następującą listę poleceń:
Trochę bardziej złożonym przypadkiem jest narysowanie kwadratu. Warto jednak zauważyć, że wystarczy narysować 3 linię, a ostatnią linię narysować poleceniem "Z".
W obu przypadkach zostały zastosowanie polecenia pisane z wielkiej litery. Oznacza to, że wartości podane po nazwie polecenia są wartościami absolutnymi. Przypuśćmy, że tym razem kwadrat miałby rozpoczynać się w punkcie (0, 0). Zmiana wartości początkowej przy poleceniu "M" wyświetli:
Jest to problem spowodowany poprzez zastosowanie wartości absolutnych. Wszystkie polecenia "L" należy teraz zastąpić liniami względnymi "l". Powoduje to lekką modyfikację w kodzie jak poniżej:
Polecenia absolutne można mieszać razem względnymi. Przykładowo w celu narysowania linii biegnącej od pewnego punktu początkowo w prawo o 20, a potem do punktu (0, 0), a potem w prawo o 50 można zapisać następująco:
W podanym przykładzie spróbuj zmienić pozycję początkową pisaka "M" i zaobserwuj jak zmienia się rysunek.
Przydatnymi poleceniami mogą okazać się "H" oraz "V". Pierwsze z nich rysuje poziomą kreskę pomiędzy dwoma punktami, a druga pionową kreskę pomiędzy dwoma punktami. Początkiem zaczepienie odcinka jest pozycja pisaka przed wywołanie polecenia.
Przykładowo powtórzony pierwszy przykład z linią, ale tym razem zamiast polecenia "L" zostanie wstawione "h" to otrzymamy czerwoną linię, a w przypadku zamiany na "v" to otrzymamy linię zieloną.
Istnieje jeszcze wiele różnych poleceń, które zostaną opisane w drugiej części artykułu. Podstawowe polecenia miały za zadanie pokazać różnicę pomiędzy wartościami absolutnymi i względnymi oraz przedstawić sposób zapisywania ścieżki. Wykonaj zadania zamieszczone poniżej, aby utrwalić materiał.
Narysuj, wykorzystując poznane polecenia, pomarańczowy trójkąt równoboczny o podstawie a = 100. Następnie skopiuj kod napisanej ścieżki i umieść obok identyczny, ale niebieski trójkąt. Efekt końcowy powinien być następujący:
Narysuj poniższe schodki przy pomocy poleceń "H", "V". Bok najkrótszego odcinka wynosi 25.
