poniedziałek, 2022-12-12

SVG: Widok gór

Wczoraj obchodziliśmy Międzynarodowy Dzień Terenów Górskich. Prezentowany projekt to grafika poświęcona temu wydarzeniu.

Trzy kształty symbolizujące góry wykonano za pomocą elementów <polygon> tworząc trójkąty. Dwa spośród nich mają dodany mniejszy trójkąt w ciemniejszej barwie, który ma sprawiać wrażenie trzeciego wymiaru. Środkowy kształt zakończony jest chorągiewką, do jej wykonania posłużyła ścieżka (path) oraz odcinek (line).

Kształt imitujący trawę i stanowiący zarazem tło dla napisów utworzono za pomocą ścieżki, jednym z jej fragmentów są kwadratowe krzywe Béziera. Zapis „M0,300 Q150,250 300,280 T600,280” oznacza, że od punktu (0,300) do (300,280) renderowana jest kwadratowa krzywa Béziera z punktem kontrolnym o współrzędnych (150,250), a następnie jest gładko (T) kontynuowana do punktu (600,280).

W grafikach SVG można osadzać tekst, służy do tego element <text>, którego podstawowymi atrybutami są x i y określające położenie tekstu. Do formatowania tekstu w prezentowanym przykładzie wykorzystano kaskadowe arkusze stylów (CSS), a odpowiednie własności określono w obrębie znacznika <style>.

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="600" height="600" xmlns="http://www.w3.org/2000/svg">
  <style>
	  text {font:bold 40px sans-serif; fill:#fff; text-anchor:middle;}		
  </style>
  <rect x="0" y="0" rx="0" width="600" height="600" fill="#acd" />
  <line x1="300" y1="60" x2="300" y2="15" stroke="#4c0421" stroke-width="5" />
  <path d="M300,15 L250,30 L300,45" fill="#6c042e" />
  <polygon points="350,350 450,100 550,350" fill="#920a41" />
  <polygon points="200,350 300,50 450,350" fill="#6c042e" />
  <polygon points="200,350 300,50 350,350" fill="#4c0421" />
  <polygon points="50,350 150,100 300,350" fill="#920a41" />
  <polygon points="50,350 150,100 200,350" fill="#5b0a2b" />
  <path d="M0,300 Q150,250 300,280 T600,280 L 600,600 L 0,600 Z"
        fill="#090" stroke="none" stroke-width="5" />
  <text x="300" y="420" style="fill:#fc0;font-size:80px;">11 GRUDNIA</text>
  <text x="300" y="470">MIĘDZYNARODOWY DZIEŃ</text>
  <text x="300" y="520">TERENÓW GÓRSKICH</text>
</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 <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,
• element <path> to ścieżka, liczby występujące w deklaracji atrybutu d ścieżki to współrzędne punktów, litery to komendy.