piątek, 2022-12-09

SVG: Ikona debuggera

Z elementów tworzących grafikę utworzono grupę (element <g>), dzięki temu łatwo je obrócić, a także skorzystać z mechanizmu dziedziczenia własności określających wypełnienie i kontur – elementy potomne przejmują własności rodzica i nie mają indywidualnych deklaracji. W pierwszej fazie wykonywania projektu utworzono mocno zaokrąglony (atrybut rx) prostokąt (<rect>) oraz koło (<circle>) o wspólnym środku, ich fragmenty będą tworzyć korpus i głowę. W kolejnym kroku w obrębie znacznika <defs> jako ścieżki przycinania (<pathClip>) zdefiniowano dwa prostokąty wykorzystane do wykonania odcięcia. Elementy, które są zawarte w <defs> nie są bezpośrednio renderowane, na podstawie identyfikatorów (atrybut id) można się do nich odwoływać. Skrótowo rzecz biorąc, przycinanie polega na wyświetlaniu części wspólnej elementu oraz zdefiniowanej specjalnie ścieżki przycinania (<clipPath>). Odcięcie deklaruje się za pomocą atrybutu clip-path zawierającego identyfikator ścieżki przycinania, np. clip-path="url(#head)".

Po wykonaniu odcięcia utworzono ułożone symetrycznie czułki i odnóża, wykorzystano do tego linie łamane (elementy <polyline>). W finalnej wersji grafiki zgrupowane elementy obrócono (transform="rotate(45 270 270)") o 45° względem punktu o współrzędnych (270, 270).

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="440" height="440" xmlns="http://www.w3.org/2000/svg">
  <defs>
  <clipPath id="clip">
    <rect x="100" y="200" width="200" height="200" />
  </clipPath>
  <clipPath id="head">
    <rect x="100" y="0" width="200" height="190" />
  </clipPath>
  </defs>
  <g fill="#242424" stroke="#242424" stroke-width="16"
    transform="rotate(45 270 270)">
    <circle cx="200" cy="200" r="70" stroke="none" clip-path="url(#head)" />
    <rect x="110" y="0" rx="100" width="180" height="400" stroke="none" clip-path="url(#clip)" />
    <polyline points="310,140 270,120 200,180 130,120 90,140"
      fill="none" />
    <polyline points="360,130 320,170 320,208 200,208 80,208 80,170 40,130"  
      fill="none" />
    <polyline points="390,290 370,300 340,250 200,250 60,250 30,300 10,290"
      fill="none" />
    <polyline points="390,390 340,370 340,310 280,280 120,280 60,310 60,370 10,390"
      fill="none" />
    <line x1="200" y1="400" x2="200" y2="240" stroke="white" stroke-width="10" />
  </g>
</svg>

Przypomnienie niektórych elementów składni SVG:

• w formacie SVG współrzędne liczone są od lewego górnego rogu obrazu;
• rozróżniane są wielkie i małe litery;
• w przypadku błędów składniowych grafika się nie wyświetla;
• brak określenia jednostki przy wymiarach oznacza, że przyjmowane są piksele;
• element <circle> to koło, jego atrybuty cx i cy to współrzędne środka, r określa promień;
• element <rect> to prostokąt, jego atrybuty x i y to współrzędne lewego górnego rogu, width oraz height to długość i szerokość;
• element <poline> to linia łamana, atrybut points zawiera współrzędne punktów przez które przechodzi linia.