Система іконок з SVG-спрайтів, Веб-дизайн
Я завжди був прихильником шрифтів ікон. Багатьом сайтам дійсно необхідна система впорядкування іконок, і шрифти іконок пропонують чудову можливість.
І навіть якщо в IE версії 9 і вище нормально запрацюють вбудовані SVG та елементи для посилань, використання ікон залишається більш прогресивною практикою.
Насамперед, давайте розглянемо, як це працює.
Для того щоб працювати з іконками, можна створити папку з файлами .svg :
Це одна з найкрутіших речей у роботі з SVG — вони є вихідними файлами.
SVG-файли можуть бути кольоровими, чорно-білими, різних форм, розмірів, якими завгодно:
Ви можете через Illustrator (або іншу програму) зберегти їх як завгодно з усіма супутніми елементами:
Створення файлу .svg
Якщо ви захочете, ви можете зробити це вручну. Я так і зробив. Вам навіть не потрібно переглядати кінцевий файл. Просто назвіть його svg-defs.svg або якось у цьому роді.
У цьому файлі має бути лише тег з тегом (який просто означає, що ви визначаєте елементи для подальшого використання), а потім зв'язування тегів (група).
Кожен тег буде мати унікальний ідентифікатор, і включатиме повний маршрут до файлу, а також містити ще багато додаткових даних для кожної іконки:
Знову ж таки ви можете зробити це вручну, але це, звичайно, трохи трудомісткий процес. Фабріс Вайнберг створив плагін grunt-svgstore, який автоматизує цю процедуру.
За допомогою цієї команди ви можете встановити Grunt:
Перевірте, чи доступні всі завдання:
А потім задайте конфігурацію:
У вихідному файлі svg-defs.svg кожна іконка (незалежно від шляху та інших атрибутів)джерела. SVG файлу) полягає в тег з унікальним ідентифікатором, що включає префікс та ім'я файлу (без розширення .svg).
Підключення SVG у верхній частині документа
Підключається .SVG файл так:
Або будь-яким іншим способом на ваш розсуд.
Код повинен розміщуватись у верхній частині. На жаль, у Chrome є один баг, через який це не працюватиме. З цим ми розберемося пізніше.
Використання іконок у будь-якому місці
Тепер ви можете використовувати іконки скрізь(!), де вам подобається:
Переконайтеся, що ви використовуєте відповідні імена класів SVG для визначення розмірів:
Ура: ви можете задавати їх стилі (і стилі їх частин) за допомогою CSS
Одна з причин, чому мені дуже подобаються шрифти іконок, це те, що ви можете оформляти їх за допомогою CSS.
Ця техніка одного вікна, яка дозволяє нам робити все, що потрібно, і навіть більше цього:
- Ми можемо задавати стилі окремих частин;
- SVG має набагато більше елементів, якими ви можете керувати, таких як спеціальні фільтри та пензлі.
Інший спосіб: IcoMoon
IcoMoon , який відомий як інструмент для створення шрифтів іконок, насправді також надає фантастичні можливості створення SVG-спрайтів .
Після вибору необхідних шрифтів просто натисніть кнопку SVG внизу вікна програми, і на виході ви отримаєте набір елементів, у тому числі демо-сторінку, створену за допомогою вбудованого методу SVG :
Підтримка браузерами
Що стосується підтримки браузерами, то тут зоною ризику є IE версії 8 і нижче, Safari 5 і нижче, IOS 4.3 та нижче та Android 2.3 і нижче.
Але якщо ви орієнтуєтеся на користувачів "двох останніх основних версій" -то, як правило, у переважній більшості браузерів SVG підтримуються.
Слід пам'ятати, що іконки можна використовувати як допоміжний елемент. В цьому випадку підтримка браузерами не має критичного значення.
Якщо це буде окремий основний елемент, без якого вміст сайту не може відображатись, це може стати проблемою.
Я міг би ще багато розповісти про підтримку іконок браузерами шрифтів. Однак, просто переконайтеся, що ви застосовуєте їх правильно.
Робити так буде набагато правильніше
В ідеалі ми маємо щось на кшталт наступного:
Це дійсно працює в деяких браузерах, тобто ви могли б не включати їх у верхній частині документа.
Це означає, що надсилатиметься додатковий HTTP-запит, але тоді ви можете більш ефективно використовувати кешування (не роздмухувати кеш документа).
При тестуванні Джонатан Ніл виявив, що для нормальної роботи в тег необхідно включати xmlns-атрибут:
Але навіть у цьому випадку іконки у будь-якій версії IE не підтримуються. Якщо ви не хочете змінити всі елементи , які виконують роботу, у .
Джонатан Ніл встановив і цей факт:
Його демо-версія тепер містить також метод, який формує Ajax-запит до вмісту і включає цей блок, який дозволяє обробляти заливки і в IE 9. Не так ефективно, а полізаливки.
Браузери сприймають як свого роду DOM:
Тепер ми можемо визначати, скажімо, конкретний
Але це впливатиме на всі об'єкти цього шляху. Ви могли б придумати щось на кшталт:
Але це не працює. Це виходить за межі DOM. В ідеалі потрібно використовувати селектор "hat":
Але в одних браузерах він не підтримується,інших не зрозуміло, як працюватиме, і чи працюватиме взагалі.
Мінуси шрифтів іконок
Векторна основа: нічия
Стилі через CSS: Стилі через CSS мають невелику перевагу перед SVG-спрайтами (орієнтовані частини, спеціальні елементи стилю SVG, такі як пензлі).
Збої в роботі : На перший погляд, SVG здається простим у роботі (якщо підтримується браузером).
Однак іноді з ними трапляються дивні речі. Наприклад, якщо ви використовуєте карту символів, як зі звичайними літерами, то при завантаженні шрифтів може статися збій, і ви отримаєте при виведенні багато випадкових символів.
Або застосовуєте картку «Для області приватного використання», і деякі браузери можуть повторно прив'язати їх до дійсно специфічних символів, таких як троянди, проте при повторній прив'язці можуть виникнути труднощі з відтворенням оригінальної структури.
Або ви захочете розмістити файли @font-face на CDN, але вони мають крос-основу, а Firefox ненавидить це. Таким чином, вам знадобиться власний сервер для коректного обслуговування крос-заголовків.
Але установки Nginx можуть підхопити їх неправильно. На жаль.
Семантика : Не має великого значення, але я все ж таки думаю, що використання для зображень має більше сенсу, ніж .
Може бути, хтось підкаже мені? Чи можемо ми / могли б ми додати елементу атрибут заголовка або щось таке?
Або елемент, який був би візуально захований?
Оновлення: елемент ми могли б надати. Або, можливо, елемент, використання якого описано в цій специфікації доступу SVG.
Простота у використанні: Інструменти типу Fontello та IcoMoon хороші для роботи зі шрифтами іконок, але використанняСпеціальна папка SVG , я думаю, ще простіше.
Переклад статті "Icon System with SVG Sprites" був підготовлений дружньою командою проекту Сайтобудування від А до Я.