Створення svg іконок для сайту (favicon svg)

14

Від автора: прості, часто геометричні і виконані в різних розмірах іконки (favicon) відмінно підходять під формат SVG. На жаль, до недавнього часу браузери дуже погано підтримували SVG фавиконы. У Firefox 41 з’явилася підтримка даного формату, в Safari 9 для десктопної і мобільного версії (з деякими поступками). Проте в IE/Edge і Chrome все ще немає підтримки, принаймні на даний момент. Тим не менш, ситуація незабаром зміниться (повинна змінитися). Так що варто приділити трохи часу і вивчити можливості та синтаксис SVG фавиконов, щоб підготувати ваш сайт до прийдешніх часів.

Проблема

З моменту створення картинки 16х16 пікселів змінилася сама концепція фавиконов. Тепер фавикон повинен працювати з цілою серією іконок, заточених під тачскріни, з плитковим інтерфейсом нових версій Windows, зі спеціальними можливостями Retina дисплеїв і т. д. Комплексне рішення (від realfavicongenerator) включає в себе досить довгий список всіляких варіантів:

Хоча більшість з цих файлів можна просто покласти в корінь вашого сайту, а відповідні додатки виберуть, що їм необхідно, не прописуючи всі їх в явному вигляді в HTML, все ж це не найкращий підхід. Занадто багато контенту потрібно створити, а потім ще й обслуговувати. Один масштабований файл буде працювати набагато краще. Наприклад, логотип нашого сайту збережений у форматі favicon.svg:

the new code favicon

І виглядає так:

Створення svg іконок для сайту (favicon svg)

Фавикон можна додати рядком коду між тегами head:

Кілька зауважень:

Складові малюнка виконані окремими, не перекривають один одного фігурами: значок повинен мати розмір 16х16 пікселів. Тут важливі простота і чіткість.

По тим же самим причинам фон в SVG іконці прозорий, так що її можна використовувати в різних ситуаціях.

Viewbox для SVG повинен бути квадратним.

Малюнок повинен займати найбільшу площу на viewBox’е (полотно в SVG).

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

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

Щоб SVG заробив необхідно вказувати тип MIME image/svg+xml.

Додаємо підтримку iOS

У iOS 9 також підтримуються SVG фавиконы в закріплених закладках, але з деякими застереженнями:

Елементи SVG повинні бути чорного кольору.

У посиланні на фавикон повинен бути вказаний неофіційний атрибут mask-icon.

Не обов’язково, але колір можна змінити за допомогою неофіційного атрибут color. Підтримувані значення hexadecimal, keyword і rgb. Не рекомендується використовувати яскраві кольори.

Враховуючи вищеописані умови, я б використав новий SVG-файл без інформації про кольорах:

the new code favicon

Щоб це запрацювало на iOS, додаємо рядок:

Збираємо думки разом

Припустимо, що вам більше не потрібно підтримувати IE8 і більш ранні версії, значить, формат .ico можна викинути, а браузерам залишити файл PNG. Щоб фавикон відображався у всіх браузерах і не забути про SVG, розташуємо посилання в такому порядку:

Ми відмовилися від використання формату .ico: якби ми поклали в корінь сайту файл favicon.ico, то браузери використовували його замість інших, і не важливо які директиви ви вказали в хедері.

Для iOS і IE все ще потрібно вказувати окремі іконки; SVG даних браузерах ще не працює.

Висновок

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