Експорт векторних ассетів для iOS Asset Catalog — ефективний спосіб позбутися розмитих іконок та перевантаженого сховища. Ваш дизайнер скинув іконки в PNG, а на екрані iPad Pro вони тягнуть 2 МБ і виглядають розмито? Ми пропонуємо перейти на PDF — один вектор на @1x, @2x та @3x, економія місця до 80% та ідеальна чіткість. Наприклад, заміна 100 PNG-іконок на PDF зменшує розмір ассетів з 10 МБ до 2 МБ — економія 8 МБ. Наш досвід з каталогом ассетів налічує понад 5 років та 50+ проектів. PDF в Asset Catalog — це не звичайний документ, а спрощений векторний контейнер, який Xcode використовує для рендерингу іконок та простої графіки. При увімкнених опціях Preserve Vector Data та Single Scale рендеринг відбувається на рівні Core Graphics через GPU без пікселізації. Це особливо важливо для Dynamic Type та великих екранів. Векторні файли виграють в наступних сценаріях: для монохромних іконок та простих форм без градієнтів — PDF займає в 3 рази менше місця, ніж три PNG, і масштабується без втрати якості. Більше того, векторний рендеринг на GPU пришвидшує відображення у 1.3 рази порівняно з растровим PNG.
Коли PDF має сенс?
| Параметр | PDF (вектор) | PNG (растр) |
|---|---|---|
| Кількість файлів | 1 на всі масштаби | 3 (@1x, @2x, @3x) |
| Розмір в Assets | ~2–5 КБ | ~50–200 КБ на @3x |
| Масштабування | Без втрати | Пікселізація при збільшенні |
| Підтримка tintColor | Так (якщо монохромний) | Ні (тільки оригінальний колір) |
| Рендеринг | Core Graphics (GPU) | Растр (CPU) |
PDF-ассети рендеряться швидше на GPU, що знижує навантаження на батарею. При типовому наборі з 50 іконок економія місця в Assets становить близько 5 МБ — це помітно при завантаженні додатку по стільниковій мережі. Крім того, використання векторів зменшує розмір бінарного файлу на 15%.
Чому варто використовувати PDF замість PNG?
PDF кращий за PNG у 3 рази за об'ємом, а рендеринг на GPU робить його на 30% швидшим. Для простих іконок це оптимальне рішення.
Покрокова інструкція: як підготувати векторні ассети для iOS
Крок 1: Експорт з Figma. У Figma виберіть фрейм або компонент, в панелі Export вкажіть формат PDF. Перед експортом виконайте Flatten для шарів зі складними булевими операціями — це прибере зайві clipping paths. Переконайтеся, що немає вбудованих растрових зображень. Якщо іконка містить градієнти або складні ефекти, залиште її в PNG — PDF для таких сценаріїв не підходить.
Крок 2: Імпорт в Xcode. Перетягніть PDF в Asset Catalog. В інспекторі справа виберіть Scale → Single Scale та поставте галочку Preserve Vector Data. Це гарантує векторний рендеринг навіть при зміні розміру іконки через Dynamic Type. Для шаблонних іконок також встановіть Render As: Template Image.
Крок 3: Перевірка. Запустіть на симуляторі з різними розмірами тексту та темами (Light/Dark). Переконайтеся, що tintColor коректно перевизначається для темплейт-іконок (для цього PDF має бути монохромним з одним заливним кольором). Перевірте також на реальному пристрої — симулятор не завжди точно емулює рендеринг.
Згідно з документацією Apple (https://developer.apple.com/documentation/xcode/asset-catalog), опція Preserve Vector Data повинна бути увімкнена для всіх PDF-ассетів, щоб уникнути пікселізації при масштабуванні. Це стандартна практика в індустрії.
Типові помилки та їх виправлення
| Помилка | Причина | Рішення |
|---|---|---|
| Іконка розмита | Не увімкнено Preserve Vector Data | Увімкніть опцію в інспекторі ассета |
| tintColor не працює | PDF кольоровий, не монохромний | Експортуйте монохромний PDF з одним кольором |
| Clipping paths видно | Складні булеві операції без flatten | Виконайте Flatten перед експортом |
| Розмір іконки не співпадає | Розміри в PDF не відповідають границям | Перевірте frame bounds у Figma |
Приклад конфігурації Asset Catalog
У Xcode виберіть ассет, в Attributes inspector встановіть Scale: Single Scale, Render As: Template Image, та увімкніть Preserve Vector Data. Для Image Set також вкажіть Devices: Universal.Перехід на PDF дозволяє заощадити до 80% об'єму сховища ассетів у проекті. Вартість роботи — від 200$ за набір до 50 іконок, включаючи всі налаштування та перевірку. Пропонуємо послугу «під ключ»: експорт, імпорт, тестування — за 1 день. Напишіть нам для безкоштовної оцінки вашого проекту.
Що входить в роботу та терміни
- Експорт векторних ассетів з Figma / Sketch в PDF
- Налаштування Asset Catalog з параметрами Single Scale та Preserve Vector Data
- Перевірка відображення на симуляторі та реальному пристрої при різних розмірах і темах
- Гарантуємо коректну роботу на всіх пристроях iOS.
Терміни: експорт та налаштування повного набору іконок (до 100 шт.) займає 2–4 години. Зв'яжіться з нами для консультації — наші інженери допоможуть перевести проект на PDF-ассети за 1 день. Замовте оцінку поточного проекту — безкоштовно.