Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Ludzik z piernika

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>
Artykuł: Kolejne dni w Granadzie

Kolejne dni w Granadzie

Artykuł: Netplan

Netplan

Artykuł: Staże w Granadzie

Staże w Granadzie

Artykuł: Harmonogram egzaminów maturalnych

Harmonogram egzaminów maturalnych

Artykuł: Staże w Hiszpanii

Staże w Hiszpanii

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły