poniedziałek,
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.
