04. SVG - podstawy

04. SVG - podstawy

Autor: Adam Stępień

Opublikowano: 7/25/2011, 12:00 AM

Liczba odsłon: 20204

HTML5 wprowadza nowy wymiar dostarczania wysokiej jakości grafiki do stron internetowych. Nie trzeba już używać żadnych wtyczek, dodatków, pluginów. Wystarczy poznać format SVG lub wirtualne płótno Canvas. Oba mają różne zastosowanie, ale jedno jest wspólne - za wyświetlenie grafiki będzie odpowiadała przeglądarka użytkownika, która może wykorzystywać moc karty graficznej komputera. Sprzętowe wsparcie renderowania grafiki ma m.in. Internet Explorer 9. Poznajmy podstawy formatu SVG.

SVG

SVG (ang. Scalable Vector Graphics) to język opisu grafiki w postaci XML-owej. Wystarczy zwykły notatnik do przygotowania jej, choć można też posłużyć się specjalnym programem. Opisana w ten sposób grafika jest wektorowa, co w praktyce oznacza, że nie występuje zjawisko pikselizacji przy zbliżeniu lub oddaleniu.

Zoom w SVG

Dzieje się tak dlatego, że w przeciwieństwie do JPEG-ów, GIF-ów itd., SVG opisuje kształt matematycznie, a nie jest zbiorem ściśle zdefiniowanych pikseli jeden po drugim. Być może brzmi to groźne, ale język SVG ma łatwo przyswajalną składnię! Narysujmy podstawowe kształty.


SVG - okrąg

Znacznik <circle>:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML5 SVG Okrąg</h1>
<svg id="svgOkrag" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="mojOkrag" cx="100" cy="100" r="40" fill="red" />
</svg>
</body>
</html>

Okrąg SVG w technologii HTML5

cx i cy to współrzędne środka okręgu, a r to promień. Domyślnie cx i cy przyjmują wartość 0. @STRONA@

SVG - prostokąt

Znacznik <rect>:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML5 SVG prostokąt</h1>
<svg id="svgProstokat" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="mojProstokat" width="200" height="50" fill="red" />
</svg>
</body>
</html>

Prostokąt w SVG w technologii HTML5

height i width to - odpowiednio - wysokość i szerokość prostokąta. Można także zdefiniować współrzędne x i y, które określą odległość od lewego górnego rogu okna przeglądarki. Zaokrąglanie rogów to wartości rx i ry.


SVG - prosta

Znacznik <line>:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML5 SVG Prosta</h1>
<svg id="svgProsta" height="200" xmlns="http://www.w3.org/2000/svg">
<line id="mojaProsta" x1="0" y1="0" x2="200" y2="100" style="stroke:red; stroke-width:3" />
</svg>
</body>
</html>

Prosta w SVG w technologii HTML5

Prostą definiujemy jako współrzędne początku prostej (x1, y1) i współrzędne jej końca (x2, y2).


SVG - elipsa

Znacznik <ellipse>:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML5 SVG Elipsa</h1>
<svg id="svgElipsa" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse id="mojaElipsa" cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

Elipsa w SVG w technologii HTML5

Wskazujemy środek właściwy elipsy poprzez współrzędne cx i cy, a potem określamy promień dla pionu(ry) i poziomu (rx).


SVG - wielobok

Znacznik <polygon>:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h1>HTML5 SVG Wielobok</h1>
<svg id="svgWielobok" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="mojWielobok" points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

Wielobok w SVG w technologii HTML5

Wielobok, czy też wielokąt, określamy, podając współrzędne wszystkich kątów. Rozdzielamy je odstępem (spacją).


SVG - łamana

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Łamana</h2>
<svg id="svgLamana" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 40,20 40,40 80,40 80,60" fill="red" />
</svg>
</body>
</html>

Łamana w SVG w technologii HTML5@STRONA@

Używanie stylów do zmiany wyglądu

Wiemy już, jak zdefiniować określone kształty w formacie SVG, a teraz poznamy różne techniki dostosowywania wyglądu.

  1.  Pominięcie atrybutów wizualnych:

    <rect id="prost1" height="100%" width="100%" >

    Mimo niezdefniowania wizualnych artybutów prostokąta, będzie on wypełniony kolorem czarnym. Wynika to z domyślnej barwy, jaką jest czarny (black albo heksadecymalnie #000000).
  2. Narzucenie stylu:

    <rect id="prost2" height="100%" width="100%" style="fill:green"/>

    Wygląd definiujemy bezpośrednio jako atrybut znacznika
  3. Określenie klasy:

    <rect id="prost3" height="100%" width="100%" class="zielonyProstokat"/>
    Wskazanie klasy pozwala na zdefiniowanie atrybutów wizualnych w pliku Kaskadowych Arkuszy Stylów. W CSS-ie dodajemy linijkę kodu:

    rect.zielonyProstokat{fill:green;}

  4. Atrybuty wizualne znaczników:

    <rect id="prost4" height="100%" width="100%" fill="yellow"/>

    Nadajemy wartości atrybutom wizualnym znacznika