1. Набори готових іконок
2. icomoon.io
3. flaticon.com
4. малюємо самі
5. Зниження ваги
6. Спрайт або іконочние шрифт?
7. спрайт
8. Base64 в data URI
9. SVG в data URI
10. Use (перевикористання SVG-елементів)
11. шрифт
12. Відображення іконок в браузерах без підтримки SVG

Адаптивний дизайн - популярна тема. Екрани давно вийшли за межі стандартних дозволів, і сайти можуть дивитися і на аксесуарах розміром з долоню, і на великих моніторах. Сайт повинен однаково добре виглядати незалежно від розміру пристрою і щільності пікселів. Для адаптації дизайну і контенту існує багато різних методик і технологій. Векторна графіка, SVG, по-моєму, одна з найбільш цікавих тем в цьому напрямку.

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

Ось, наприклад, один SVG-спрайт в 4-х різних розмірах, вихідний - 32px:

See the Pen Svg-icons: one sprite, four sizes by yoksel ( @yoksel ) on CodePen .

SVG відмінно справляється з цим завданням і добре підійде для використання в адаптивних розкладках.

Іконки для дизайну можна взяти з готових наборів або намалювати свої.

Набори готових іконок

iconmelon.com

Велика колекція ікон на різні теми. Завантажені іконки пропонується вставляти в HTML за допомогою use.

Від автора проекту є надихаюча стаття про SVG-іконки, анімації і ефекти: SVG icons FTW .

icomoon.io

Найзручніший інструмент. Можна не тільки вибрати і завантажити готові іконки, але також можна завантажити свої і отримати їх у вигляді шрифту і / або спрайту. Разом зі спрайтом пропонується завантажити його PNG-версію.

flaticon.com

Велика колекція, іконки зручно поділені на категорії . Вибрані іконки можна скачати в окремих форматах (шрифт, SVG, PNG) або у всіх відразу.

малюємо самі

Для створення свого набору іконок потрібно векторний редактор:

• Adobe Illustrator - по-моєму, кращий. 599 руб. / Місяць в складі підписки на Creative Cloud;
• Inkscape - безкоштовний і не дуже зручний;
• Sketch - для Mac OS, $ 79.99. Має деякі проблеми з векторизацией обводок, але взагалі досить зручний.

Зниження ваги

Готовий SVG-файл зазвичай містить багато зайвого, але при цьому добре піддається оптимізації. З коду видаляються непотрібні атрибути, прогалини і переноси, а в числах зменшується кількість знаків після точки. Вага файлу зменшується на 30-50%. Інструменти для оптимізації:

petercollingridge.appspot.com/svg-optimiser github.com/svg/svgo github.com/sindresorhus/grunt-svgmin

grunt-svgmin - завдання для Grunt з використанням svgo. При цьому файли самі будуть братися з папки з вихідними кодами, оптимізуватися і складатися в папку з результатами. Дуже зручно.

Спрайт або іконочние шрифт?

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

За допомогою шрифту можна робити не тільки однотонні іконки, але і різнокольорові .

Свій шрифт можна зробити, наприклад, на сайті icomoon.io/app/ . Приблизна послідовність дій:

1. Виберіть іконки з набору і / або завантажте свої.
2. Натисніть внизу кнопку Font.
3. На цьому кроці можна перепризначити символи для іконок або відразу завантажити вийшов шрифт.

Разом зі шрифтом в чотирьох форматах (.woff, .svg, .ttf, .eot) завантажується CSS і демо-файл.

Вбудовувані шрифти працюють навіть в 8-м IE, але при цьому мають несподівані проблеми з підтримкою в деяких сучасних браузерах. Opera Mini взагалі не підтримує кастомниє шрифти, Firefox'у потрібні заклинання для сервера, де лежить шрифт (вирішується за допомогою base64), Chrome може вивантажити шрифт, якщо ви надовго залишили вкладку відкритою:

також в Chrome на Windows7 сторінка з вбудованими шрифтами може зависати при відкритті , А в деяких інших браузерах замість іконок може виявитися все що завгодно:

Картинка з статті Кріса Коеру Icon System with SVG Sprites . Я на цьому ж місці якось бачила ієрогліфи, але зараз там SVG, так що скрін зробити не вийде. CSS-tricks , До речі, дуже активно використовує SVG в своєму новому дизайні, а розробники Codepen в новому дизайні редактора відмовилися від використання іконочние шрифтів на користь SVG.

Ще одна стаття в підтримку SVG: Ten reasons we switched from an icon font to SVG .

Незважаючи на зручність використання, проблеми підтримки шрифтів в даний момент змушують зробити вибір на користь іконок на SVG.

Хочеться сподіватися, щоб в майбутньому вбудовуються шрифти будуть краще підтримуватися.

Як існують способи вставки SVG на сторінку?

спрайт

.icon {background-image: url (your.svg); }

плюси:

• короткий читабельний код;
• картинка кешируєтся;
• хороша підтримка браузерами: все, крім Опери на Presto і старих IE.

мінуси:

• запит до сервера;
• в старих опери фоновий SVG підтримується дивно: можуть виникати проблеми при додаванні рамки елементу з SVG-фоном, а в Opera Mini працюють тільки фони без viewBox;
• іконки в спрайт недоступні для стилів сторінки;
• великі спрайт можуть викликати проблеми з продуктивністю.

Base64 в data URI

.icon {background-image: url (data: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL ...); }

плюси:

• немає запиту до сервера.
• хороша підтримка браузерами: все, крім Опери на Presto і старих IE.

мінуси:

• картинка не кешируєтся і кожен раз рендерится заново;
• довга рядок в CSS;
• НЕ читабельно: за кодом незрозуміло що він містить;
• закодована картинка може важити більше вихідної;
• для закодування / розкодування потрібні додаткові інструменти;
• іконки недоступні для стилів сторінки.

SVG в data URI

.icon {background-image: url ( "data: image / svg + xml; utf8, <svg xmlns = ..."); }

плюси:

• немає запиту до сервера;
• щодо читабельний код (можна прочитати або відредагувати);
• не вимагає розкодування;
• підтримується всіма сучасними браузерами, якщо закодувати SVG .

мінуси:

• НЕ кешируєтся;
• довга рядок в CSS;
• іконки недоступні для стилів сторінки;
• підтримується тільки браузерами на Webkit.

Use (перевикористання SVG-елементів)

<Svg width = "48px" height = "48px" viewbox = "0 0 32 32"> <use xlink: href = '# d' /> </ svg>

плюси:

• читабельний код;
• картинкам можна додати title і desc;
• символи доступні для стилів сторінки. Також можна задати іконка fill = "currentColor", і вони будуть фарбуватися разом з текстом.

мінуси:

• вставляється безпосередньо в HTML. Перед використанням елементи повинні бути оголошені у верхній частині сторінки в інлайновом SVG. Можливо, є більш витончений спосіб підключення бібліотеки елементів, мені не вдалося знайти.

шрифт

.icon {content: "\ 6c"; font-family: 'icomoon'; }

плюси:

• зручний код;
• єдиний із способів підтримується в IE8 без фолбеков;
• іконки доступні для стилів сторінки, і будуть фарбуватися разом з текстом.

мінуси:

• якщо шрифт не завантажився (ще не завантажився, взагалі не завантажився або вже вивантажився), замість іконок будуть букви або символи юникода або нічого.

Живий приклад з підтримкою браузерами:

See the Pen xDIiq by yoksel ( @yoksel ) on CodePen .

Приклад представлений як є, без спроб забезпечити сумісність з різними браузерами. Ви можете відкрити демо в сюжеті браузері і подивитися як в ньому підтримуються різні способи.

Відображення іконок в браузерах без підтримки SVG

В даний момент самий зручний і надійний спосіб вставки - у вигляді спрайту.

Для заміни картинок в IE8 і старше можна використовувати спосіб з множинними фонами:

.icon {background-image: url (your.png); / * PNG для IE6-8 * / background-image: url (your.svg), none; }

Для старих Опер можна використовувати такий селектор:

doesnotexist: -o-prefocus, .icon {background-image: url (your.png); }

Таким чином можна домогтися, щоб іконки у користувачів з різними браузерами виглядали приблизно однаково.

З існуючих способів вставки іконок мені найбільше подобається шрифт. Він був би ідеальним, якби не проблеми з підтримкою. Use мені не подобається змішуванням розмітки і оформлення, хоча радує доступність для CSS і можливість додати title і desc. Є ще один дуже хороший, але погано підтримуваний спосіб, але це тема для окремого поста .

UPD: Велике спасибі Ромі Комарову за доповнення до тексту.

UPD від 04.04.14:

1. доповнення від Сергія Борончіева : SVG в data URI буде працювати скрізь, якщо заескейпіть рядок, наприклад, за допомогою escape () (JS).
2. Прекрасний пост від Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube! . Вона пропонує використовувати SASS, щоб автоматично генерувати SVG-градієнти для використання в data URI.