Podręcznik użytkownika Anuluj

SVG

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.

Informacje o formacie SVG

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.

Stosowanie efektów SVG

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.

Uwaga:

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.

  1. Zaznacz obiekt lub grupę (albo wybierz warstwę na panelu Warstwy).
  2. 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

    1. Wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG.

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

    1. Wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG.

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

Uwaga:

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.

Importowanie efektów z pliku SVG

  1. Wybierz polecenie Efekt > Filtr SVG > Importuj filtr SVG.

  2. Wybierz plik SVG, z którego będą importowane efekty, i kliknij opcję Otwórz.

Omówienie panelu Interakcyjność SVG

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.

Usuwanie zdarzenia z panelu Interakcyjność SVG

Za pomocą panelu Interakcyjność SVG można usunąć jedno lub wszystkie zdarzenia.

Aby usunąć jedno zdarzenie

  • Wybierz zdarzenie i kliknij opcję Usuń wybrany wpis .

Aby usunąć wszystkie zdarzenia

  • Z menu panelu wybierz polecenie Wyczyść zdarzenia.

Wyświetlanie, dodawanie lub usuwanie zdarzeń połączonych z plikiem

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

Dodawanie funkcji interaktywnych SVG do kompozycji

  1. Zaznacz zdarzenie na panelu Interakcyjność SVG. (Zobacz Zdarzenia SVG).

  2. Wpisz odpowiedni kod JavaScript i wciśnij klawisz Enter.

Zdarzenia SVG

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.

Wskazówki dotyczące plików SVG

  • 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).

Opcje eksportu SVG zoptymalizowane pod kątem przeglądarek internetowych

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.


Zasoby pokrewne

Skontaktuj się z nami

Zapytaj społeczność

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.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?