Grafika wektorowa WWW

Rozwój WWW od dawna stoi przed problemem przekazywania rosnących zasobów graficznych. Możliwość przekazu informacji za pomocą grafiki rastrowej jest znacznie ograniczona, a popularne formaty GIF i JPEG są obarczone pewnymi brakami.

Chcąc narysować koło, grafik WWW musi właściwie opisać stan każdego piksela. Dzięki zdobyczom, jakie niesie grafika wektorowa mógłby to samo koło opisać jedną linijką kodu w postaci czystego tekstu. Przeglądarka, wykonując instrukcje, po prostu wyrysuje koło na ekranie naszego komputera. Nie ma potrzeby przesyłania siecią żadnego obrazka, a tylko fragmentu kodu zaszytego w stronie HTML.

Kandydat

World Wide Web Consortium - organizacja normalizacyjna internetowej pajęczyny - zaproponowała standard, jaki powinna posiadać grafika wektorowa - Scalable Vector Graphics (SVG). SVG inspirowany jest przedstawionymi wcześniej do standaryzacji przez W3C językami VML (przez Microsoft, Macromedia, i in.) oraz PGML (przez Adobe, Netscape, Sun i in.). Obecnie przodującą propozycją jest właśnie SVG. Opublikowanie w sierpniu tego roku specyfikacji SVG jako kandydata do standardu rozpoczyna ostatni etap w tworzeniu grafiki wektorowej. Wypracowane przez półtora roku (od 11 lutego 1999) pomysły zostały ujęte w jednolitą specyfikację, która poddawana jest teraz próbom implementacji. World Wide Web Consortium opublikowało również materiały służące do testowania nowych programów interpretujących SVG. W3C oczekuje na przysyłanie komentarzy, które wprowadzą ostatnie szlify do specyfikacji. W projekt zaangażowane są tak wielkie firmy jak: Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Macromedia, Apple, Xerox, Corel, Hewllet-Packard, Kodak, co powinno gwarantować sukces całej operacji.

Zalety i zastosowanie grafiki wektorowej

Większość stosowanej obecnie w Internecie grafiki to grafika rastrowa, która opisuje obraz piksel po pikselu. W efekcie niosące te informacje pliki mają duże rozmiary. Czasami obraz składa się z geometrycznych elementów, które mogłyby zostać zapisane matematycznym wzorem i dzięki temu format zapisu uległby drastycznemu skróceniu. Firmy zajmujące się oprogramowaniem graficznym dostrzegły takie zapotrzebowanie, tworząc kolejne standardy. Jednym z pierwszych stał się format Portable Document File (PDF) wymyślony przez Adobe, w którym oprócz tekstu mogły pojawiać się graficzne kształty opisane w pliku składnią postscriptową. Zmniejszyło to wielkość przesyłanych plików. Następnie firma Macromedia podbiła Internet formatem Shockwave Flash (SWF). Wektorowy zapis obiektów we Flashu dał możliwość skrócenia plików opisujących multimedialne prezentacje, a co za tym idzie, zwiększeniu uległa prędkość przesyłania takich danych. Obydwa formaty głęboko zakorzeniły się na stronach WWW. Kombinacje ich podstawowych cech nosi format SVG.

Grafika wektorowa daje możliwość takiego zapisania obrazu, dzięki któremu można go powiększać, wydobywając drobne szczegóły. Jednocześnie druk w wysokiej rozdzielczości zachowuje wysoką jakość obrazka. Format SVG zapewnia również możliwość używania wypełnień gradientowych, stosowania biblioteki filtrów, używania selektywnych masek, zastosowania skryptów i użycia metaodnośników.

Dzięki opracowaniu SVG na podstawie standardu XML format ten zyskał dużą przewagę na rywalami. XML jest językiem dającym możliwość opisania struktury danych. Grafika rastrowa jako monolityczny plik, nie pozostawia miejsca do określenia elementów składowych. Zawarty na obrazku GIF tekst nie ma już cech, które umożliwiają jego obróbkę w zwykłym edytorze tekstowym. Natomiast koło jest tylko plamą koloru, a nie elipsą o konkretnym promieniu.

W SVG rozbicie grafiki na elementy składowe pozwala na opisanie jej szczegółów. Grafika wektorowa może nieść ze sobą dane, które mogą być selektywnie edytowane i indeksowane. Wybranie esencji przekazu z szumu informacyjnego umożliwia dostosowanie efektu końcowego do potrzeb odbiorcy informacji. Dobrym przykładem może być upraszczanie grafiki na potrzeby urządzeń przenośnych poprzez wybór najistotniejszych jej elementów. Dane biznesowe zapisane w XML mogą być uzupełnione o dane graficzne przygotowane w formacie SVG. SVG może być szczególnie przydatny w tworzeniu map, wykresów, diagramów, schematów. Przygotowany za pomocą XML-a opis grafiki wektorowej może nieść informację nawet dla osób niepełnosprawnych. Ilustracje zapisane w SVG/XML staną się bardziej dostępne, oferując pełny opis zawartości obrazka dla osób niewidomych, a dla słabo widzących dostępna będzie możliwość ustawienia preferowanego powiększenia obrazka. Serwisy wyszukiwawcze będą mogły indeksować zasoby WWW pod względem zawartości grafiki, ponieważ SVG można przeszukiwać jako dokument tekstowy. Dzięki temu teksty na graficznych przyciskach czy nazwy ulic na mapach, nie będą kryły się w bitach grafiki rastrowej. Co więcej, grafika wektorowa będzie mogła być generowana w locie, na przykład poprzez oprogramowanie końcowe bazy danych.

Rysowanie - kodowanie

Postaram się przybliżyć strukturę formatu SVG, pokazując 8 przykładów z użyciem niektórych funkcji. Aby śledzić efekty, proponuję używać przeglądarki WWW - Internet Explorer lub Netscape Navigator i pobranej ze strony Adobe (http://adobe.com/svg/viewer/install/) wtyczki interpretującej format.

Nagłówki

Na początku każdego pliku SVG, tak jak na początku każdego dokumentu XML, występuje tag <xml> a następnie DTD (definicja typu pliku) w tagu <!DOCTYPE >. Podstawowym tagiem szkieletu SVG jest <svg> zawierający parametry wysokości i szerokości grafiki.

Przykład 1. Nagłówki

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<svg width="100" height="200">####

...########

</svg>#######

Tekst

Aby wstawić pierwszy tekst do naszego obrazka, użyjemy znacznika <text>, który w parametrze style zawarty ma zbiór właściwości graficznych. Parametr fill: ustawia kolor wypełnienia czcionki, font-size: ustala jej wielkość, a współrzędne x i y orientują go na płaszczyźnie. Rezultat: napis "To jest SVG." w kolorze szarym.

Przykład 2. Tekst

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<svg width="320" height="70">####

<text style="fill:gray; font-size:40" x="50" y="50" >To jest SVG.</text>

</svg>#######