Grafika wektorowa WWW

Animacja

Każdy element grafiki wektorowej można wprawić w ruch. Nasz przykład polega na animacji prostokąta i linijki tekstu. Obydwa elementy opisujemy standardowymi tagami <rect> i <text>. Gdy chcemy, żeby tekst pojawiał się w konkretnej sekundzie animacji, najpierw go ukrywamy, nadając mu parametr visibility:hidden. Aby prostokąt przemieszczał się, dając złudzenie dojeżdżania do ekranu, współrzędne jego lewego górnego rogu muszą maleć, a parametry szerokości i wysokości rosnąć. Tag <animate> daje możliwość ustalenia zmiany atrybutów taga <rect> w trakcie trwania animacji. Tag <animate> zawiera wartości takie jak: attributeName - nazwa parametru, attributeType - typ parametru, begin - czas rozpoczęcia zmiany parametru, dur - czas trwania zmiany oraz fill - jako parametr stanu końcowego. Po nadaniu parametrowi fill wartości freeze, obiekt pod koniec czasu trwania zmiany zachowa swoje nowe parametry. Jeżeli parametrowi fill nadalibyśmy wartość remove, obiekt powróciłby do swojego pierwotnego stanu.

Wszystkie zmiany dotyczące prostokąta zgrupowane są wewnątrz tagu <rect>... </rect>. Następnie określamy zmiany, które będą dotyczyć tekstu Rusza się! Tag <g> służy do grupowania obiektów. Jako jego parametr zastosowałem transform, który przenosi początek układu współrzędnych w punkt (100,100) i który będzie w 3. sekundzie punktem początkowym tekstu. W 3. sekundzie animacji pojawia się tekst. Potrzebna jest do tego zmiana parametru stylu CSS tego obiektu z visibility:hidden na visibility:visible. Tę jednokrotną zmianę wykonujemy tagiem <set>, ustawiając jego parametry w podobny sposób jak <animate>. Parametr to zawiera wartość, na jaką ma być zmienione visibiity. Znacznik <animateMotion> pozwala na przesuwanie początku obiektu po zadanej ścieżce określonej w path. Znacznik <animateColor> pozwala na płynną zmianę koloru w trakcie animacji. Natomiast <animateTransform> służy do nadawania obiektowi transformacji określonych w parametrze type. W naszym przypadku jest to obrót (rotate) i zwiększenie skali (scale). Odpowiednie parametry deklarują czas trwania zmian i wartości krańcowe zmiany parametrów. Efekt: animacja, która składa się ze scen: prostokąt przybliża się do użytkownika, w 3. sekundzie pojawia się tekst i przesuwa się w poprzek grafiki, zmienia swój kolor z niebieskiego na ciemnoczerwony, obraca od 30 stopni do 0 i powiększa się trzykrotnie. Wszystkie operacje przebiegają równolegle i dokładnie w zadanym przedziale czasowym.

Przykład 8. Animacja

<?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="800" height="300" >####

<rect x="300" y="100" width="300" height="100" style="fill:rgb(255,255,0)" >

<animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" />

<animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" />

<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" />

<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" />

</rect>#######

<g transform="translate(100,100)" >

<text x="0" y="0" style="font-family:Verdana; font-size:35.27; visibility:hidden" >

Rusza sie!#######

<set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" />

<animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" />

</text>#######

</g>########

</svg>#######

Oprogramowanie

Oczywiście zaprojektowanie skomplikowanej grafiki wektorowej metodą edycji kodu jest wielce problematyczne. Wymagałoby wielu prób lub dobrej wyobraźni przestrzennej. Na szczęście gotowe są już implementacje SVG pozwalające na edycję, przeglądanie czy konwersję do tego formatu.

Przeglądarki plików grafiki wektorowej

Wśród przeglądarek SVG na prowadzenie wysuwają się dwa programy. Pierwszy z nich to CSIRO SVG Viewer 20000806. Główną zaletą tego programu jest 90-procentowa implementacja specyfikacji SVG Candidate Release (z dnia 2.08.2000r.). Dzięki temu każdy utworzony obraz SVG będzie zgodny z przyszłymi normami nowego standardu, już po ich ogłoszeniu.

W programie brakuje natomiast narzędzi do manipulacji tekstem. Na przykład: nie można go skopiować do schowka lub wywołać opcji Szukaj tekst w dokumencie. Brak również podglądu dokumentu w postaci drzewa XML i walidacji kodu na zgodność ze składnią SVG. Jeżeli wczytamy źle sformowany SVG, przeglądarka nie opisze jego błędów. Można się jedynie dopatrzyć opisów błędów programu, które przedstawia konsola Java w oknie. Utworzenie takiego programu na bazie platformy Java daje możliwość uruchomienia przeglądarki w środowiskach Linux, X-Window lub systemie Windows 9x. Niestety, program rozpoznaje strukturę SVG bardzo wolno. Spowodowane jest to oparciem przeglądarki na bardzo rozbudowanych parserach (funkcjach rozpoznawania struktury XML, CSS2 i DOM2, które skądinąd obsługują najnowsze propozycje standardów z W3C.