środa,
SVG: Szachownica lotnicza
Wykonanie symbolu polskiego lotnictwa w formacie SVG jest stosunkowo łatwym zadaniem. Jeśli uważnie przeczytałeś nasz poprzedni materiał związany z flagą Szwecji prawdopodobnie w celu wykonania szachownicy lotniczej będziesz chciał wykorzystać osiem kwadratów (rect), czterech większych stanowiących podstawę z umieszczonymi na nich czteroma mniejszymi. Dla wprawy możesz wykonać takie ćwiczenie, jednak w naszym przykładzie wykorzystamy wielokąty (polygon) i w efekcie ograniczymy się do narysowania tylko pięciu kształtów.
Istotne jest zachowanie właściwych proporcji i kolorystyki symbolu. W ustawie „Ustawa z 19 lutego 1993 O znakach Sił Zbrojnych Rzeczypospolitej Polskiej” z 1993 roku znajduje się zapis „Znakiem wojskowych statków powietrznych jest biało-czerwona szachownica lotnicza o barwach Rzeczypospolitej Polskiej, podzielona na cztery równe pola ze skrajami o naprzemiennych barwach. Stosunek szerokości skraju do długości krawędzi pola szachownicy lotniczej wynosi 1:5”. Niestety w tym akcie prawnym kolory nie zostały określone zbyt precyzyjnie, zastosujemy barwy oficjalnie przyjęte dla flagi Polski, #E9E8E7 jako biały oraz #D4213D jako czerwony.
Podstawą rysunku jest duży biały kwadrat. Na nim umieszczono dwa mniejsze o barwie czerwonej. Dopełnieniem symbolu są dwa czerwone wielokąty (polygon) umieszczone w jego rogach. Znacznik <polygon> zawiera atrybut points, w którym godnie z nazwą znajdują się rozdzielone spacjami współrzędne x i y punktów tworzących figurę. Przypominamy, że współrzędne wyznaczają miejsce liczone od lewego górnego rogu. Należy zachować odpowiednią kolejność punktów, nie jest istotne, od którego zaczynamy.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Szachownica lotnicza</title>
</head>
<body style="background: #999;">
<svg width="240" height="240">
<rect x="0" y="0" width="240" height="240" fill="#e9e8e7" />
<rect x="120" y="20" width="100" height="100" fill="#d4213d" />
<rect x="20" y="120" width="100" height="100" fill="#d4213d" />
<polygon points="0,0 120,0 120,20 20,20 20,120 0,120" fill="#d4213d" />
<polygon points="240,240 240,120 220,120 220,220 120,220 120,240" fill="#d4213d" />
</svg>
</body>
</html>Efekt wizualny powyższego kodu:
