Internet Explorer 9 - HTML5 - SVG

Autor: Marcin Borecki

Opublikowano: 2011-08-30

Wprowadzenie

Standard SVG rozwijany jest od 1999 roku przez organizację W3C. Format służy do generowania grafiki wektorowej bez potrzeby używania dodatkowych wtyczek. Ze względu na to, że można obrazy w tym formacie dowolnie skalować, nadaje się idealnie do tworzenia ikon, map, wykresów oraz diagramów. Przeglądarka Internet Explorer 9 pozwala osadzać SVG w kodzie HTML, przez co jest możliwość bezpośredniego manipulowania na obrazie przy użyciu JavaScript oraz generowania obrazów dynamicznie po stronie klienta.

SVG opiera się na XML, przez co jest łatwy do zrozumienia dla użytkownika i wyszukiwarki internetowej. Budowa oparta na znacznikach i atrybutach zwiększa czytelność i pozwala na nawigację po obrazie w sposób, który był dotychczas niemożliwy w popularnych formatach używanych w Internecie, na przykład JPG czy GIF. Dodatkowym atutem jest to, że grafika SVG jest w pełni akcelerowana sprzętowo, co wpływa bezpośrednio na większy komfort użytkownika przeglądającego strony oparte na dynamicznych, w tym animowanych elementach zbudowanych przy użyciu wspomnianego formatu. Wszystkie wygenerowane obrazy można zapisać z poziomu przeglądarki internetowej jako plik graficzny w formacie svg, png oraz bmp.

W tym artykule nauczymy się budowania grafiki opartej na standardzie SVG 1.1 w przeglądarce Internet Explorer 9.

Podstawy

Przeglądarka Internet Explorer 9 wspiera pliki SVG zdefiniowane zarówno w kodzie html strony, jak i dołączone do strony z plików zewnętrznych.

Dołączenie SVG do kodu strony:

<svg>

</svg>

Dołączenie SVG z pliku zewnętrznego:

<embed id="ksztaltyzpliku" src="plik.svg" type="image/svg+xml">

Rysowanie prostokątów

Do narysowania prostokątów będziemy używać znacznika rect:

<svg>
 <rect
   fill="orange"
   stroke="black"
   width="150"
   height="75"
   x="50"
   y="25"/>
</svg>

Rys. 1. Prostokąt

Znacznik posiada między innymi następujące właściwości:

Fill – określa kolor wypełnienia,

Stroke – określa kolor ramki,

Width – szerokość obiektu,

Height – wysokość obiektu,

x /y – punkty początkowe, od których rozpocznie się rysowanie kształtu,

rx/ry – punkty określające zakrzywienie rogów prostokąta.

Rysowanie okręgów

Do narysowania okręgów będziemy używać znacznika circle.

<svg>
<circle 
   fill="orange"
   stroke="black"
   cx="40"
   cy="25"
   r="20"/>
</svg>

Rys. 2. Okrąg

Znacznik posiada między innymi następujące właściwości:

Fill – określa kolor wypełnienia,

Stroke – określa kolor ramki,

cx /cy – punkty początkowe, środek okręgu,

r – promień okręgu.

Rysowanie elips

Do narysowania elips będziemy używać znacznika ellipse.

<svg>
<ellipse
   stroke="orange"
   cx="100"
   cy="60"
   rx="75"
   ry="50"/>
</svg>

Rys. 3. Elipsa

Fill – określa kolor wypełnienia,

Stroke – określa kolor ramki,

cx /cy – punkty początkowe, środek okręgu,

rx /ry – punkty promienia dla osi x i y.

Rysowanie linii

Do narysowania linii będziemy używać znacznika line.

<svg>
 <line 
   x1="30"
   y1="30"
   x2="150"
   y2="85"
   stroke="red"/>
</svg>

Rys. 4. Linia

Fill – określa kolor wypełnienia,

Stroke – określa kolor ramki,

x1 /y1 – punkty początkowe,

x2 /y2 – punkty końcowe.

Podsumowanie

Przeglądarka Internet Explorer 9 jako ostatnia rozpoczęła wspieranie formatu SVG, ale od razu czyniąc z tego formatu bardzo szybkie narzędzie do budowania grafiki wektorowej na stronach dzięki akceleracji sprzętowej. Format jest już rozpoznawalny na rynku od wielu lat, lecz nigdy nie był dominującym formatem do obsługi wektorowych elementów na stronach internetowych. To niedługo może się zmienić dzięki coraz mocniejszej pozycji HTML5 oraz mocnemu wsparciu czołowych przeglądarek.

 

---