Можливості оформлення SVG • Про CSS
Можливості оформлення SVG
Зовнішній вигляд SVG-елементів можна задавати як за допомогою CSS, так і за допомогою SVG-фільтрів, градієнтів і патернів - їх можна прописувати елементам прямо в коді або задавати через CSS.
Стилі та скрипти можна задавати всередині SVG-файлу, але якщо ми хочемо, щоб те саме зображення в різних умовах виглядало по-різному — стилі всередині файлу не годяться — потрібно, щоб векторний вміст був доступний для зовнішніх стилів.
З усіх способів вставки SVG для цього підходять всього два: іконковий шрифт або інлайновий SVG в HTML (зручніше робити це через use).
Які стилі оформлення можна використовувати для шрифтів іконок? Можна задати колір, додати тіні та анімацію:
See the Pen LnJEK by yoksel (@yoksel) на CodePen.
Не так уже й багато, порівняно з можливостями, які надає SVG.
Для SVG-зображень можна використовувати SVG-градієнти та фільтри, наприклад, розмиття або тіні. Також можна використовувати як обведення та заливання патерни та зображення, а ще можна фарбувати окремі частини картинок і таким чином отримувати різнокольорові іконки.
При вставці SVG через use іконки стають доступними для стилів сторінки, і всі ці чудові можливості можна керувати через зовнішній CSS.
Ось приклад іконок з патернами як тло:
Приклад трохи дикуватий, але він добре показує, що тлом може бути будь-яка картинка. Паттерни задані в коді сторінки та підключені за допомогою CSS.
Ось код дерев'яного патерну:
У патерн можна класти все, що завгодно: комбінації фігур, об'єкти з градієнтами, текст… Щоправда, є підозра, що складні фони можуть погано впливати на продуктивність сторінки, але тестів не робила.
Щоб при наведенні змінюватимісцями обведення та заливання, потрібно додати ще пару рядків:
Також можна робити цікаві ефекти на основі обведення:
Обведення можуть бути пунктирними, для них можна використовувати градієнт або патерн.
Іконкам в останньому рядку як обведення заданий градієнт, що йде в прозорість, чомусь не працює в останній опері.
З анімацією пуктирного обведення можна робити цікаві штуки:
Натисніть Rerun, якщо демо застигло.
Не впевнена, що ця анімація підходить для іконок (буде не дуже добре, якщо іконки будуть ворушитися або зникати), але вона може бути використана для ілюстрацій, що ефектно з'являються.
Наступний приклад демонструє іконки із SVG-фільтрами:
Розмиття, тінь, контур, що повторюється, і внутрішня тінь (її не дуже добре видно).
Звичайно, розмиття навряд чи підійде для іконок, але з ним можна вигадати різні інші цікаві штуки.
Фільтри мають недолік: результатом накладання фільтрів є растрове зображення, через що картинки втрачають здатність тягнутися без втрат в якості і гірше виглядають на екранах з ретиною.
UPD від 19 травня 2014:фільтри добре виглядають на ретині, за умови, що вони задаються SVG-елементам, а не HTML. Перепрошую за неточність.
У прикладі нижче SVG-зображення розділене на кілька шляхів, що дозволяє звертатися до них окремо. Тут це використовується щоб задати елементам різні кольори та затримки анімації. При цьому надалі фігура (в даному випадку це група шляхів) може бути використана цілком - таким чином можна отримати не тільки монохромні іконки, а й різнокольорові. Щоправда, при вставці такого об'єкта через use у ньому перестане працювати анімація, але розмальовка збережеться.
В якостізаливки (або обведення) SVG-елементів зручно використовувати сurrentColor. Це ключове слово, що позначає поточний колір тексту, і якщо задати його як заливку (обведення) - елемент буде фарбуватися разом з навколишнім текстом.
Якщо потім для батьківського елемента встановити колір тексту
фігура заллється тим самим кольором. Дуже зручно для посилань з наведення та сторінок з декількома темами оформлення.
Цікаво, що в SVG можна використовувати далеко не всі CSS-властивості, щодо повного списку можна знайти ось тут. Можна використовувати animation, але transition працює дивно і не у всіх браузерах. CSS-градієнти використовувати, на жаль, не можна. Трансформації працюють.
Також перед використанням різних фільтрів та ефектів потрібно завжди перевіряти, як вони підтримуються різними браузерами.
З усього вищевикладеного можна зробити такі висновки:
- найширші можливості для оформлення надає інлайновий SVG;
- менше можливостей, але зручніше підключення до сторінки надає іконковий шрифт. Істотний мінус полягає в проблемах із підтримкою вбудовуваних шрифтів у різних браузерах;
- якщо SVG-графіка потрібна лише в одному стилі і немає необхідності керувати через зовнішній CSS — найкраще скористатися спрайтом.