1. Чому масштабируемая векторна графіка така класна
2. Як працювати з SVG
3. Створення анімованого лого з використанням SVG і CSS

Доброго дня всім читачам. Невеликий набір якісної анімації, яка присутня на вашому сайті, повинен викликати позитивні емоції у ваших відвідувачів, адже весь інтернет повільно рухається в сторону використання HTML5 для веб-анімації, але, варто пам'ятати, що її використання також може привести до виникнення деяких складнощів.

У цій статті ми навчимо вас працювати з SVG і комбінувати цей формат з CSS для створення анімованого логотипу.

Чому масштабируемая векторна графіка така класна

Незважаючи на свою назву - Scalable Vector Graphics, це взагалі не графічний формат, а мова XML-розмітки (дуже схоже на XHTML або XOXO ). Цей специфічний мову розмітки використовується для створення векторних двомірних зображень, які можна зменшувати або збільшувати без втрати різкості. Перед тим як ми почнемо говорити про його властивості, давайте подивимося на код, що лежить за простим SVG-файлом, Приклад нижче відтворює копію лого Adobe, використовуючи для цього векторну обведення і атрибут заповнення для розфарбовування. Ви можете спокійно скопіювати цю картинку, використовуючи ваш улюблений текстовий редактор (зберігаємо, як файл .svg).

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

Крім того, ви також можете використовувати вбудовані графічні ефекти (наприклад, фільтри або режими змішування), а також доступний DOM API. Якщо ви вже знайомі з CSS і JavaScript, то вам буде просто управлятися з файлами SVG. Їх гнучкість дозволяє вам, наприклад, створювати SVG-файли на стороні сервера і модифікувати їх, не маючи доступу до спеціальних інструментів (про які ми поговоримо пізніше).

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

Як працювати з SVG

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

Adobe Illustrator, Inkscape і Sketch для Mac - це найпопулярніші рішення. У випадку з Illustrator процес створення файлів дуже простий, так як готові зображення можна експортувати, використовуючи опцію 'Save as' SVG. У процесі збереження ви можете помітити опцію, яка називається SVG Profiles, з декількома варіантами, перерахованими в випадаючому меню: SVG Tiny (найкраще підходить для смартфонів) і SVG Basic (профіль, який використовується для PDA), але ми будемо використовувати SVG 1.1.

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

Давайте розглянемо як приклад SVG-файл з Android-лого до і після оптимізації:

Ми видалили прогалини, дефолтні атрибути, стилі та інші непотрібні дані, і ось, що вийшло:

Хоча вихідний файл SVG і так був цілком компактний для початку роботи (0.5kB), процес оптимізації дозволив зменшити розмір файлу на 12.5% ​​(стало 0.4kB). У разі більш складних зображень, ви помітите більш значне зменшення розміру фала і збільшення швидкості завантаження сайту при наявності там SVG-елементів.

Для спрощення цього процесу ми радимо використовувати інструменти типу SVG Optimizer (Доступний онлайн) і SVGO , Який використовує app. з відкритим вихідним кодом і створений на базі Node.js.

Тепер давайте подивимося, як ми можемо використовувати CSS для анімації графіки, створеної з використанням цієї мови розмітки.

Створення анімованого лого з використанням SVG і CSS

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

Але, варто зауважити, що Internet Explorer ніколи не надавав підтримку для SMIL, а розробники Chrome говорять про відмову від підтримки цього синтаксису на користь CSS і веб-анімації.

Давайте поглянемо на деякі приклади. Пам'ятайте SVG Adobe-лого, яке ми представили раніше? Ми будемо використовувати просту миготливу анімацію і ефект переходу для зміни його кольору. Ми почнемо з позначення класу векторного контуру, а потім додамо ефекти в цей клас в наш файл стилів. Ось як буде виглядати HTML:

Тепер ми перемикається на наш файл styles.css ...

... який виглядає ось так:

Якщо замість миготливої ​​анімації ви хочете додати ефекти заливки і штрихів в ту саму SVG-графіку, код буде виглядати так:

Коли все на своїх місцях, ось як це виглядає:

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

See the Pen Breaking Bad by Tim Pietrusky ( @TimPietrusky ) on CodePen .

І нарешті, ми повинні згадати, що CSS-анімація має деякі обмеження. Наприклад, вона не дозволяє змінювати форму елемента; для цього вам потрібно буде звернутися до JavaScript-анімації.

Якщо ви вирішили працювати з CSS-анімацією для SVG, не нехтуйте правилом, даним вище: використовуйте відповідний інструмент для редагування графіки, а потім оптимізуйте отриманий SVG-код. Пам'ятайте, що використовуючи цю техніку, ви зможете створювати тільки порівняно просту анімацію.

джерело