Informacje o korzystaniu z formatu SVG w dokumentach XML i JavaScript w celu tworzenia interaktywnej grafiki internetowej, która reaguje na czynności użytkownika takimi efektami, jak podświetlanie, etykietki ekranowe, dźwięki i animacje.
Format SVG, czyli format skalowalnej grafiki wektorowej, opisuje obrazy za pomocą kształtów, ścieżek, tekstu i efektów filtra. Pliki w tym formacie są niewielkie, a zapisana w nich grafika jest doskonałej jakości. Nadaje się on zarówno do wyświetlania w sieci WWW, drukowania, jak i wyświetlania przez urządzenia z ograniczonymi zasobami (w przeciwieństwie do formatów GIF, JPEG, WBMP i PNG, które generują duże pliki). Użytkownicy mogą powiększać obrazy SVG bez utraty ich szczegółowości, ostrości i przejrzystości. Co więcej, format SVG zapewnia doskonałą obsługę tekstu i kolorów — użytkownicy będą widzieć obrazy w takiej postaci, w jakiej są one wyświetlane na Twoim obszarze roboczym programu Illustrator.
Format SVG jest oparty całkowicie na standardzie XML, co czyni go użytecznym zarówno dla programistów, jak i użytkowników.
Kompozycję można zapisać w formacie SVG, używając poleceń Zapisz, Zapisz jako, Zapisz kopię oraz Zapisz do pokazania w Internecie i na urządzeniach. Aby uzyskać dostęp do pełnego zestawu opcji eksportu SVG, użyj polecenia Zapisz, Zapisz jako lub Zapisz kopię. Polecenie Zapisz do pokazania w Internecie i na urządzeniach udostępnia podzestaw opcji eksportowania SVG odpowiedni do materiałów publikowanych w sieci WWW.
Efekty SVG umożliwiają dodawanie do kompozycji pewnych elementów graficznych, na przykład cieni. Filtry SVG tym różnią się od ich odpowiedników bitmapowych, że są oparte na standardzie XML i niezależne od rozdzielczości. W rzeczywistości filtr SVG jest zbiorem właściwości XML, które opisują różne operacje matematyczne. Operacje te są przeprowadzane na elementach grafiki źródłowej.
Program Illustrator udostępnia domyślny zestaw efektów SVG. Można używać tych efektów z ich właściwościami domyślnymi, zmodyfikować kod XML, aby utworzyć niestandardowe efekty, a także tworzyć całkiem nowe efekty SVG.
Aby zmodyfikować domyślne filtry SVG programu Illustrator, edytuj Filtry Adobe SVG za pomocą edytora tekstu. Plik SVG znajduje się w folderze Documents and Settings/<folder_użytkownika>/Application Data/Adobe/Adobe Illustrator Settings/<miejsce>. Możesz modyfikować istniejące definicje filtrów, usuwać je i dodawać nowe.
Aby zastosować efekt, wykonaj jedną z następujących czynności:
Z ustawieniami domyślnymi
Wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG.
Z niestandardowymi ustawieniami
Wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG.
W wyświetlonym oknie dialogowym wybierz pożądany efekt i kliknij przycisk Edytuj filtr SVG . Zmodyfikuj kod domyślny i kliknij przycisk OK.
Tworzenie i stosowanie nowego efektu
Wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG.
W wyświetlonym oknie dialogowym wybierz pożądany efekt i kliknij przycisk Nowy filtr SVG . Wprowadź nowy kod i kliknij przycisk OK.
Po zastosowaniu efektu filtra SVG program Illustrator wyświetl na obszarze roboczym zrasteryzowaną wersję efektu. Aby zmienić rozdzielczość obrazu tego podglądu, zmodyfikuj ustawienia rozdzielczości rasteryzacji dokumentu.
Jeśli do obiektu przypisano wiele efektów, efekt filtra SVG musi być przypisany jako ostatni; innymi słowy, musi znajdować się na samym dole panelu Wygląd (tuż nad pozycją Przezroczystość). Jeśli inne efekty następują po efekcie filtra SVG, plik SVG będzie zawierał obiekt rastrowy.
Wybierz polecenie Efekt > Filtr SVG > Importuj filtr SVG.
Wybierz plik SVG, z którego będą importowane efekty, i kliknij opcję Otwórz.
Panel Interakcyjność SVG umożliwia wyświetlenie wszystkich zdarzeń i plików JavaScript skojarzonych z bieżącym plikiem.
Za pomocą panelu Interakcyjność SVG (Okno > Interakcyjność SVG) można dodawać funkcje interaktywne w kompozycjach, które będą eksportowane z myślą o wyświetlaniu w przeglądarkach WWW. Można na przykład utworzyć zdarzenie skojarzone z takim poleceniem języka JavaScript, które w odpowiedzi na przesunięcie kursora nad pewnym obiektem uaktywnia animację na stronie WWW.
Za pomocą panelu Interakcyjność SVG można usunąć jedno lub wszystkie zdarzenia.
Aby usunąć jedno zdarzenie
Aby usunąć wszystkie zdarzenia
Wybierz opcję Połącz pliki JavaScript i kliknij przycisk Dodaj, aby dodać kolejne pliki JavaScript. Aby zamiast tego usunąć zaznaczony wpis JavaScript, kliknij przycisk Usuń.
Zaznacz zdarzenie na panelu Interakcyjność SVG. (Zobacz Zdarzenia SVG).
Wpisz odpowiedni kod JavaScript i wciśnij klawisz Enter.
onfocusin
Wyzwala określone zadanie, gdy element uzyskuje fokus, np. jest wskazywany myszą.
onfocusout
Wyzwala określone zadanie, gdy element traci fokus (często wówczas, gdy fokus przenosi się na inny element).
onactivate
Wyzwala określone zadanie w odpowiedzi na kliknięcie myszą lub naciśnięcie klawisza (zależnie od elementu SVG).
onmousedown
Wyzwala określone zadanie w odpowiedzi na naciśnięcie przycisku myszy, gdy wskaźnik znajduje się na elemencie.
onmouseup
Wyzwala określone zadanie w odpowiedzi na zwolnienie przycisku myszy, gdy wskaźnik znajduje się na elemencie.
onclick
Uaktywnia określone zadanie w odpowiedzi na kliknięcie elementu.
onmouseover
Uaktywnia określone zadanie w odpowiedzi na przeniesienie kursora na element.
onmousemove
Uaktywnia określone zadanie w momencie umieszczenia kursora na elemencie.
onmouseout
Uaktywnia określone zadanie w odpowiedzi na przeniesienie kursora z elementu.
onkeydown
Uaktywnia określone zadanie po naciśnięciu klawisza.
onkeypress
Uaktywnia określone zadanie, gdy naciśnięty jest określony klawisz.
onkeyup
Uaktywnia określone zadanie po zwolnieniu klawisza.
onload
Wyzwala określone zadanie, gdy przeglądarka zakończy analizowanie dokumentu SVG. Tego zdarzenia należy używać do wywoływania jednorazowych funkcji inicjujących.
onerror
Wyzwala określone zadanie, gdy element nie zostanie wczytany poprawnie lub wystąpią inne błędy.
onabort
Wyzwala określone zadanie, gdy wczytywanie strony zostanie zatrzymane przed całkowitym wczytaniem elementu.
onunload
Wyzwala określone zadanie po usunięciu dokumentu SVG z okna lub ramki.
onzoom
Wyzwala określone zadanie po zmianie poziomu powiększenia dokumentu.
onresize
Uaktywnia określone zadanie po zmianie rozmiarów okna dokumentu.
onscroll
Wyzwala określone zadanie w odpowiedzi na przewijanie dokumentu.
Warstwy określają strukturę pliku SVG. Podczas zapisywania kompozycji w formacie SVG każda warstwa jest konwertowana na element grupy (<g>). (Na przykład, warstwa o nazwie Przycisk1 staje się w pliku SVG elementem <g id="Przycisk1_ver3.0">). Warstwy zagnieżdżone stają się zagnieżdżonymi grupami SVG, a warstwy ukryte są zachowywane z właściwością SVG display="none".
Aby obiekty na różnych warstwach były przezroczyste, zmień krycie poszczególnych obiektów, a nie warstw.
W przeglądarce SVG dane rastrowe nie są skalowalne i nie mogą być edytowane tak jak inne elementy SVG. Jeśli to możliwe, należy unikać tworzenia kompozycji, które w pliku SVG będą ulegać rasteryzacji. Aby dodać efekty graficzne bez powodowania rasteryzacji, użyj efektów SVG.
Należy używać symboli i upraszczać ścieżki kompozycji. Jeśli trzeba utrzymać wysoką wydajność, należy też unikać stosowania pędzli generujących skomplikowane ścieżki, takich jak Węgiel drzewny i Pióro przewijania.
Dodawanie łączy internetowych do pliku SVG umożliwiają plasterki, mapy obrazów i skrypty.
Języki tworzenia skryptów, takie jak JavaScript, pozwalają rozszerzyć funkcje plików SVG. Funkcje zaprogramowane w tych językach mogą być wywoływane w reakcji na dane z klawiatury lub myszy — na przykład w celu utworzenia efektów najazdu (rollover).
Dostępna jest nowa opcja eksportu do formatu SVG (Plik > Eksportuj > Eksportuj jako > SVG). Nowy obieg pracy umożliwia generowanie bazujących na standardach i zoptymalizowanych pod kątem Internetu plików SVG na potrzeby projektów internetowych i ekranowych. Więcej informacji można znaleźć w opisie opcji eksportowania formatu SVG.
Jeśli masz pytanie lub chcesz się podzielić pomysłem, dołącz do nas na forum użytkowników programu Adobe Illustrator. Chętnie Cię poznamy.
Zaloguj się na swoje konto