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.

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.

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.

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

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.