Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Flaga Japonii

piątek,

SVG: Flaga Japonii

Flaga Japonii symbolizuje wschodzące słońce i jest to czerwony dysk na białym tle. Stosunek wysokości flagi do jej szerokości wynosi 2:3, tarcza słoneczna jest umieszczona na środku białego pola, a jej średnica wynosi 3/5 wysokości flagi. Dla uzyskania nico większego rozmiaru, proporcje pomnożono przez 250. W efekcie szerokość wyniosła 750, a wysokość 500, co daje 1/5 wysokości równą 100, zatem 3/5 wysokości i zarazem średnica tarczy słonecznej to 300. W języku SVG koło definiowane jest za pomocą promienia, a nie średnicy, czyli konieczne jest jeszcze jedno działanie: 300/2 = 150. W przypadku braku jawnie zadeklarowanej jednostki przyjmowane są piksele. Poniżej znajduje się kod strony HTML z dołączoną flagą Japonii w formacie SVG.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<title>Flaga Japonii</title>
</head>
<body>
<svg width="750" height="500">
	<rect x="0" y="0" width="750" height="500" fill="#fff" />
	<circle cx="375" cy="250" r="150" fill="#bc002d" />
</svg>
</body>
</html>

W języku SVG położenie punktów wyliczane jest od lewego górnego rogu, który ma współrzędne (0,0). W wierszu ósmym zadeklarowano element SVG o szerokości 750 i wysokości 500. W wierszu dziewiątym zadeklarowano prostokąt (rect) wypełniony kolorem białym (#ffffff) o wymiarach 750 na 500 wypełniający całą grafikę. Wiersz dziesiąty to deklaracja koła (circle), jego środek to punkt centralny grafiki, czyli (750/3, 500/2), co daje współrzędne (375, 250). Kolejność deklaracji jest istotna, figury muszą nakładać się na siebie w odpowiedniej kolejności. Format SVG należy do rodziny języków XML i jego wszystkie znaczniki muszą być bezwzględnie zamknięte, np. <rect> został domknięty przez />.

Poniżej znajduje się grafika z przykładu, umieszczono ją na ciemnym tle. Używając skrótów klawiszowych ctrl+ i ctrl- zwróć uwagę, że przy skalowaniu wszystkie figury zachowują idealny wygląd, jest to charakterystyczna cecha grafiki wektorowej.

Artykuł: Sklep Microsoft

Sklep Microsoft

Artykuł: SVG: Święty Mikołaj

SVG: Święty Mikołaj

Artykuł: Ralph Baer

Ralph Baer

Artykuł: SVG: Ikona nadajnika

SVG: Ikona nadajnika

Artykuł: Encyklopedia Britannica

Encyklopedia Britannica

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły