wtorek,
SVG: Święty Mikołaj
Kod źródłowy przykładu znajdziesz na końcu materiału, dołączone grafiki są w formacie SVG, możesz je zapisać i przeanalizować ich kod po otwarciu w edytorze tekstowym. Osoby rozpoczynające przygodę z formatem SVG powinny zapoznać się z naszymi starszymi materiałami z działu „Scalable Vector Graphics”.
Elementy tworzące prezentowaną grafikę zostały zgrupowane celem wykorzystania mechanizmu dziedziczenia atrybutów określających kontur i wypełnienie. Składowe głowy Mikołaja to sześć kół (circle) i jedna elipsa (elipse). Nadano im kontur i wypełnienie. Czapkę wykonano, tworząc dwa wielokąty (trapez i trójkąt) oraz kolejne koło.
Najtrudniejszym do wykonania elementem grafiki są wąsy. Utworzono je za pomocą ścieżki (path) zawierającej kilka połączonych kwadratowych krzywych Béziera. Ścieżki, a zwłaszcza krzywe Béziera, to dość złożone zagadnienie, w dalszej części materiału skrótowo opisano przyjęte w projekcie rozwiązanie.
Kwadratowa krzywa jest najprostszą krzywą Béziera. Określa się dla niej trzy punkty: początek, koniec i punkt kontrolny. Na poniższych grafikach widoczne są elementy, które po połączeniu tworzą lewą część wąsów, prawa strona wąsów powstaje po symetrycznym odbiciu. Dolna lewa część składa się z jednej krzywej Beziera, jej początek to punkt A (30,230), koniec punkt B (170,250), punkt kontrolny to C (100,290). Wygięcie krzywej zależy od położenia punktu kontrolnego. Lewa górna część wąsów to połączone dwie kwadratowe krzywe Béziera.
Liczby występujące w deklaracji atrybutu d ścieżki to współrzędne punktów, litery to komendy (M: ustawienie punktu rysowania, Q: rysowanie kwadratowej krzywej Beziera, Z: zamknięcie ścieżki poprzez połączenie jej początku i końca).
Poniżej znajduje się kod projektu zapisany formacie SVG. Możesz go wkleić do edytora tekstowego (np. notatnika) i zapisać z rozszerzeniem svg lub wstawić do kodu strony internetowej.
<svg width="340" height="410" xmlns="http://www.w3.org/2000/svg">
<g stroke="#353535" stroke-width="8" fill="#ddd">
<ellipse cx="170" cy="280" rx="110" ry="120" />
<circle cx="85" cy="185" r="20" fill="#ffdbac" />
<circle cx="255" cy="185" r="20" fill="#ffdbac" />
<circle cx="170" cy="180" r="90" fill="#ffdbac" />
<circle cx="140" cy="185" r="14" fill="#353535" />
<circle cx="200" cy="185" r="14" fill="#353535" />
<circle cx="170" cy="255" r="28" fill="#a00" />
<polyline points="90,110 130,10 210,10 250,110" fill="#a00" />
<rect x="80" y="110" width="180" height="50" />
<polygon points="130,10 200,10 75,150 130,10" fill="#a00" />
<circle cx="80" cy="150" r="30" />
</g>
</svg>
