Від автора: з SVG-зображення можуть стати якими завгодно, так адже? Через рік спільної роботи з дизайнерами і експериментів з візуальними ефектами можна сказати, що у мене вийшло. Швидкий пошук SVG на CodePen покаже вам результат моєї роботи. Тиснення, фігури, спрайт, анімації та маніпуляції зображеннями – з дрібкою SVG все краще. Коли в тому році, в веб увірвався новий візуальний тренд, не дивно, що SVG зміг його реалізувати.
Іскра тренда
Креативщики всюди зустрічали новий 2016 рік спалахом техніки колоризації, яка отримала популярність завдяки сайту Spotify 2015 Year in Music (версія за останній рік). Як відмітної ознаки бренду сайт представив сміливі зображення з двома відтінками.
Техніка – це відтворення півтонів зображення шляхом накладання одного кольору (зазвичай чорного) на інший. Іншими словами, більш темний тон буде відображатися в тінях зображення, а світлий тон – у світлих ділянках.
Ефекту дуплекс можна домогтися в фотошопі через застосування карти градієнта (Layer > New Adjustment Layer > Gradient Map) двох кольорів поверх зображення.
Клікніть правою кнопкою миші (або alt + click) на настроюваному шарі і створіть обтравочную маску для застосування карти градієнта чисто шару нижче зображення, а не до всім верствам.
Це необхідно, щоб прибрати елемент canvas, щоб розрахувати колірне зіставлення і намалювати результат в DOM або використовувати режими змішування CSS, щоб наблизитися до бажаного ефекту. Завдяки властивостям SVG, ми можемо створити настроювані шари, як у фотошопі, з допомогою SVG фільтрів.
Розбір SVG
Ми вже знаємо, що SVG – цар векторної графіки. Крім того, для створення різких, гнучких і маленьких зображень SVG підтримує 20+ ефектів, за допомогою яких можна застосовувати розмиття, змінювати форму і т. д. Для ефекту дуплекс ми будемо використовувати 2 фільтра для створення карти градієнта.
feColorMatrix (необов’язковий)
Ефект feColorMatrix дозволяє маніпулювати кольорами зображення з матриці rgba каналів. Una Kravets докладно розбирає маніпуляції з feColorMatrix в цій статті. Вкрай рекомендую до прочитання.
В залежності від зображення, можливо, доведеться балансувати кольору, встановивши зображення у відтінки сірого через кольорову матрицю. Для досягнення бажаного ефекту відтінків сірого канали rgba можна налаштовувати на свій розсуд.
feComponentTransfer
Далі необхідно зіставити два кольору зі світлими та темними ділянками сірого зображення з допомогою фільтра feComponentTransfer. У цього фільтра є спеціальні атрибути елементів, про які варто пам’ятати.
Атрибут result не обов’язковий, але я люблю включати його для створення додаткового контексту для кожного фільтра (і як корисна замітка для наступного посилання).
Фільтр feComponent обробляє зіставлення кольорів через функції передачі всіх rgba компонентів, визначених як дочірні елементи батьківського feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Ці rgba функції використовуються для обчислення значень двох кольорів в карті градієнта.
Приклад:
На скріншоті вище карта градієнта Peachy Pink використовує колір magenta (#bd0b91) зі значеннями R(189) G(11) B(145).
Розділіть кожну RGB значення 255, щоб отримати значення першого кольору в матриці. RGB значення другої колонки #fcbb0d (золотий). Точно так само, як в карті градієнта в фотошопі, перший колір (зліва направо) накладається на тіні, а другий на світлі ділянки.
Крок 3: застосування ефекту через CSS фільтр
CSS фільтр готовий, тепер його можна застосувати до зображення через властивість CSS filter і установку функції фільтра url() значення ID SVG фільтра.
Зверніть увагу, що SVG з фільтром може бути просто прихованим елементом в HTML. В такому випадку він завантажується і готовий до використання, але поки що не відображається на екрані.
background-image: url(‘path/to/img’);
filter: url(/path/to/svg/duotone-filters.svg#duotone_peachypink);
filter: url(#duotone_peachypink);
Підтримка в браузерах
Можливо, ви думаєте про підтримку цієї техніки. У SVG фільтрів хороша підтримка в браузерах.
Дані про підтримку взяті з Caniuse, де можна подивитися всі подробиці. Число вказує на те, з якої версії браузера підтримується функція.
CSS фільтри не так широко підтримуються. Тому доведеться подекуди застосувати техніку витонченої деградації.
Дані про підтримку взяті з Caniuse, де можна подивитися всі подробиці. Число вказує на те, з якої версії браузера підтримується функція.
Наприклад, IE не підтримує функцію url() з CSS фільтрів, а також CSS background-blend-modes – наступний кращий спосіб досягнення дуплекс ефекту. Фолбек для IE може представляти собою абсолютно позиційований градієнт поверх зображення, що імітує фільтр.
У мене виникали проблеми в Firefox з отриманням доступу до самого фільтру, заснованому на шляху для SVG фільтра, коли я вперше написав цей метод у проекті. Firefox працював тільки, якщо я посилався повного шляху до файла SVG, а не тільки по ID фільтра. Зараз це вже неважливо, але варто знати.
Збираємо всі разом
Повний приклад фільтра:
Ефект зображення:
Можете самі створити приклади, просто поиграйтесь з фільтрами pen.
