PNG must die! або як використовувати вектор для іконок

Звичайно всі ми не дуже любимо змінювати свої звички, але вже настав час відмовитися від PNG.

Для початку 2000-х прозорість була дуже крутою фічею. Але ми вже давно перейшли в еру “responsive design” і масштабованих веторів. SVG, XAML, PDF або Vector Drawables – це значно перспективніші формати для іконок ваших додатків.

Але… більшість користувачів все ще вимагають PNG. А “секретні знання” про те, що вектор можна використовувати для таких потреб відомі далеко не всім серед дизайнерів і розробників.

Чому PNG “не канає”?

  • Цей файловий формат не може масштабуватися без втрати якості. Якщо ви не любите розмиті картинки – вам необхідно змінювати файл кожен раз, коли треба змінити розмір. У програмістів щось десь не влізло, і дизайнеру неминуче доведеться створити нову картинку. Погодьтеся – це неймовірно безглузда витрата часу на тупу механічну роботу.
  • При дизайні іконок у форматі PNG неминуче доводиться заводити тонни різних папок для кожного потрібного вирішення. Це справедливо навіть для Google з їхнім Material Design Icons. Якщо використовувати вектор з одним файлом для будь-яких розмірів – зберігається місце на жорсткому диску. Крім того немає ризику того, що іконки будуть мати не правильне вирішення. І знову ж таки – шалена економія часу та зусиль – один файл іконки можна використовувати для будь-якої платформи.
  • У PNG ви не можете змінити ні колір, ні товщину лінії. Скажімо, якщо кнопка у “натиснутому” стані має змінити колір із чорного на сірий – для цього треба зробити ще одну пнг-ешку.
Які векторні файли можна використовувати для Android?
  • Vector Drawables. SVG шлях запакований у XML опис.
  • Шрифти-іконки.
Для iOS або Mac OS X?
  • PDF.
  • Шрифти-іконки.
Для Windows Desktop або Windows Mobile?
  • XAML. SVG шлях запакований у XML опис.
  • Шрифти-іконки.
Для web додатків або вебсайтів?

Тут це взагалі елементарно. І більшість напевне вже давно так робить. Браузери зараз підтримують:

  • Шрифти-іконки.
  • SVG. Запаковані як унікальні  SVG файли або SVG “спрайти”.
  • Base64 код, безпосередньо у HTML.

Як експортувати іконки у векторних форматах для застосування розробниками?

(Крім генерації нових іконок вказані ресурси мають велику кількість уже готових іконок.)

  • MaterialDesignIcons – генерує всі вказані файлові формати з прев’ю, за винятком для PDF.
  • Fontastic генерує шрифти-іконки, а також SVG “спрайти” з 9000 різних іконок (в тому числі з колекцій Webalys Streamline і Minicons)
  • Icomoon генерує шрифти-іконки та SVG “спрайти”.
  • Fonticons генерує шрифти-іконки.
  • Fontello генерує шрифти-іконки.

Як це виглядає на практиці?

Приклад із workflow розробки додатку під Android та IOS.

  1. Дизайнер малює SVG іконки. Причому для обох платформ потрібен лише один набір цих іконок, без врахування будь-яких особливостей.
  2. SVG файли заганяються у веб-додаток Icomoon, який генерує шрифт із прев’ю.
  3. Девелопер імпортує шрифтовий .ttf файл у проект, відкриває прев’ю, копі-пастить звідти потрібний символ і використовує для кнопок чи будь-яких інших призначень, при цьому, вільно змінюючи розмір і колір залежно від потреби.

Якщо потрібно додати нову іконку її легко додати до бібліотеки в Icomoon, створити новий шрифт, замінити файл .ttf на новий і вуа-ля! Лише треба зауважити, що вказаний додаток генерації шрифт у алфавітному порядку. Тому, щоб потім не довелося змінювати більшість символів вже використаних у розробці, нові іконки треба додавати у кінець списку, наприклад, до назви дописати букву “z”.

Якщо ви і ваша команда ще досі не пробували вектор і змушені мучитися із PNG – приєднуйтеся до нових тенденцій, за ними майбутнє!

One Comment

  1. Натили

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.