Як застосувати фільтри SVG в Illustrator CC

Ефекти, як і всюдисуща тінь, є важливим елементом у наборі інструментів кожного дизайнера. Можливо, ви помітили, що меню ефектів Adobe Illustrator CC містить значне підменю для фільтрів SVG. Доступний набір фільтрів розширюється, оскільки Illustrator розвивається, щоб забезпечити більшу підтримку SVG.

До речі, якщо ви користувалися Illustrator роками, ви, можливо, пам’ятаєте, що в меню «Ефект» відображалися ефекти та фільтри. Фільтри були як ефекти, за винятком того, що їх не можна було легко редагувати після застосування. Але фільтри SVG не є відродженням цих типів фільтрів; Фільтри SVG називаються фільтрами, оскільки вони працюють через елемент фільтра SVG у кодуванні веб-сторінок.

Ось ще одна цікава річ про фільтри SVG: як ви незабаром дізнаєтеся, ви можете імпортувати і навіть створювати власні фільтри SVG.

Коли ви застосовуєте фільтр SVG, він може виглядати схожим на ефект не SVG. Наприклад, на цьому малюнку зображено два однакових квадрата, але ліворуч застосовано растровий ефект тіні, а праворуч — векторний (SVG) фільтр тіні .

Ефект тіні (ліворуч) і фільтр SVG (праворуч).

Коли я вибираю прямокутник із фільтром SVG, цей фільтр з’являється на панелі «Вигляд», як показано.

illustrator-drop-shadow-filter

Різні способи, якими ефекти та фільтри SVG змінюють шлях до об’єкта, мають незначні, але реальні наслідки. Деякі з цих наслідків стосуються лише веб-розробників і розробників додатків, але з кінця робочого процесу важливо пам’ятати про те, щоб уникати змішування фільтрів SVG та растрових ефектів у проектах, оскільки вони по-різному впливають на об’єкти.

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

І, як ви вже здогадалися, растрові ефекти не можна програмувати. Коли ви передасте їх аніматору або програмісту HTML, ваш товариш по команді розробника не матиме такої ж свободи контролювати, як діють растрові ефекти в анімації або переході.

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

Як застосувати фільтри SVG

Я намагався застосовувати фільтри SVG, коли це можливо, до ілюстрацій SVG. Давайте розглянемо, як це відбувається:

Виберіть об’єкт (об’єкти), до яких ви застосовуєте фільтр.

Виберіть Ефект→Фільтри SVG та виберіть фільтр.
Підменю SVG Filters містить список фільтрів з іменами, які в кращому випадку є лише напівінтуїтивними (наприклад, AI_Shadow_1, що є тінню) і частіше просто загадковими (наприклад, AI_Dilate_6). Вам доведеться експериментувати, поки ви не зрозумієте, як працюють ці фільтри.

Якщо об’єкт, до якого ви застосували фільтр, все ще вибрано, перегляньте панель «Вигляд» (виберіть «Вікно»→ «Вигляд»).

Наведіть курсор на застосований фільтр і клацніть його, щоб відкрити вікно «Застосувати фільтр SVG», показане тут.

Редагування фільтрів SVG.

Тут ви можете змінити застосований фільтр і використовувати прапорець Попередній перегляд, щоб побачити, як виглядатиме фільтр. Ви також можете вибрати та видалити фільтр SVG на панелі «Вигляд», як показано.

Видалення фільтра SVG.

Як імпортувати фільтри SVG

Набір фільтрів Illustrator корисний, але навряд чи розширює межі того, що ви можете зробити за допомогою фільтрів SVG. Якщо ви кодуєте в HTML, ви знайдете доступний посібник зі створення власних фільтрів SVG у w3schools .

Ви також можете придбати додаткові набори фільтрів в Інтернеті та навіть знайти кілька гарних наборів безкоштовних SVG фільтрів SVG . Щоб встановити цей набір фільтрів або інших фільтрів, виконайте такі дії:

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

У діалоговому вікні, що відкриється, перейдіть до файлу фільтрів SVG, який ви завантажили, і двічі клацніть його.
Ймовірно, це буде файл SVG.

Виберіть Ефект–>Фільтри SVG, щоб застосувати нові фільтри до вибраних об’єктів.
Після імпорту нових фільтрів вони з’являться у підменю SVG Filters.