Informacje o SVG

Obrazy zapisane w formacie grafiki bitmapowej (GIF, JPEG, WBMP i PNG) są reprezentowane przez siatkę pikseli. Uzyskiwane pliki są duże, dostosowane do jednej rozdzielczości (zwykle małej) i zajmują sporo miejsca w sieci Web. Z drugiej strony, format SVG, czyli format skalowalnej grafiki wektorowej, opisuje obrazy za pomocą kształtów, ścieżek, tekstów i efektów filtra. Uzyskiwane pliki są niewielkie, a zapisana w nich grafika jest doskonałej jakości. Nadaje się zarówno do wyświetlania w sieci Web, drukowania, jak i wyświetlania przez urządzenia z ograniczonymi zasobami. 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ą oglądać obrazy w takiej postaci, w jakiej są wyświetlane w obszarze roboczym programu Illustrator.

Format SVG jest oparty całkowicie na standardzie XML, co czyni go użytecznym zarówno dla deweloperów, jak i użytkowników. Grafika w formacie SVG może być projektowana w językach XML i JavaScript. Dzięki temu jest interaktywna, reaguje na czynności użytkownika takimi efektami, jak podświetlanie, etykietki ekranowe, dźwięki, animacje.

Użytkownik możesz zapisać grafikę w formacie SVG za pomocą polecenia Zapisz, Zapisz jako, Zapisz kopię lub Zapisz dla Internetu i urządzeń. Aby uzyskać dostęp do pełnego zestawu opcji eksportu SVG, użyj polecenia Zapisz, Zapisz jako lub Zapisz kopię. Polecenie Zapisz dla Internetu i urządzeń udostępnia podzestaw opcji eksportowania SVG, dostosowany do materiałów internetowych.

Ostateczna postać pliku SVG zależy od skonfigurowania kompozycji w programie Illustrator. Warto przestrzegać następujących zasad:

  • 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. Jeśli krycie zostanie zmienione na poziomie warstw, w wynikowym pliku SVG nie będzie takiej przezroczystości, jaką widać w programie Illustrator.

  • W przeglądarce SVG dane rastra 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 byłyby rasteryzowane. Przy zapisywaniu w formacie SVG są rasteryzowane obiekty i siatki gradientów, zawierające efekty Rasteryzuj, Artystyczne, Rozmycie, Pociągnięcia pędzlem, Zniekształcanie, Pikslowanie, Wyostrzenie, Szkic, Stylizacja, Tekstura i Wideo. Podobnie, rasteryzację powodują wszystkie style graficzne zawierające wymienione efekty. 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 na przykład z klawiatury lub w odpowiedzi na ruch myszy. Za pomocą skryptów wykorzystujących model DOM (Document Object Model) można otwierać i modyfikować pliki SVG, np. wstawiać i usuwać elementy wektorowe.

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 zawiera domyślny zestaw efektów SVG. Możesz skorzystać z filtrów o własnościach domyślnych, utworzyć efekty niestandardowe edytując własności domyślne, a także utworzyć 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ę (ewentualnie naceluj warstwę w panelu Warstwy).
  2. Wykonaj jedną z następujących czynności:
    • Aby zastosować efekt o ustawieniach domyślnych, zaznacz wybrany efekt w dolnej części podmenu Efekt > Filtry SVG.

    • Aby zastosować efekt o ustawieniach niestandardowych, wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG. W wyświetlonym oknie dialogowym zaznacz wybrany efekt i kliknij przycisk Edytuj filtr SVG .Przeprowadź edycję kodu domyślnego i kliknij OK.

    • Aby utworzyć i zastosować nowy efekt, wybierz polecenie Efekt > Filtry SVG > Zastosuj filtr SVG. W oknie dialogowym kliknij przycisk Nowy filtr SVG wprowadź nowy kod i kliknij przycisk OK.

      Po zastosowaniu efektu filtra SVG, program Illustrator wyświetla w obszarze ilustracji zrasteryzowaną wersję efektu. Aby zmienić rozdzielczość obrazu podglądu, przeprowadź edycję 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. Zaznacz plik SVG, z którego będą importowane efekty i kliknij Otwórz.

Omówienie panelu Interakcyjność SVG

W kompozycjach eksportowanych do późniejszego wyświetlania w przeglądarkach WWW można wprowadzić funkcje interaktywne. Służy do tego panel Interakcyjność SVG (Okno > Interakcyjność SVG). Możesz 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ę strony WWW. Panel Interakcyjność SVG pozwala obejrzeć wszystkie zdarzenia i pliki JavaScript skojarzone z bieżącym plikiem.

Usuwanie zdarzenia z panelu Interakcyjność SVG

  • Aby usunąć jedno zdarzenie, zaznacz je i kliknij przycisk Usuń, albo wybierz polecenie Usuń zdarzenie z menu panelu.
  • Aby usunąć wszystkie zdarzenia wybierz polecenie Wyczyść zdarzenia z menu panelu.

Sporządzanie listy, dodawanie lub usuwanie zdarzeń połączonych z plikiem

  1. Kliknij przycisk Połącz pliki JavaScript .
  2. W oknie dialogowym Pliki JavaScript wybierz wpis JavaScript i wykonaj jedną z następujących czynności:
    • Kliknij Dodaj, aby odszukać dodatkowe pliki JavaScript.

    • Kliknij Usuń, aby usunąć zaznaczony wpis JavaScript.

Dodawanie funkcji interakcyjności SVG do kompozycji

  1. Zaznacz zdarzenie w palecie Interakcyjność SVG. (Zobacz Zdarzenia SVG).

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

Zdarzenia SVG

onfocusin

Uaktywnia określone zadanie, gdy element uzyskuje fokus, np. jest wskazywany myszą.

onfocusout

Uaktywnia określone zadanie, gdy element traci ostrość (często gdy ostrość uzyskuje inny element).

onactivate

Uaktywnia określone zadanie w odpowiedzi na kliknięcie myszą lub naciśnięcie klawisza (zależnie od elementu SVG).

onmousedown

Uaktywnia określone zadanie w odpowiedzi na naciśnięcie przycisku myszy na elemencie.

onmouseup

Uaktywnia określone zadanie w odpowiedzi na zwolnienie przycisku myszy 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

Uaktywnia określone zadanie, gdy dokument SVG zostanie całkowicie przeczytany i przeanalizowany. Zdarzenia należy używać do wywoływania jednorazowych funkcji inicjujących.

onerror

Uaktywnia określone zadanie, gdy element nie zostanie wczytany poprawnie lub wystąpią inne błędy.

onabort

Uaktywnia określone zadanie, gdy wczytywanie strony zostanie zatrzymane przed całkowitym wczytaniem elementu.

onunload

Uaktywnia określone zadanie po usunięciu dokumentu SVG z okna lub ramki.

onzoom

Uaktywnia określone zadanie po zmianie poziomu powiększenia dokumentu.

onresize

Uaktywnia określone zadanie po zmianie rozmiarów okna dokumentu.

onscroll

Uaktywnia określone zadanie w odpowiedzi na przewijanie dokumentu.

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

Dostępna jest nowa opcja eksportu do formatu SVG (Plik > Eksportuj > 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.

Dostępne opcje:

  • Style: wybierz sposób zapisu kodu wynikowego w pliku SVG. Wybierz spośród opcji Wewnętrzny CSS, Styl w wierszu lub Atrybuty prezentacji.
  • Czcionka: wybierz sposób prezentowania czcionek w pliku SVG. Kontury zachowują definicję ścieżki,i są najbardziej zgodne.
  • Obrazy: wybierz, czy obrazy mają być zapisywane jako osadzone w dokumencie czy też jako pliki zewnętrzne połączone z dokumentem.
  • Identyfikatory obiektów: wybierz sposób przypisywania typów identyfikatorów (nazw) do obiektów w pliku SVG. Wybierz spośród opcji Nazwy warstw, Minimalny lub Unikatowy. Ta opcja określa sposób obsługi powielonych nazw obiektów i metodę nazywania obiektów w eksportowanym CSS.
  • Dziesiętne: wybierz ilość informacji na temat precyzyjnej lokalizacji obiektów, którą chcesz zachować. Wyższa wartość opcji Dziesiętne zwiększa precyzję układu obiektów i poprawia jakość wizualną renderowanego pliku SVG. Należy jednak pamiętać, że wyższa wartość opcji Dziesiętne oznacza większy rozmiar eksportowanego pliku SVG.
  • Pomniejsz: optymalizuje rozmiar pliku SVG przez usunięcie pustych grup i przestrzeni. Wybranie tej opcji zmniejsza dodatkowo czytelność wynikowego kodu SVG.
  • Responsywny: wybranie tej opcji gwarantuje, że wygenerowany plik zostanie przeskalowany w przeglądarce. Nie zostają zapisane wartości bezwzględne rozmiaru.
  • Pokaż kod: otwiera wyeksportowaną zawartość w domyślnym edytorze tekstu.
  • Pokazuj w przeglądarce  (ikony): wyświetla obraz w domyślnej przeglądarce internetowej.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online