Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - informacje wstępne

Email Drukuj PDF

SVG oznacza Scalable Vector Graphics, czyli skalowalną grafikę wektorową. Język SVG jest oparty na języku XML i jest oficjalnym standardem World Wide Web Consortium. Pierwsza wersja rekomendacji, czyli SVG 1.0, ukazała się 4 września 2001 roku, natomiast SVG 1.1 Second Edition ukazało się 16 sierpnia 2011 r.

Obraz w formacie SVG jest obrazem zbudowanym z poleceń zapisanych w postaci tekstu, analogicznych do języka HTML czy CSS - przeglądarka z wbudowanym interpreterem SVG (wszystkie główne przeglądarki, w tym Internet Explorer 9, wspierają SVG, natomiast Internet Explorer 8 wymaga zainstalowania bezpłatnej wtyczki Adobe SVG Viewer) czyta kod i interpretuje go, wyświetlając obraz zgodnie z oczekiwaniem autora. Przykładowo, kod o postaci:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="500" height="150">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

wyświetli koło o następujących cechach:

  • środek w pozycji cx=50,cy=50 od początku obszaru rysowania
  • promień r=40
  • obramowanie stroke w kolorze czarnym o grubości stroke-width 2 piksele, 
  • wypełnienie fill czerwonym kolorem

Figura jest położona na prostokątnym obszarze o szerokości width="500" i wysokości height="150" pikseli.

Warto podkreślić, że SVG jest nie tylko techniką webmasterską - obrazy w tym formacie są też wykorzystywane w publikacjach elektronicznych, w takich formatach, jak ePub czy Kindle Format. SVG zyskuje więc sobie prawo obywatelstwa w coraz popularniejszych ebookach.

Zalety SVG:

  • Obraz może być tworzony w dowolnym tekstowym edytorze, choć oczywiście istnieją edytory wspomagające tworzenie takich rysunków.
  • Obraz może być ręcznie poprawiany za pomocą niewielkich modyfikacji kodu źródłowego.
  • Obraz może być skalowalny.
  • Obraz może być przeszukiwany i indeksowany, a także oskryptowany.
  • Obraz może być powiększany na ekranie bez utraty jakości i drukowany w wysokiej rozdzielczości.
  • SVG jest otwartym standardem zgodnym z innymi standardami webmasterskimi.
 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V