Підготовка SVG для використання в Інтернеті це дуже простий процес, не складніший за експорт JPEG або PNG . Використовуйте будь-який звичний для вас графічний редактор (Illustrator, Sketch, Inkscape [безкоштовний] тощо [або навіть Photoshop, якщо ви використовуєте шари з формами]) з тим розміром зображення, який ви плануєте використовувати. Зазвичай я працюю в Ілюстраторі, тому я поясню деякі способи підготовки файлів у цій програмі, але взагалі вони застосовні і для будь-якої іншої програми. Вам, можливо, варто перевести текст у криві, оскільки шрифт, швидше за все, неправильно відображатиметься, якщо, звичайно, ви не плануєте стилізувати їх за допомогою веб-шрифту, який використовується на сторінці (що можливо!). Не варто також перетворювати всі об'єкти на єдині форми, особливо якщо у вас є обведення, яким необхідно буде керувати на сторінці, тим більше перетворення об'єктів часто не зменшує розмір файлу. Будь-які імена, надані групам або шарам, будуть додані до SVG як ID елемента. Це досить зручно для стилізації, але трохи збільшить загальний розмірфайлу.
Перед тим, як зробити експорт, необхідно перевірити, чи всі зображення знаходяться в цілісній піксельній сітці (тобто, наприклад, не 23.3px × 86.8px ). Інакше скоріш за все зображення не вистачатиме чіткості і частина зображення обріжеться. В Ілюстраторі це можна зробити наступним чином: Object > Artboards > Fit to Artwork Bounds . Потім тиснемо save as і вибираємо SVG і залишаємо налаштування за замовчуванням. Тут можна зробити невелику оптимізацію, але насправді не варто, тому що далі ми застосовуватимемо різні покращуючі прийоми, тому зараз ми не витрачатимемо марно час на ці налаштування.
Прийоми зменшення розмірів файла.
(Дивіться по оптимізації)
Щоб досягти найменшого розміру SVG, логічно видалити з нього все зайве. Найбільш відома та корисна програма(за Крайній мірія так думаю) для обробки SVG це SVGO. Вона видаляє весь не потрібний код. Але! Будьте уважні, використовуючи цю програму, якщо плануєте керувати SVG за допомогою CSS / JS , оскільки вона може занадто сильно почистити код, що ускладнить подальші зміни. Зручність SVGO ще й у тому, що її можна включити в процес автоматичного складання проекту, але можна також використовувати GUIякщо хочеться.
Розбираючись докладніше з правильним видаленнямвсього непотрібного, ми можемо зробити ще дещо в графічному редакторі. Спершу потрібно переконатися, що використовується настільки мало контурів/форм, наскільки це можливо, так само як і точок цих контурів. Можна об'єднувати та спрощувати все, що піддається спрощенню, та видалити все непотрібні точки. В Ілюстраторі є плагін VectorScribe з інструментом Smart Remove Brush Tool, який допоможе видалити крапки і при цьому залишити загальну формутой самий.
Попередня оптимізація
Smart Remove Brush Tool видалив точки
Далі збільшуватимемо зображення. В Ілюстраторі зручно включити перегляд з піксельною сіткою View > Pixel Preview і перевірити, як розташовуються контури. Щоб розмістити контури по сітці, знадобиться небагато часу, але ці зусилля окупляться і дозволять досягти чіткішого рендерингу (краще звернути на це увагу заздалегідь).
Крапки поза сіткою
Вирівнювання по сітці
Якщо є два і більше об'єкти для вирівнювання, варто видалити всі непотрібні перекриття. Іноді навіть якщо контури ретельно вирівняні, можна побачити тонку білу лінію. Щоб запобігти такому, можна трохи накласти об'єкти один на одного у місцях перекриття. Важливо: SVG z-index має певний порядок, який залежить від об'єкта, що знаходиться знизу, тому варто помістити верхній об'єкт у нижню частину файлу в коді.
І, нарешті, останнє, але важливе, те, що зазвичай забувають - це активувати gzip стиск SVG на вашому сайті в.htaccess файлі.
AddType image/svg+xml svg svgz
Як приклад того, наскільки ефективна ця техніка, я скористаюся оригінальним логотипом Breaking Borders і оптимізую його таким чином: збільшую розмір до того, яким він має бути; упорядкую контури; видалю максимально можливу кількість точок; пересунення крапки на цілочисленні пікселі; зсуну всі області перекриттів і відправлю це все в SVGO.
Оригінал: 1,413b
Після оптимізації: 409b
У результаті розмір файлу став меншим на ~71% (і на ~83% при стисканні)
На сьогоднішній день існує вже не один спосіб створювати анімацію SVG. Це можна зробити за допомогою тега, який вставляється прямо в код SVG. Існують спеціальні бібліотеки, такі як Snap.svg або SVG.js .
Ми розглянемо трохи інший підхід: за допомогою вбудованого SVG (SVG коду прямо в HTML) та анімації окремих частинпрямо через CSS.
Я нещодавно поекспериментував з цим методом, у проекті для моєї альма-матер Wufoo , так, щоб трохи освіжити у пам'яті тему, яку ми тут розглядатимемо.
У моїх останніх проектах SVG використовувалися рідко, тому, думаю, ця стаття є чудовою нагодою приділити йому більше уваги.
Остаточний вид анімації дуже простий. Ось як вона виглядає:
Подивитись на CodePen
Розгляньмо, як це робиться.
1. Складаємо список елементів, які ми будемо використовувати
Може здатися, що тут багато роботи на зразок як намалювати сову, але ця стаття присвячена анімації, так що з графікою давайте розберемося якнайшвидше.
Мій план полягав у тому, щоб зробити супер просту рекламу Wufoo , використовуючи їх класичний логотип, кольори та Корпоративний стиль. А потім додати трохи креативу:
- Створити ефект, ніби букви тікають зі сторінки. Wufoo - це веселе слово, нехай літери також будуть веселими;
- За день до цього ми розробили дизайн футболки, на лицьовій стороні якої був зображений динозавр, а на задній напис: « Швидкий. Розумний. Грізний». Це риси, які притаманні і динозаврам, і Wufoo. Не кажучи вже про те, що ми обіграли слово FORMidble (грізний). Тому я захотів зробити так, щоб в анімаційному блоці з'являлися та зникали ці слова;
- Щоб зв'язати ці слова з динозавром, у нас з'являтиметься голова T-Рексу, а потім швидко зникатиме. При цьому виводитиметься слово «Швидкий», що буде ще однією цікавою сполучною ланкою для елементів.
- Всі ці елементи я завантажив у Illustrator:
Зверніть увагу, як окреслено тексти логотипу та слогану. Це означає, що вони є просто векторними фігурами, і до них легко можна застосовувати ефекти як у SVG, так і в
Текст, який Ви бачите, «Швидкий. » так залишається в Illustrator у форматі тексту.
Коли я збережу файл у Illustrator , напис залишиться елементом.
2. Зберігаємо у форматі SVG
Illustrator підтримує функцію збереження у форматі SVG:
Ви можете відкрити цей SVG-файл у редакторі коду і побачити в ньому код SVG:
3. Вичищаємо SVG, задаємо класи для фігур
Ви можете пропустити код через SVGO , щоб оптимізувати його та прибрати непотрібні елементитипу DOCTYPE тощо.
Але нам зараз важливіше задати різні імена класів для фігур, таким чином ми зможемо вибрати їх у CSS і робити різні дії!
4. Вставляємо SVG
Ви можете скопіювати цей SVG-код і вставити його прямо в HTML, у місце, де ви хочете виводити блок. Але це лише примітивний шаблон.
Ви можете зробити щось на зразок цього:
5. Анімація!
Тепер всі ці фігури загнані в DOM , і ми можемо їх позиціонувати і задавати стилі, як і для будь-якого іншого елемент HTML. Давайте зробимо це.
Припустимо, ми хочемо використовувати 10-секундну часову шкалу:
Спочатку випадають і зникають слова
Перше, що ми хочемо зробити, це вивести по черзі слова « Швидкий. Розумний. Грізний.» Кожне слово відображатиметься протягом однієї секунди.
Так ми створюємо анімацію, де показ кожного слова займає 10% часу:
@keyframes hideshow ( 0% ( opacity: 1; ) 10% ( opacity: 1; ) 15% ( opacity: 0; ) 100% ( opacity: 0; ) )
Потім вказуємо перше слово та тривалість усієї анімації в 10 секунд (10% з яких становить 1 секунда):
Text-1 ( animation: hideshow 10s ease infinite; )
Наступні два слова спочатку будуть прихованими (opacity: 0; ), а потім використовуємо ту ж анімацію, тільки із затримкою в часі, щоб наступні слова виводилися трохи згодом:
Text-2 ( opacity: 0; animation: hideshow 10s 1.5s ease infinite; ) .text-3 ( opacity: 0; animation: hideshow 10s 3s ease infinite; )
Додаткові 0,5 секунди потрібні для того, щоб встановити інтервал між виведенням кожного наступного слова.
Стрибуючі літери
Як тільки ми задали анімацію для цього елемента, приступаємо до ефектів для літер у слові Wufoo, які повинні стрибати убік ось так:
Хитрість тут у тому, що ми створюємо анімаційний ефект, Що триває всього 5 секунд, але запускаємо його один раз вперед, а потім у зворотному напрямку.
Таким чином, він відповідатиме нашому 10-секундному графіку, і розташовуватиметься посередині шкали часу. Нам залишається тільки встановити параметри для прокручування ефекту анімації в одному напрямку, тому що при зворотній прокрутцівін просто повернеться на вихідну позицію.
Ефекти для кожної літери мають невелику затримку в часі, тому вони переміщаються не всі одночасно, а одна за одною:
Wufoo-letter ( animation: kaboom 5s ease alternate infinite; &:nth-child(2) ( animation-delay: 0.1s; ) &:nth-child(3) ( animation-delay: 0.2s; ) &:nth- child(4) ( animation-delay: 0.3s; ) &:nth-child(5) ( animation-delay: 0.4s; ) ) @keyframes kaboom ( 90% ( transform: scale(1.0); ) 100% ( transform : scale(1.1); ) )
Наведений вище SCSS-код - це просто коротка версія, він не включає префіксів (які знадобляться вам на практиці).
Я думаю, що animation-delay це властивість, яка була б корисною взяти з оригінального CSS . Це виглядало б акуратніше, коли літери зсуваються з невеликою затримкою.
І нарешті, динозавр
Після того, як у блоці промайнули ці написи, знизу виїжджає голова динозавра. Незважаючи на те, що фігура динозавра складається з великої кількостіелементів, ми можемо позиціонувати їх усі разом за допомогою тега позиціонування (група), який містить у собі всі ці елементи.
Оскільки для позиціонування анімації ефективніше використовувати перетворення, ми зробимо це за допомогою keyframes :
@keyframes popup ( 0% ( transform: translateY(150px); ) 34% ( transform: translateY(20px); ) 37% ( transform: translateY(150px); ) 100% ( transform: translateY(150px); ) )
Ми хочемо, щоб цей фрагмент анімації виводився в «останні» приблизно 3 секунди. Цей цикл насправді працює всі 10 секунд, але власне видимі ефекти ви спостерігатимете протягом останніх 3 секунд.
Коли translateY (150 пікселів) застосований в ефекті, динозавр переміщається так далеко вниз поза полем блоку, що ви його не бачите.
Але протягом 37% часу цієї анімації (близько 3 секунд) ви бачите, що він повільно рухається вгору, а потім швидко забирається вниз.
Коли ми застосуємо цю анімацію, ми переконаємося, що:
- Динозавр спочатку прихований;
- Виведення цього фрагмента анімації затримується в часі, так що він починається відразу після того, як літери в слові логотипу закінчили свій танець (зробили змішання убік і повернулися на місце).
Trex (transform: translateY(150px); animation: popup 10s 6.5s ease infinite; )
Динозавр падає вниз саме в останню секунду так, щоб відразу після цього в блоці знову з'явилося слово «Швидкий» (інтервал відтворення анімації встановлений на infinite, щоб вона запускалася по колу знову і знову). Це приносить трохи веселої синергії.
6. Робимо блок клікабельним/інтерактивним оголошенням
Одною з корисних особливостей SVG є можливість масштабувати об'єкти до будь-якого розміру без втрати якості.
Для створення вбудованого блоку SVG із збереженням оригінальної якості зображень ми можемо використовувати техніку ol' padded box .
.wufoo-ad-wrap ( height: 0; padding-top: 100%; position: relative; ) .wufoo-ad ( position: absolute; top: 0; left: 0; width: 100%; height: 100%; )Ідея полягає в тому, що обгортка завжди буде набувати форми квадрата, відштовхуючись від значення його ширини. Потім ми задаємо абсолютні значенняпозиції SVG усередині цього ідеального квадрата, розміри якого підганяються, виходячи із ширини.
Оскільки це оголошення (яке, звичайно, має бути клікабельним), то як контейнер, що містить, замість