Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

SVG: Smartfon

środa,

SVG: Smartfon

informacje dla początkujących

O podstawach kodowania w formacie SVG możesz dowiedzieć się z naszych poprzednich materiałów:

Projekt smartfona w formacie SVG

Na grafikę prezentowaną w przykładzie składają się dwa prostokąty (korpus urządzenia i ekran) oraz dwa koła (kamera i przycisk). Projekt można wzbogacić, dodając we właściwych miejscach prostokąty imitujące boczne przyciski urządzenia (np. regulacja głośności). Poniżej znajduje się kod strony HTML z dołączoną grafiką SVG przedstawiającą smartfona oraz jej podgląd. Dodatkowe objaśnienia znajdziesz w dalszej części materiału.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smartfon</title>
</head>
<body>
  <svg width="600" height="300">
    <rect x="0" y="0" width="600" height="300" fill="#ccc" />
    <rect x="50" y="30" rx="20" ry="20" width="500" height="240"
          fill="#000" stroke="#777" stroke-width="1" />
    <rect x="75" y="35" width="400" height="230" fill="#555" />
    <circle cx="62" cy="150" r="5" fill="#555" />
    <circle cx="510" cy="150" r="25" fill="#000"
          stroke="#555" stroke-width="1" />
  </svg>
</body>
</html>

W formacie SVG początek układu współrzędnych znajduje się w lewym górnym rogu grafiki, od tego miejsca rysowany jest pierwszy prostokąt (atrybuty x i y), który stanowi tło i ma wymiary (width, height) równe wymiarom całej grafiki (svg) oraz szare wypełnienie (atrybut fill). Jeśli przy wymiarach jawnie nie określono jednostki, stosowane są piksele.

Drugi prostokąt to korpus smartfona, jego rogi zostały zaokrąglone (rx, ry), dodatkowo kształt otrzymał ciemnoszary obrys (stroke) o szerokości jednego piksela (stroke-width). Trzeci prostokąt to ekran smartfona.

Pierwsze koło (kamera) ma środek w punkcie określonym przez parametry cx i cy oraz promień (atrybut r) równy pięciu pikselom. Drugie koło (przycisk) ma taki sam kolor wypełnienia (fill) jak korpus. Aby było widoczne, dodano do niego szary obrys (stroke) o szerokości (stroke-width) jednego piksela.

Proces kodowania smartfona w formacie SVG możesz zobaczyć na poniższym filmie.

Artykuł: Kolejne dni w Granadzie

Kolejne dni w Granadzie

Artykuł: Netplan

Netplan

Artykuł: Staże w Granadzie

Staże w Granadzie

Artykuł: Harmonogram egzaminów maturalnych

Harmonogram egzaminów maturalnych

Artykuł: Staże w Hiszpanii

Staże w Hiszpanii

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły