Lekcja 3. path, część 1: pióro i linia proste

M, L, H, V, Z — i różnica, która myli wszystkich

Poprzednia lekcja skończyła się tam, gdzie kończą się kształty podstawowe. Teraz zaczyna się path — znacznik, który potrafi wszystko, co tamte, plus całą resztę.

Cała jego moc siedzi w jednym atrybucie:

html

<path d="M 30 110 L 70 40 H 170 V 110 Z"/>

To wygląda jak szyfr, a jest zwykłym ciągiem poleceń dla pióra. Litera to komenda, liczby po niej to argumenty. Pióro wykonuje je po kolei, jedno po drugim, dokładnie tak, jak rysowałbyś ręką: postaw tutaj, pociągnij tam, teraz w bok, teraz w dół, zamknij.

Nauczenie się d to nie kwestia pamięci. To kwestia zrozumienia, że pióro ma pozycję i każda komenda ją zmienia.

M — postaw pióro

M 30 110

Move to. Przenosi pióro w podany punkt bez rysowania. Każda ścieżka musi zaczynać się od M, bo inaczej pióro nie wie, skąd wystartować.

M może pojawić się także w środku ścieżki — wtedy przerywa linię i zaczyna nowy fragment w innym miejscu. Jeden path może więc zawierać kilka rozłącznych kształtów, i to jest podstawa ikon złożonych z kilku elementów.

L — pociągnij linię

L 70 40

Line to. Rysuje odcinek od bieżącej pozycji do podanego punktu i zostawia tam pióro. Ta druga część jest kluczowa: kolejna komenda liczy się już od nowego miejsca.

H i V — skróty na poziom i pion

H 170
V 110

Horizontal i Vertical. Przyjmują jedną liczbę, bo druga współrzędna zostaje bez zmian. H 170 przesuwa pióro poziomo do x równego 170, zachowując dotychczasowe y. V 110 odwrotnie.

To nie są komendy „na ozdobę" — pilnują, żeby linia była idealnie prosta. Przy ręcznym wpisywaniu L 170 40 łatwo się pomylić o jeden piksel i dostać ledwo widoczny skos.

Z — zamknij

Z

Close path. Rysuje odcinek z powrotem do punktu startowego i domyka kontur. Nie przyjmuje żadnych argumentów.

Można by ten odcinek dopisać ręcznie przez L — ale nie warto. Z domyka kształt prawidłowym połączeniem narożnika, a ręcznie dorysowana linia zostawia w tym miejscu dwa nachodzące na siebie zakończenia. Przy cienkim obrysie różnicy nie widać, przy grubym widać ją od razu.

Czarna kropka to punkt startowy z M, niebieskie to kolejne pozycje pióra. Pociągnij suwak H i zobacz, że pionowa współrzędna trzeciej kropki się nie rusza. Potem V — nie rusza się pozioma.

Wielka litera czy mała

I tu dochodzimy do rzeczy, która myli absolutnie każdego na początku.

Każda komenda ma dwie wersje. Wielka litera podaje współrzędne bezwzględne — miejsce na płótnie, liczone od punktu 0,0. Mała litera podaje przesunięcie — o ile ruszyć się względem miejsca, w którym pióro właśnie stoi.

L 50 70    →  idź do punktu (50, 70)
l 50 70    →  przesuń się o 50 w prawo i 70 w dół

Te same liczby, zupełnie inny efekt. Najlepiej widać to przy powtórzeniu tej samej komendy.

Po lewej L 50 70 trzy razy pod rząd — i widać tylko jeden odcinek, bo za drugim razem pióro jest już na miejscu i nie ma dokąd iść. Po prawej l 30 -25 trzy razy pod rząd rysuje schodki, bo każdy krok liczy się od nowa.

Kiedy używać której? Wersje bezwzględne są czytelniejsze i łatwiej je poprawiać punktowo — zmieniasz jedną liczbę i zmienia się jeden punkt. Wersje względne są krótsze, więc lubią je optymalizatory, i lepiej nadają się do powtarzalnych wzorów w rodzaju zębatki albo schodków. Pisząc ręcznie, trzymaj się wielkich liter. Małe rozpoznasz w cudzym kodzie i w plikach wypluwanych przez Illustratora.

Trzy skróty składniowe

Kod ze SVG eksportowanych z narzędzi bywa nieczytelny nie dlatego, że robi coś skomplikowanego, tylko dlatego, że korzysta ze skrótów.

Powtórzona komenda znika. Po L można podawać kolejne pary współrzędnych bez powtarzania litery: L 10 10 20 20 30 30to trzy odcinki. Dotyczy to każdej komendy.

Separator jest dowolny. Przecinki, spacje i ich brak są równoważne. M30,110L70,40 znaczy dokładnie to samo co zapis z lekcji, tylko czyta się gorzej.

Zero przed przecinkiem bywa pomijane. l.5-.5 to poprawne l 0.5 -0.5. To jest ta rzecz, przez którą zoptymalizowana ścieżka wygląda jak przypadkowy ciąg znaków.

Nic z tego nie zmienia znaczenia — a wiedząc o tym, przestajesz się bać cudzych plików.

Podsumowanie

• d to ciąg poleceń dla pióra, które ma pozycję i pamięta ją między komendami.
• M stawia pióro bez rysowania; w środku ścieżki zaczyna nowy, rozłączny fragment.
• L rysuje odcinek, H i V to jego skróty na poziom i pion.
• Z domyka kontur i robi to lepiej niż ręcznie dorysowany odcinek.
• Wielkie litery to punkty na płótnie, małe to przesunięcia od bieżącej pozycji.
• Powtórzoną literę komendy można pominąć, a separatory są dowolne — stąd nieczytelność zoptymalizowanych ścieżek.

W następnej lekcji pióro przestaje chodzić po liniach prostych. Wchodzą krzywe Béziera i punkty kontrolne, które przyciągają linię, choć same na niej nie leżą.

Do wypróbowania: w presecie path · linie zamień Z na L 30 110. Kształt będzie wyglądał identycznie — dopóki nie zwiększysz stroke-width do 12. Wtedy zobaczysz, czym różni się domknięty narożnik od dwóch stykających się końcówek.