"Panie, jak oni robią tę matematykę?" Cz.2

SVG (Scalable Vector Graphics) jest formatem lub technologią opartą na języku XML, który pozwala na stronie internetowej zamieszczać dwuwymiarową grafikę wektorową. Pozwala także definiować wypełnienia kształtów, gradienty, filtry efektów, transformacje oraz animacje, używając zaledwie kilku znaczników. Chociaż SVG nie supportuje efektów 3D, które są włączone w CSS3, to dostarcza wielu innych możliwości symulowania zachowania się takich obiektów. Można w nim łatwo tworzyć dowolne wielokąty, obrysy złożone z krzywych Beziera drugiego i trzeciego stopnia (nie są dostępne w CSS3), albo z fragmentów łuków elipsy. SVG jest także formatem graficznym dla obrazków, który jest lepszy w wielu aspektach od klasycznego PNG (Portable Network Graphics).

Format SVG przynosi stronom internetowym rozliczne benefity, wśród którym można wymienić brak degradacji kształtów i ostrości przy dowolnym skalowaniu (rozdzielczości, aspekcie ekranu), bardzo dobry współczynnik kompresji, brak utraty jakości w renderowaniu tekstów, oparty na XML format wymiany danych (export/import). Można używać jednego dokumentu SVG dla różnych rozdzielczości, jak powiedzmy dla ekranu w komputerze i w telefonie. Jest wprost idealny do tworzenia map, planów pomieszczeń, wykresów, schematów, szkiców inżynierskich, wzorów chemicznych, znaków firmowych, a nawet dość złożonych rysunków. Można go znaleźć zarówno w aplikacjach CAD, Google maps jak i aplikacjach naukowych. Jest w Adobe Illustratorze, Photoshopie, Corelu, Inkscapie, Sketchu, Amayi. Powiedzmy też, że można do tego formatu zrzucić własnym sumptem zrobione wykresy funkcji, wykonane programem obliczenia, nawet tak skomplikowane jak dla rozmaitości Calabi Yau i to powinno wystarczyć za jakąkolwiek dalszą rekomendację (np. takie jak w pierwszej części).

Zasadniczo SVG jest supportowany we współczesnych przeglądarkach, a także w IE8+ orazs Androidzie 2.4+. Jeśli przeglądarka nie supportuje kodu SVG, to zastępuje go plik PNG. Można to zauważyć przeglądając zasoby graficzne Wikipedii, która jest przygotowana na takie ewentualności i ma wbudowany konwerter na format PNG.

Jest wiele sposobów odwoływania się do dokumentów SVG ze stron HTML. Na przykład możemy zanurzać je bezpośrednio w stronie za pomocą znacznika <svg>...</svg>. Alternatywnie można użyć znaczników <embed>, <object>, a nawet zwykłego <img>. Można otoczyć linkiem miniaturkę obrazka w formacie JPG lub PNG, by po kliknięciu w niego otworzył się samodzielny dokument SVG. Wreszcie można przekonwertować SVG do danych w formacie Base64. Jest to jeden ze sposobów umieszczania obrazków w stronach WWW, które są wtedy reprezentowane przez blok tekstu jak w starożytnym pocztowym MIME type. Wyglądać to może tak:

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data] ">
...litery i cyfry bez spacji i innych dzikich znaków...
</object>

Tu można zobaczyć przykład tego fenomenu: http://jsfiddle.net/Lsr4s/ Jeśli w tego rodzaju kodowaniu dostrzeżemy znaki inne niż wspomniałem, to najprawdopodobniej ktoś próbuje jakiegoś exploita, choć współcześnie ma szansę tylko z wyjątkowo buracką konfiguracją i programami wystruganymi z rzodkiewki.

Pamiętajmy, że bawimy się z grafiką 2D. Chociaż SVG nie posiada explicite z-indeksu (czyli głębi, warstw), można za takowy uznać kolejność elementów umieszczonych w dokumencie. Zmieniając kolejność elementów w SVG wpływamy na to, co wyświetla się w stronie HTML, czyli można w ten sposób dokonywać prostych animacji, albo sztuczek udających przestrzeń.

SVG zawiera wiele predefiniowanych elementów (znaczników), z którym możemy korzystać bezpośrednio. Wśród nich są: odcinki prostych <line>, prostokąty <rect>, okręgi <circ>, elipsy <ellipse>, łuki, kwadratowe i kubiczne krzywe Beziera <path>, wielokąty <polygon>, łamane <polyline> itd. W zasadzie za pomocą elementu <path> można tworzyć wszystkie dowolnie złożone kształty 2D, gdyż jest on niebywale elastyczny. Później zobaczymy w jaki skuteczny sposób koduje się w nim informację o obrysach. Z kolei gradienty, czyli cieniowania i kolorowania wewnątrz obrysów, można tworzyć poprzez umieszczenie elementu <defs> przed narysowaniem kształtu lub użyciem <path>. Wtedy elegancko "ustawia się" najbardziej pożądany styl dla dalszych elementów. W celu jeszcze bardziej precyzyjnego powiązania, w elemencie <defs> można użyć elementu <pattern> (wzorzec kolorowania), <clipPath> (czyli ścieżka przycinania), albo <mask> (ścieżka maskowania), lub też <linearGradient>, <radialGradient>. Te dwa ostatnie mają jeszcze wewnątrz elementy <stop>. Są one bardzo łatwe do użycia w każdym elemencie za pomocą odpowiedniej składni. Wrócę do tego w przykładach na końcu cyklu.

SVG pozwala używać różne efekty transformujące obrazek lub jego fragmenty, jak przesunięcie, obrót, skalowanie i skrzywienie. Za ich pomocą można tworzyć proste efekty animacji, z tym, że takie sprawy są znacznie prostsze do zrobienia z użyciem JavaScriptu z CSS, albo dedykowanych bibliotek. Chodzi tu głównie o reakcje fragmentów obrazka SVG na zdarzenia związane z myszką, czyli najechanie kursorem nad element, kliknięcie, przeciągnięcie itp. Transformacje umieścić można w dowolnym elemencie jako parametr, np.: transform="translate(2.5 11.0) rotate(10 20 100) scale(0.25 2) skewX(10)". Jeśli ktoś bawił się kiedyś jakimś programem do tworzenia grafiki za pomocą kodowania, jak powiedzmy POV RAY, to będzie wiedział o co chodzi.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-S...">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<!-- sekcja optionalna -->
<defs>
    <!-- definicje -->
</defs>
<g id="grupa1">
    <!— elementy w tej grupie -->
</g>
<!-- dalej moga być kolejne grupy, nawet zagnieżdżone -->
<g id="grupa2">
    <!-- i jeszcze jedna -->
    <g>
        <!-- elementy -->
    </g>
</g>
</svg>

Pierwszymi liniami nie należy się specjalnie przejmować, gdyż to są tylko deklaracje. To co ważne zaczyna się od znacznika <svg>. Elementy <g> oznaczają grupy, które można zagnieżdżać i, jak nazwa wskazuje, służą do grupowania innych elementów oraz grup w celu np. zastosowania do wszystkich jednakowych gradientów lub transformacji. Traktujmy je po prostu jako kontenery na elementy składowe obrazka.

Początek układu współrzędnych w SVG jest lewy górny róg prostokątnej przestrzeni, w której tworzymy obraz. A oto pierwsze przykłady użycia elementów SVG:

1. Zielone koło o środku (cx,cy) i promieniu r: <circle cx="250" cy="50" r="5" fill="green" />
2. Odcinek od punktu (x1,y1) do (x2,y2) narysowany niebieską kreską o grubości 4: <line x1="20" y1="20" x2="100" y2="150" stroke="blue" stroke-width="4" /
3. Kreskę można w dowolny sposób podzielić na odcinki za pomocą parametru stroke-dasharray="8 2 4 2", w celu otrzymania linii przerywanej. Jest to wzorzec, który będzie się powtarzał - kreski długości 8 i 4 oddalone o 2. Jeśli chcemy ten wzorzec rozpoczynać gdzieś w środku, to możemy użyć parametru stroke-dashoffset="6".
4. Prostokąt o bokach 200 i 50 zaczepiony lewym górnym rogiem w punkcie (x,y), z czarnym obramowaniem grubości 4 i czerwonym wypełnieniem: <rect width="200" height="50" x="20" y="50" fill="red" stroke="black" stroke-width="4"/>
5. Możemy też zaokrąglić rogi prostokąta używając parametrów rx i ry.
6. Najbardziej elastyczny element path: <path d="M300,100 l100,0 l50,50 l-50,50 l-100,0 l-50,-50 z" fill="yellow" stroke="red" stroke-width="4"/>

Teraz trzeba to dokładniej wytłumaczyć. Kiedyś w szkole średniej (a nawet podstawowej) uczono tzw. grafiki żółwia np. w języku programowania Logo. Tu mamy bardzo podobny przypadek, choć z większą liczbą słów kluczowych i operacji. Parametr d="M300,100 l100,0 l50,50 l-50,50 l-100,0 l-50,-50 z" zawiera serię dziwnych kodów, które będą opisywać przebieg naszej krzywej. Przed wszystkim zwróćmy uwagę na początkowe "M300,100". Każe ono ustawić początek rysowania w punkcie (300,100). Dalej znajduje się kod "l100,0", który rysuje prosty odcinek (oznaczenie "l" oznacza odcinek, a mała litera oznacza parametry względne). Podobnie "l50,50" kreśli odcinek do punktu (400,100) itd. Literka "z" na końcu każe dorysować odcinek pomiędzy ostatnim i pierwszym punktem, czyli zamknąć ścieżkę w obrys. Dodatkowe parametry mówią, że linie będą koloru czerwonego o grubości 4, zaś wypełnienie kształtu koloru żółtego.

Może dodam jeszcze więcej o tych tajemniczych literkach w parametrze "d", bo to też jest warte uwagi. Literka "l" jest to podana w ścieżce jako najprostszy przykład. Możliwe jest użycie innych znaczników: c - kubiczne krzywe Beziera, s - to takie uproszczone c, q - kwadratowe krzywe Beziera, t - to znowu uproszczone q, v - linia pozioma, h - linia pionowa, a (arc = łuk wycinka elipsy). Każda z nich wymaga innej liczby parametrów, np. v i h jednego, krzywe Beziera w zależności od typu ("c dx1 dy1, dx2 dy2, dx dy", "s dx2 dy2, dx dy", "q dx1 dy1, dx dy"), zaś dla a specjalny zestaw ("a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy", czyli promienie elipsy, jak obrócić elipsę, arc i sweep przyjmują wartości 0 i 1, bo trzeba wybrać z dwóch możliwości, którą część elipsy bierzemy, nad czy pod linią cięcia). Trzeba zwracać uwagę na wielkość liter, bo duże litery oznaczają współrzędne bezwzględne, czyli liczone względem początku układu współrzędnych (okna), zaś małe są wartościami względnymi (względem ostatnio postawionego punktu). Dlatego parametr po małym el "l" oznacza przesunięcie, zaś po dużym "L" współrzędne punktu docelowego. Znacznik zamknięcia ścieżki "z" może być pisany też dużą literą "Z". Jeszcze raz dla łatwiejszego zapamiętania:

    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Bézier curve
    T = smooth quadratic Bézier curveto
    A = elliptical Arc
    Z = closepath

Jeśli ktoś z czytelników kiedyś przez przypadek interesował się starym systemem operacyjnym DOS albo 16-bitowym formatem pliku wykonywalnego (EXE), to wie, że te literki "M" i "Z" nie są tu "przypadkowe". To są w DOS-ie oznaczenia bloków pamięci pośrednich oraz ostatniego, a w nagłówku pliku sygnatura "MZ" na początku, zaś ogólnie jako inicjały pewnego znanego informatyka z wczesnej ery komputeryzacji. Zapewne da się jeszcze wygooglować jego pełne nazwisko w jakiejś encyklopedii pecetologii. :)

Co to jest krzywa Beziera? Z matematycznego punktu widzenia są to wizualne realizacje wielomianów Bernsteina, jednej z szeregu ważnych rodzin wielomianów, jak powiedzmy wielomiany Bernoulliego, Czebyszewa, Legendre’a lub Laguerre’a. Pojawiają się one w niezliczonej liczbie zagadnień, od aproksymacji, przez równania różniczkowe, po zagadnienia własne dla operatorów. Nie ważne. Zamiast kopać się ze wzorami, najlepiej popatrzeć na animacje w Wikipedii, a wszystko z miejsca stanie się jasne. Czy widać już jak się wszystko gładko ślizga po prowadnicach?

• 1. https://en.wikipedia.org/wiki/...
• 2. https://www.w3.org/TR/SVG/path...

No właśnie o to tu chodzi ;)

Oto użyteczny przykład pokazujący element <path> złożony z krzywych Beziera i prowadnice (czerwone):

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<style>
path {
    stroke:black;
    fill:transparent;
}
line {
    stroke:red;
}
</style>
  <path d="M 10 10 C 20 20, 40 20, 50 10" />
  <line x1=10 y1=10 x2=20 y2=20 />
  <line x1=50 y1=10 x2=40 y2=20 />
 
  <path d="M 70 10 C 70 20, 120 20, 120 10" />
  <line x1=70 y1=10 x2=70 y2=20 />
  <line x1=120 y1=10 x2=120 y2=20 />
 
  <path d="M 130 10 C 120 20, 180 20, 170 10" />
  <line x1=130 y1=10 x2=120 y2=20 />
  <line x1=170 y1=10 x2=180 y2=20 />
 
  <path d="M 10 60 C 20 80, 40 80, 50 60" />
  <line x1=10 y1=60 x2=20 y2=80 />
  <line x1=50 y1=60 x2=40 y2=80 />
 
  <path d="M 70 60 C 70 80, 110 80, 110 60" />
  <line x1=70 y1=60 x2=70 y2=80 />
  <line x1=110 y1=60 x2=110 y2=80 />
 
  <path d="M 130 60 C 120 80, 180 80, 170 60" />
  <line x1=130 y1=60 x2=120 y2=80 />
  <line x1=170 y1=60 x2=180 y2=80 />
 
  <path d="M 10 110 C 20 140, 40 140, 50 110" />
  <line x1=10 y1=110 x2=20 y2=140 />
  <line x1=50 y1=110 x2=40 y2=140 />
 
  <path d="M 70 110 C 70 140, 110 140, 110 110" />
  <line x1=70 y1=110 x2=70 y2=140 />
  <line x1=110 y1=110 x2=110 y2=140 />
 
  <path d="M 130 110 C 120 140, 180 140, 170 110" />
  <line x1=130 y1=110 x2=120 y2=140 />
  <line x1=170 y1=110 x2=180 y2=140 />

</svg>

Kolejne możliwe elementy, które z braku miejsca omówię tylko w przypadku, gdy się o nie potknę, to <polygon>, <polyline>, i ta cała reszta. Proszę niecierpliwych o sięgnięcie do dokumentacji.

Wreszcie dotarliśmy do tekstów. Mamy tu element <text> oraz wewnątrz niego jeden lub całą serię elementów <tspan>. Najprostszy tekst musi mieć współrzędne początku i ewentualnie kolor. Z tekstem można robić też różne inne rzeczy. Dodanie parametru style="..." da nam możliwość zmiany wyglądu czcionki, zaś parametr transform="..." pozwoli nam go powiedzmy obrócić: <text x="50" y="20" fill="blue" style="direction: rtl; unicode-bidi: bidi-override; fill:#0000C0;" transform="rotate(10 20,0)">Test</text>. To coś po fill, to jest HTML-owy sposób kodowania koloru szesnastkowo w systemie RGB. Możemy też zmieniać style za pomocą klas, tak samo jak w CSS. Wtedy przed użyciem elementów <text> możemy wstawić element <style> i zdefiniować tam parę stylów na zaś.

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
    .ita { font: italic 12px sans-serif; }
    .bld { font: bold 12px sans-serif; }
    .reds { font: italic 30px serif; fill: red; }
</style>

<text x="10" y="20" class="ita">POchylony</text>
<text x="30" y="25" class="bld">POgrubiony</text>
<text x="50" y="30" class="reds">Niechybnie czerwony</text>
</svg>

Parametr viewBox w elemencie <svg> służy głównie do określenia wielkości obrazka i nie należy się nim zbytnio przejmować. Nie musimy też przejmować się konwenansami, bo teksty można formatować także bezpośrednio w elemencie <text> za pomocą dodatkowych parametrów. Mają one nazwy bardzo podobne lub nawet identyczne jak w HTML i CSS, np. font-size, font-family, albo wewnętrzny styl style="...". tylko jedno warto zapamiętać, że w SVG nie używa się typowego dla HTML+CSS parametru color, lecz fill:

<text x="20" y="150"
  font-size="24" font-family="serif"
  style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: italic"
  fill="blue" stroke="black" stroke-width="2">
    Coś strasznego!
</text>

Aby nie wprowadzać zbyt wielu niepotrzebnych elementów <text>, a jednocześnie zachować możliwość transformowania go jako całości i osobnego definiowania stylów dla jego fragmentów, wprowadzono element <tspan>. Czyli są to po prostu fragmenty tekstu wyjściowego trochę inaczej wypozycjonowane i/lub sformatowane:

<text x="10" y="25" font-size="12">
  <tspan x="10" dy="20" font-family="serif" fill="grey">Pierwszy</tspan>
  <tspan x="10" dy="20" font-family="cursive">Drugi</tspan>
</text>

Może nie jest to najdoskonalszy przykład, ale sugeruje, że można też teksty nakładać na siebie, robiąc coś w rodzaju cienia albo ozdobnej obwódki. Wszystko jest dopuszczalne. Bardziej przydatny przykład formatowania tekstu pokazuje jak za pomocą poznanych środków utworzyć indeksy dolne (sub) lub górne (super):

<text x="10" y="25" font-size="20">
  <tspan>e = mc
    <tspan baseline-shift="super">2</tspan>
  </tspan>
  <tspan x="10" y="60">X
    <tspan baseline-shift="sub">i+2</tspan>
    =X
    <tspan baseline-shift="sub">i</tspan>
    + X
    <tspan baseline-shift="sub">i+1</tspan>
  </tspan>
</text>

Dochodzimy wreszcie do gradientów i filtrów. Ale to już w części trzeciej.

Uwaga! Przykłady z tekstami mogą nie wyświetlać się poprawnie. Sytuacja z tego rodzaju formatami jest obecnie bardzo dynamiczna, gdyż nie wszystkie przeglądarki zaimplementowały pełen zestaw znaczników SVG, a jeśli nawet, to nie ze wszystkimi ich możliwościami opisywanymi w dokumentacji. Nawet w przypadku podanych wyżej bardzo prostych przykładów są one odmiennie wyświetlane ze względu na przeglądarkę. Dlatego przy wykorzystywaniu tej technologii trzeba bardzo uważać i testować własny kod możliwie często i zawsze na jak największej liczbie browserów (z uwzględnieniem ich wersji). Być może za jakiś czas sytuacja się ustabilizuje, a wspólnie przyjęty przez producentów standard będzie dysponował oczekiwaną przez użytkowników siłą wyrazu oraz elastycznością. Kto wie. Może też być tak, że format SVG odejdzie do lamusa, zastąpiony przez jakiś poręczniejszy język, ale to jest najmniej prawdopodobna sytuacja.

"We accept the reality of the world in which we are presented. It's as simple as that."

Życzę czytelnikom mojego bloga Wszystkiego Najlepszego w Nowym Roku 2019!