czwartek, 2022-12-08

SVG: Ping pong

Projekt rakietki do tenisa stołowego jest łatwy do wykonania. Minimalistyczna grafika jednak w niektórych zastosowaniach sprawdza się doskonale, np. w przypadku ikon skalowanych do bardzo małych rozmiarów,

Elementy wchodzące w skład grafiki tworzą grupę (element g), dzięki temu można je łatwo obracać, 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 muszą mieć indywidualnej deklaracji. W pierwszym kroku utworzono okrąg (element circle bez wypełnienia z nadanym konturem). Aby zimitować okładzinę rakietki, w odpowiednim miejscu do obrazu dodano odcinek (line). W kolejnym etapie dołączono rączkę (trapez utworzony za pomocą elementu polygon) oraz piłeczkę (kolejny element circle). Tym razem obydwa elementy otrzymały wypełnienie (fill="#fff"). W ostatecznej wersji grafiki grupę elementów obrócono (rotate) o kąt 30° względem punktu o współrzędnych (130, 120).

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="260" height="310" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="#353535" stroke-width="5" transform="rotate(30 130 120)">
   <circle cx="130" cy="120" r="100" />
   <line x1="50" y1="180" x2="210" y2="180" />
   <polygon points="110,180 105,300 155,300 150,180" fill="#fff" />
   <circle cx="220" cy="120" r="30" fill="#fff" />
 </g>
</svg>

Dla przypomnienia:

• 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 <line> to odcinek, atrybuty: x1 i y1 – współrzędne początku, x2 i y3 – współrzędne końca;
• element <polygon> to wielokąt, atrybut points zawiera współrzędne wierzchołków.