poniedziałek,
SVG: Ludzik z piernika
Częstym elementem świątecznych grafik jest ludzik z piernika. Jak zakodować go w formacie SVG?
Pamiętaj, że w formacie SVG współrzędne domyślnie liczone są od lewego górnego rogu grafiki. Jeśli nie wiesz, jak tworzyć łuk okręgu, zapoznaj się z materiałem „SVG: Ścieżki – łuk okręgu”.
Pierwszy etap projektu to utworzenie głowy. Jej kształt wyznaczony jest przez okrąg (element circle), którego środek ma współrzędną x (atrybut cx) położoną w połowie grafiki (400/2 = 200). Współrzędna x (cy) powinna być trochę większa od promienia (atrybut r), aby głowa nie przylegała do krawędzi obrazu. Składowymi głowy są także oczy (dwa elementy circle) oraz usta (element path). Jedynym elementem ścieżki jest łuk okręgu.
Pozostała część kształtu ludzika powstała na bazie trzech odcinków (line) o odpowiednio szerokim obramowaniu (atrybut stroke-width). Linie kończą się zaokrągleniem dzięki ustawieniu atrybutu stroke-linecap na wartość round. Ostatnim elementem prezentowanej grafiki są dwa guziki (elementy circle).
Poniżej znajduje się kod przykładu 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="400" height="800" xmlns="http://www.w3.org/2000/svg"
style="background:#343434;">
<circle cx="200" cy="110" r="80" fill="#9f5529" />
<g fill="#eee">
<circle cx="170" cy="90" r="15" />
<circle cx="230" cy="90" r="15" />
</g>
<path d="M170,135 A 80 80 0 0 0 230,135" fill="none"
stroke="#eee" stroke-width="15" stroke-linecap="round" />
<g stroke="#9f5529" stroke-width="90" stroke-linecap="round">
<line x1="50" y1="220" x2="350" y2="220" />
<line x1="120" y1="450" x2="200" y2="200" />
<line x1="280" y1="450" x2="200" y2="200" />
</g>
<g fill="#232323">
<circle cx="200" cy="210" r="20" />
<circle cx="200" cy="290" r="20" />
</g>
</svg>
