artykuły

SVG - Czyli tekstowy format grafiki wektorowej

15:07
pią, 30 marzec 2001
Nadchodzi wielkimi krokami nowy (stary) standard zapisu grafiki wektorowej - SVG. Dzięki temu językowi możemy wprost "napisać obrazek w systemowym Notatniku", a później przekazać go parserowi SVG w celu wyświetlenia np. w oknie przegladarki. Grafika wektorowa jest dziś reprezentowana głównie przez Adobe Flash, czy w najbliższej przyszłości się to zmieni? Czy SVG ma szanse wyprzeć Flasha? W tym artykule staram się przedstawić standard SVG i odpowiedzieć na nurtujące pytania.

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 wcześnie by implementować tego typu rozwiązania w swoich serwisach, gdyż najpopularniejsza obecnie przeglądarka 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.

<!--[if gte IE 7]><!--> <object data="./sciezka_do_pliku.svgz" width="128" height="128"> <object data="./sciezka_do_pliku.svg" width="128" height="128"> <img src="./alternatywna_sciezka_do_pliku.png" alt="=(" width="128" height="128" /> </object> </object> <!--><![endif]--> <!--[if lt IE 7]> <img src="./alternatywna_sciezka_do_pliku.png" alt="=(" width="128" height="128" /> <![endif]-->

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ę.

12345
SVG - Czyli tekstowy format grafiki wektorowej Autor opinii: Czytelnicy, data przesłania: 5

Podobne artykuly:

Skomentuj

Aby zamieścić komentarz, proszę włączyć JavaScript - niestety roboty spamujące dają mi niezmiernie popalić.






Komentarze czytelników

    • menel
    • śro, 14 grudzień 2016, 14:55
    • mam dałna xD
    • m0rt
    • pią, 23 wrzesień 2011, 12:30
    • Technologia idzie do przodu proszę Pana, nigdy nie cofa się do tyłu. Po co komuś plik, który zajmuje 1kb, a wygląda jak grafika z lat 90ych w dobie internetu min. 6Mb? Flash zostanie wyparty pewnie przez jakąś nową technologię/język, lecz taki, który będzie miał coś do zaoferowania, np. pełne animacje 3D, usprawnione update'y na site'ach. Dla mnie SVG to taki SMIL. Echo przeszłości, pomysł który się nie przyjął za bardzo i się już nie przyjmie. Jest jedna przyszłość w postaci grafiki 3D, w tym animacji 3D na stronach, rysunków technicznych 3D, które można dowolnie obracać, skalować, przeglądać. Moim zdaniem, nie urażając nikogo, SVG może się podobać jedynie 50-o letnim profesorom z polskich uczelni, którzy zafascynowani są tym, że mogą sobie proste rysunki robić, bo nie znają ani Flasha, ani AS'a, ani 3D studio, ani dowolnego języka skryptowego ze środowiska 3D, nie wspominając już o silnikach graficznych, czy tez ich problemach ze zrozumieniem C++, OpenGL i DirectX'em, z tego względu, że ich "ciasne" umysły po prostu takiej wiedzy nie przyswoją. Tutaj jest future. A nie w prymitywnych obrazkach, które zajmują parę kilo, posiadają ograniczone opcje animacyjne i interakcyjne...




      Odp: Technologia, jak Pan powiedział, idzie do przodu i dlatego właśnie przyszłość należy do SVG, obiektu Canvas, znaczników Video i innych elmentów HTML5.

      To już nawet nie chodzi o wielkość, możliwość dynamicznego generowania grafiki wektorowej przez serwer, szybkości działania i ładowania, identyczne możliwości graficzne jak Flash, ale przede wszystkim o interakcje (i integrację!) z pozostałymi elementami strony, np. poprzez JavaScript i integrację z szatą graficzną.

      Niestety rozwój nie polega na tym, żeby wszystkie te rzeczy upychać do jednego pluginu, który w ramach osobnego procesu wyświetla swoje okienko na stronie, ale aby każda część mogła się samodzielnie rozwijać.

      Widzę, że ma Pan bardzo złe zdanie o polskim szkolnictwie wyższym. Oczywiście po części podzielam Pana opinię, ale muszę zauważyć, że mnie uczono właśnie Adobe Air :)

      Proszę zauważyć, że już nawet YouTube powoli rezygnuje z Flasha, zastępując go obiektami Canvas czy znacznikiem Video.
    • m0rt
    • śro, 21 wrzesień 2011, 8:55
    • Moim zdaniem SVG to kolejny "cud", który cudem się nie okazał, stara technologia wyparta przez flash'a. Chcesz coś zrobić porządnego? Ucz się flasha i AS!!




      Odp: Bzdura kompletna. Obie technologie są w wielu zastosowaniach rozłączne. Po pierwsze, trzeba powiedzieć, że popularność SVG będzie rosła w miarę upowszechniania się HTML5 i przeglądarek obsługujących SVG. Proszę zauważyć, że w Internet Explorerze, obsługa SVG została zaimplementowana dopiero w wersji 9.

      Zobaczy Pan jak chętnie webmasterzy sięgną kiedyś do tej technologii, tworząc skalowalne grafiki na strony zajmujące ok. 1kB.

      Po drugie, technologia nie jest stara. To tylko meta-język, który w każdej chwili można rozbudować i przetwarzać. Proszę również zauważyć, że SVG został opracowany w 2006 roku, natomiast pierwsza wersja Flasha wyszła w 1996 roku. Która technologia jest zatem stara?



      P.S. Czy próbował Pan kiedyś ustawić plik SWF jako tło strony w pliku CSS?
    • nick
    • czw, 26 luty 2009, 16:08
    • Na moim komputerze powyższy przykład na plik SVG udowadnia, że ta technologia nie działa. Ciekawe, że nawet osoby publikujące galerie ze swoimi grafikami umieszczają GIF-y lub PNG-y :(



      Odp: Rzeczywiście - plik przestał działać. Teraz jest już wszystko OK. Plik przestał działać ponieważ konsorcjum W3C usunęło ze swojego serwera plik DTD który był używany przez moją aplikację SVG. Tym razem nagłówek DTD jest już taki jak być powinien i animacja powinna się wyświetlać we wszystkich przeglądarkach ją obsługujących. Dziękuję za zwrócenie uwagi.
Dexter