Посібник користувача Скасувати

Формат SVG

Дізнайтеся, як працювати з форматом SVG, щоб використовувати XML і JavaScript для створення вебграфіки, що реагує на дії користувача витонченими ефектами на кшталт виділення, відображення підказок, відтворення аудіо та анімації.

Про формат SVG

SVG — векторний формат, що описує зображення як фігури, контури, текст, ефекти фільтра. Кінцеві файли компактні та забезпечують високоякісну графіку в інтернеті, при друці та навіть на портативних, обмежених у ресурсах пристроях, на відміну від GIF, JPEG, WBMP і PNG, які є громіздкими. Користувачі можуть збільшувати перегляд SVG-зображень на екрані без нанесення шкоди таким параметрам, як різкість, деталізація або прозорість. До того ж SVG забезпечує високий рівень підтримки тексту та кольорів, що гарантує відображення зображень у тому вигляді, який вони мають у монтажній області Illustrator користувача.

Формат SVG повністю базується на XML і пропонує багато переваг як для розробників, так і для користувачів. 

Зберегти ілюстрацію у форматі SVG можна за допомогою команд Зберегти, Зберегти як, Зберегти копію або Зберегти для Інтернету та пристроїв. Для доступу до повного набору параметрів експорту SVG скористайтеся командою Зберегти, Зберегти як або Зберегти копію. Команда Зберегти для Інтернету та пристроїв відкриває доступ до підмножини параметрів експорту SVG, які можна застосовувати до робіт, призначених для публікації в інтернеті.

Застосування SVG-ефектів

Ви можете використовувати ефекти SVG для додавання до ілюстрації графічних властивостей таких як тінь. Ефекти SVG відрізняються від їхніх бітових прототипів тим, що вони базуються на XML та не залежать від роздільної здатності. Насправді ефект SVG є ні чим іншим як серією властивостей XML, які описують різні математичні операції. Кінцеві результати відносяться до кінцевого об’єкту, а не до графіки оригіналу.

Illustrator забезпечує набір ефектів SVG за промовчанням. Ви можете використовувати ефекти із їхніми властивостями за промовчанням, редагувати XML-код для створення персональних ефектів або писати нові ефекти SVG.

Примітка.

Щоб змінити стандартні фільтри SVG у програмі Illustrator, відредагуйте в текстовому редакторі файл «Adobe SVG Filters. svg»,  що зберігається в папці Documents and Settings/<ім’я користувача>/Application Data/Adobe/Adobe Illustrator <номер версії> Settings/<розташування>.  Ви можете змінювати наявні визначення фільтрів, видаляти їх або додавати нові визначення.

  1. Виділіть об’єкт або групу (або кінцевий шар на панелі «Шари»).
  2. Щоб застосувати ефект, виконайте одну з таких дій:

    З параметрами за замовчуванням

    Виберіть Ефект > Фільтри SVG > Застосувати фільтр SVG.

    З власними параметрами

    1. Виберіть Ефект > Фільтри SVG > Застосувати фільтр SVG.

    2. У діалоговому вікні виберіть ефект, а потім натисніть кнопку Редагувати фільтр SVG  . Відредагуйте код за замовчуванням і натисніть OK.

    створення й застосування нового ефекту

    1. Виберіть Ефект > Фільтри SVG > Застосувати фільтр SVG.

    2. У діалоговому вікні виберіть ефект, а потім натисніть кнопку Створити фільтр SVG  . Введіть новий код і натисніть OK.

Під час застосування ефекту SVG-фільтра Illustrator відображає на монтажній області растеризовану версію ефекту. Ви можете керувати роздільною здатністю зображення, яке переглядається, шляхом зміни параметра роздільної здатності растеризації в документі.

Примітка.

Якщо об’єкт використовує кілька ефектів, SVG-ефект має бути останнім; іншими словами, він має відображатися в нижній частині панелі «Вигляд» (зразу над даними прозорості). Якщо після ефекту SVG використовуються інші ефекти, вивід SVG буде містити растеризоване зображення.

Імпорт ефектів із файлу SVG

  1. Виберіть «Ефект» > «Фільтр SVG» > «Імпортувати фільтр SVG».

  2. Виберіть файл SVG, з якого потрібно імпортувати ефекти, і натисніть Відкрити.

Огляд панелі інтерактивності SVG

Панель інтерактивності SVG показує всі елементи й файли JavaScript, пов’язані з поточним файлом.
Щоб додати до ілюстрації інтерактивності під час її експорту для перегляду в браузері, можна скористатися панеллю інтерактивності SVG (Вікно > Інтерактивність SVG). Наприклад, створивши подію, яка запускає команду JavaScript, ви можете швидко створювати рух на вебсторінці, коли користувач виконує дію, як-от рухає курсором миші по об’єкту.

Видалення події з панелі інтерактивності SVG

За допомогою панелі Інтерактивність SVG можна видалити одну або всі події.

Видалення однієї події

  • Виберіть подію та натисніть Видалити виділений елемент  .

Видалення всіх подій

  • Виберіть Видалити події в меню панелі  

Занесення до списку, додавання або видалення зв’язаних із файлом подій

Натисніть кнопку Прив’язати файли JavaScript   і виберіть Додати, щоб додати додаткові файли JavaScript, а щоб видалити вибраний елемент JavaScript, виберіть Видалити.

Додавання інтерактивності SVG до ілюстрації

  1. На панелі Інтерактивність SVG виберіть подію. (Див. розділ Події SVG.)

  2. Введіть відповідний JavaScript і натисніть клавішу Enter.

Події SVG

подія onfocusin

Запускає дію, коли елемент знаходиться у фокусі, наприклад, ви навели на нього курсор.

подія onfocusout

Запускає дію, коли елемент знаходиться не у фокусі (часто ц трапляється тоді, коли у фокусі знаходиться інший елемент).

подія onactivate

Запускає дію натисканням кнопки миші або клавіші, в залежності від елементу SVG.

подія onmousedown

Запускає дію, коли кнопка миші перебуває в натиснутому вигляді на елементі.

подія onmouseup

Запускає дію, коли кнопку миші відпускають на елементі.

подія onclick

Запускає дію, коли кнопкою миші клацають на елементі.

подія onmouseover

Запускає дію, коли курсор переміщають на елемент.

подія onmousemove

Запускає дію, коли курсор знаходиться на елементі.

подія onmouseout

Запускає дію, коли курсор переміщають з елементу.

подія onkeydown

Запускає дію, коли клавіша натискається.

подія onkeypress

Запускає дію в той час, коли клавіша утримується натиснутою.

подія onkeyup

Запускає дію, коли клавіша відпускається.

подія onload

Запускає дію після того, як документ SVG був повністю проаналізований браузером. Користуйтеся цією подією для виклику одночасних функцій ініціалізації.

подія onerror

Запускає дію, коли елемент завантажується невірно або виникає інша помилка.

подія onabort

Запускає дію, коли завантаження сторінки зупиняється перед тим, як елемент повністю завантажується.

подія onunload

Запускає дію, коли документ SVG видаляється із вікна або з фрейму.

подія onzoom

Запускає дію, коли для документа змінюється масштаб.

подія onresize

Запускає дію, коли змінюється розмір перегляду документа.

подія onscroll

Запускає дію, коли перегляд документа прокручується або панорамується.

Поради зі створення файлів SVG

  • Використовуйте шари для додавання структури до файлу SVG. Коли ви зберігаєте ілюстрацію у форматі SVG, кожен шар перетворюється на груповий (<g>) елемент. (Наприклад, шар із назвою Button1 стає <g id="Button1_ver3.0"> у файлі SVG). Вкладені шари стають вкладеними SVG-групами, а приховані шари зберігаються із присвоєнням властивості SVG display="none".

  • Якщо ви хочете, щоб об’єкти на різних шарах відображалися прозоро, налаштуйте непрозорість кожного об’єкта, а не кожного шару.

  • Растрові дані не підлягають масштабуванню в програмі перегляду SVG та не можуть редагуватися як інші елементи SVG. Ви можете просто не створювати ілюстрацій, які підлягатимуть растеризації у файлі SVG. Для додавання ефектів графіки без спричинення растеризації використовуйте ефекти SVG.

  • Для покращення відображення SVG використовуйте символи та спрощуйте контури у ілюстрації. Також уникайте використання пензлів, які створюють багато контурних даних, таких як вугільно-сірий, сріблясто-сірий і перо прокрутки, якщо якісне відображення ілюстрації для вас найголовніше.

  • Для додавання вебпосилань до файлу SVG використовуйте фрагменти, мапи посилань та сценарії.

  • Мова створення сценаріїв, наприклад JavaScript, відкриває безмежні функції для файлу SVG. За допомогою курсору та комбінацій клавіш можна викликати функції сценарію, як-от ефекти ролловеру.

Функції експорту оптимізованих для роботи в інтернеті файлів SVG

Тепер доступна нова функція експорту SVG (Файл > Експорт > Експортувати як > SVG). Новий процес відкриває можливості створення стандартизованих і оптимізованих для роботи в інтернеті файлів SVG. Тепер ви можете розробляти екранні матеріали та матеріали для вебсторінок. Детальнішу інформацію див. в розділі Параметри експорту в SVG.


Супутні ресурси

Зв’яжіться з нами

Запитайте у спільноти

Якщо ви маєте запитання або хочете поділитися ідеєю, долучайтеся до обговорень у Спільноті Adobe Illustrator. Будемо раді почути вашу думку.

Отримуйте допомогу швидше й простіше

Новий користувач?