Wstęp

Strony WWW w dużym uproszczeniu składają się z tekstu, arkuszy styli CSS określających ich wygląd oraz grafik pomagających w odbieraniu treści przez czytelnika lub stanowiących element ozdobny szaty graficznej.
Tekst jest elementem stosunkowo łatwym do "ujarzmienia", znacznie trudniej poradzić sobie z grafikami. Nie mogą być zbyt duże ponieważ wczytywanie będzie trwało zbyt długo, nie mogą być zbyt małe ponieważ będą nieczytelne. Nie ma mowy o powiększaniu czy obracaniu wstawionego na stronie obrazka, nie można także w żaden sposób kontrolować z poziomu kodu strony jego "zachowania" i wyglądu. Tego typu problemy związane są z ograniczeniami rasterowych formatów plików graficznych, wykorzystywanych w Internecie jak JPG, PNG i GIF.
Niektóre z wymienionych wyżej ograniczeń można "obejść", stosując rozmaite techniki wymagające instalacji specjalnych plug-in'ów do przeglądarek (np. "Live Picture", MetaStream itp.). Ogromną popularność zdobyła także technologia Flash, opracowana przez firmę Macromedia (obecnie Adobe), bazująca na wektorowej definicji obiektów graficznych i specjalnym języku opisu ich zachowań ActionScript. Nawet ostatni z wymienionych standardów, chociaż pozbawiony wad formatów rasterowych, nie jest jednak w stanie zaspokoić rosnących wymagań projektantów i użytkowników serwisów WWW. Dlatego konsorcjum W3C (World Wide Web Consorcium), wyznaczające drogi rozwoju globalnej pajęczyny, powołało w 1999 roku do życia projekt SVG. Litery SVG są akronimem terminu Scalable Vector Graphics i oznaczają pewną szczególną implementację języka XML, napisaną specjalnie dla potrzeb dwuwymiarowej grafiki wektorowej.

Porównanie dwóch formatów grafiki wektorowej: SWF i SVG

Większość programów graficznych, jakimi posługują się projektanci stron WWW operuje na obiektach wektorowych, ponieważ są one bezstratnie skalowalne (jakość nie pogarsza się wraz z powiększeniem), można nimi łatwo zarządzać (usuwać, modyfikować, przenosić), można je łatwo animować i dynamicznie wpływać na tę animację poprzez np. dobór jej parametrów... Zalet jest wiele... Kiedy tworzysz kółko w Photoshop'ie , Corel'u lub Firework'sie jego definicja zapisywana jest w wewnętrznym formacie wektorowym, dzięki czemu możesz je swobodnie przemieszczać, skalować, zmieniać wypełnienie i wszystko bez utraty jakości. W tradycyjnym scenariuszu, po zakończeniu edycji obrazka, użytkownik zapisuje wynik w jednym z formatów rasterowych, pozbawiając grafikę wyżej wymienionych zalet (jest to tzw. rasteryzacja z postaci wektorowej) albo "kompiluje" swoje dzieło do postaci specyficznego, nieczytelnego dla człowieka formatu (tak jak jest to w przypadku plików wynikowych Flasha - SWF).

Wyższość SVG polega na tym, że eksportowany obraz zapisywany jest w formacie tekstowym, tzn. po otworzeniu takiego pliku w programie Notatnik, możemy zobaczyć jaki promień mają koła zawarte w grafice, jaka jest wielkość poszczególnych kwadratów itp...
Wszystko zapisyane jest za pomocą języka SVG będącego pochodną XMLa, który w ostatnim czasie sporo namieszał w komputerowym światku stając się uniwersalnym sposobem przechowywania informacji. Taka grafika nie jest skompilowana (w przeciwieństwie do formatu SWF), możemy ją dowolnie zmieniać, przesuwając wedle uznania poszczególne elementy. Tak jak w przypadku Flasha obraz eksportowany jest również do postaci wektorowej, ale w SVG nie tracimy w trakcie tego procesu nawet ułamka wyjściowej dokładności (jak w formacie SWF).
Zapisując swoją pracę jako SWF musimy pozostawić na dysku również plik FLA zawierający w surowym formacie nasze dzieło. Po utracie pliku FLA (mnie niejednokrotnie przydażył się taki dyskomfort) nie jesteśmy w stanie odzyskać 100% informacji z pliku SWF używając nawet najbardziej zaawansowanych dostępnych obecnie dekompilatorów formatu SWF [Zajrzyj do: LHP - FAQ Wszechtematyczne]. To prawdopodobnie największy minus Flasha przemawiający zdecydowanie na korzyść formatu SVG. Oczywiście można byłoby wspomnieć o cenie samego pakietu Adobe Flash, jednak porównanie tego z zupełnie darmowym SVG jest rzeczą zbędną.
Grafika wektorowa nie jest idealnym rozwiązaniem w każdym przypadku. W celu zapisania fotografii lepiej posłużyć się formatem JPEG zaś do przechowania obrazka, składającego się z dużych, jednokolorowych obszarów, formatami GIF lub PNG. Zarówno Flash jak i SVG znakomicie nadaje się do odtwarzania różnego rodzaju ilustracji (tzw. "artwork'ów"), szczególnie, gdy zachodzi potrzeba ich skalowania bez utraty jakości. Ważną cechą specyfikacji SVG (jak również Flash) jest możliwość włączania w dokumenty w tym formacie "tradycyjnych" obrazków JPEG czy PNG. Ponadto dokument SVG może zawierać precyzyjnie sformatowany tekst, każdemu obiektowi możemy przypisać funkcję obsługi zdarzeń (np. onmouseover, onclick itp.) i stworzyć interaktywną animację sterowaną z poziomu kodu w jednym z języków skryptowych (podobnie działa ActionScript stosowany w technologii Flash).
Widzimy dużo podobieństw w opisie tych dwóch technologii i tak jest w istocie w praktyce. Jeden z tych formatów ma przyszłość.
Podsumowując, jako duży zwolennik (oczywiście tam gdzie jest to możliwe) zarówno protokołów jak i formatów tekstowych (czytelnych dla człowieka bez potrzeby używania specjalnych narzędzi dekodujących) będę obstawał za ujednoliceniem i uproszczeniem wszystkich formatów plików (których jest obecnie kilka tysięcy), więc wybiorę SVG. Największym moim zmartwieniem od tej pory będzie mała liczba aplikacji wspomagających tworzenie SVG (jak fatalny Inkscape), jednak jeśli tylko będe chciał mogę "napisać obrazek" w systemowym Notatniku i będzie on tak samo dobry jak stworzony we Flashu. Mogę również, korzystając z PHP czy innego języka server-side, dynamicznie generować skomplikowane animacje, wedle aktualnej potrzeby.

Nowy (stary) format a psychika WebMastera i kompatybilność

Z punktu widzenia WebMastera, używanie SVG nie różni się na razie od stosowania innych rozwiązań oferujących wektorowy zapis obiektów graficznych (przytaczany Flash, ale również PDF) - w obu przypadkach należy włączyć specjalną dyrektywą obiekt zawarty w zewnętrznym pliku w formacie SVG, Flash, PDF lub innym do dokumentu HTML. Należy jednak pamiętać, że w przeciwieństwie do konkurencyjnych technologii, SVG jest implementacją języka XML, który w przyszłości ma się stać (i powoli się staje) podstawowym standardem w sieci ( konsorcjum W3C oficjalnie ogłosiło zaprzestanie rozwijania HTML-a i zastąpienie go językiem XHTML bazującym na XML-u). Gdy przeglądarki będą już w zadowalający sposób interpretowały dokumenty XML (jak Opera) i większość stron "podpiętych" do Internetu tworzona będzie w tym języku, wektorowe obiekty SVG "włączą się" w ciało strony WWW, stanowiąc jej integralną część.
Jednak na razie (rok 2008) jest jeszcze za wsześnie by implementować tego typu rozwiązania w swoich serwisach, gdyż najpopularniejsza obecnie przegladarka Internet Explorer do tej pory nie posiadła możliwości obsługi SVG. Jest to swego rodzaju skandal, ale również możliwość wybicia się przeglądarek alternatywnych, od dawna obsługujących ten przyszłościowy standard jak Opera (SVGT) czy przeglądarki oparte na silniku Gecko.

Przykład SVG - czyli jak to działa?

Nie miałem większych problemów z opanowaniem w podstawowym stopniu języka SVG na potrzeby tego artykułu (i z własnej ciekawości). Zaprezentuje teraz przykład animowanej grafiki SVG w formie tekstowej i wynik działania parsera w postaci wyświetlonego obrazka. Pokażę również jak wstawiać tego typu obiekt do dokumentu XHTML. Zacznijmy od kodu obrazka SVG jaki udało mi się napisać: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g transform="rotate(-45)"> <rect x="50" y="50" width="100" height="100" stroke="red" fill="lime"> <animateColor attributeName="fill" values="red;lime;red;blue;yellow;red;" dur="10s" repeatCount="indefinite" /> <animateColor attributeName="stroke" values="red;green;" dur="20s" repeatCount="1" /> </rect> </g> </svg> Powyższy kod rysuje obrócony o 45 stopni kwadrat o płynnie zmieniających się kolorach jego wypełnienia (w okresie 10 sekund), na płótnie wielkości 300 na 200 pikseli (rozmiar płótna można podawać również w centymetrach!). Taka animowana grafika zajmuje... (uwaga!) 516 bajtów ;) (a można to jeszcze znacznie ścieśnić). SVG osadza się w dokumencie XHTML jako obiekt, w następujący sposób: <object data="sciezka_do_pliku.svg" type="image/svg+xml" width="300" height="200"></object>

Zakończenie

Reasumując, dopóki Internet Exploer i inne przegladarki (jak Safari, Galeon, Mosaic) nie posiądą obsługi formatu SVG, dopóty trzeba będzie stosować w plikach SVG specjalne warunki umożliwiających wczytanie tym przeglądarkom zawartości odpowiadającej źródłowej, ale w obsługiwanym przez nie formacie.

Niestety taka jest rzeczywistość rynku przeglądarek.
Pocieszeniem może być fakt, iż coraz więcej stron jest tworzonych w XHTML (który jest niejako spokrewniony z SVG). Może więc i ten przyszłościowy stadnard, jakim jest SVG, zostanie już w najbliższej przyszłości ponownie odkryty? Mam nadzieję, że również przykład Wikipedii (posiadającej w swoich zbiorach mnóstwo rycin technicznych wykonanych właśnie przy użyciu SVG) nie pozostanie bez echa i wymusi na "grupie trzymającej władzę" zmianę zdania i wprowadzenie obsługi tego standardu do swoich produktów, co pozwoli na dalszy rozwój światowej sieci WWW.
...a póki co prawda jest taka, że dzisiaj, chcąc przekonwertować zdjęcie na SVG musimy posłużyć się paradoksalnie... znakomitym narzędziem VectorMagic napisanym we... Flashu ;) Tym akcentem zakończę tę polemikę.

• VectorMagic - znakomite narzędzie on-line pozwalające przekowertować zdjęcia rasterowe (typu JPG) na SVG (działa podobnie jak opcja "Trace bitmap" w programie Adobe Flash)
• OpenClipart.org/ - wielka galeria darmowych grafik SVG
• Strona konsorcjum W3C poświęcona standardowi SVG
• Kurs SVG serwisu WebHelp
• Kurs SVG - wersja offline
• Ciągle rozwijany kurs SVG na developer.mozilla.org
• Walidator W3C standardu SVG - narzędzie pozwalające zweryfikować, czy napisany przez nas kod SVG jest zgodny ze standardem
• Porównanie przegladarek internetowych, zestawienie obsługi SVG w poszczególnych przegladarkach - jeśli któraś z przegladarek posiądzie obsługę SVG, na tej podstronie się tego dowiesz