Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

04. SVG - podstawy

04. SVG - podstawy

Autor: Adam Stępień Opublikowano: 25 lipca 2011 Odsłon: 17 506

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.

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

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

Zobacz również

Komentarze

istotną jednak kwestią jest waga takiego obrazka  - bardziej zaawansowany svg wykonany w incscape czy illustratorze waży sporo więcej niż jego jpegowy odpowiednik. Sprawia to że zastosowanie svg w internecie jest dość wąskie (bo bądźmy szczerzy, jak często powiększamy coś na stronie bardziej niż w 150%, gdzie faktycznie pikselizacja zaczyna rzucać sie w oczy).
omek, 27 lipca 2011, 02:44
Ale jpegi to są statyczne zbiory pikesli, a w svg możesz swoje "dzieło" skalować, obracać, przesuwać, oskyrptować i tworzyć np. interaktywne mapy. Tego zwykłe jpegi Ci nie dają same w sobie.
Adam Stępień, 28 lipca 2011, 17:12
SVG to format "elastyczny" i wygodny w wypadku operowanie na grafice (art-paint, foto). Do netu wystarczają: jpg , gif , png .
Yarec, 9 sierpnia 2011, 11:50

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.