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.
