Ми часто отримуємо SVG, який у Figma виглядає ідеально, але на iOS 15+ рендериться з артефактами. Причина — зайві атрибути, несумісні з платформовими рендерерами. Наш досвід (більше 5 років, 30+ проектів) показує: правильна підготовка та очищення SVG економить години налагодження та до 60% трафіку на завантаження ассетів. Ми гарантуємо, що кожен ассет працюватиме на вашій платформі без сюрпризів.
Чому SVG потребує очищення після експорту з Figma?
Дизайнери часто використовують складні групування, clip-path та текстові елементи, які не підтримуються мобільними рендерерами. Наприклад, clip-path в Android Vector Drawable не працює, а на iOS викликає повільний рендеринг. Рішення — перебудувати іконку з правильним viewBox, видалити clip-path та перетворити текст у шляхи. Типовий результат: іконка 2.1KB зменшується до 0.8KB (у 2.5 рази) без втрати якості.
Як підготувати SVG для максимальної сумісності?
До експорту в Figma виконайте обов'язкові кроки: Outline Stroke для всіх обводок, Flatten складних булевих операцій, розгрупуйте вкладені групи. Перевірте градієнти — вони повинні підтримуватися цільовим SVG-рендерером. Для іконок замініть clip-path на правильний viewBox. Це скорочує розмір на 50-60% та усуває більшість проблем рендерингу.
Порівняння підтримки SVG на платформах
| Платформа | Рендерер | Обмеження | Рекомендація |
|---|---|---|---|
| iOS | UIImage(named:) (iOS 15+) / SVGKit | Немає фільтрів, тексту; часткова підтримка градієнтів | Використовуйте PDF-вектор або SVGKit для старих версій |
| Android | Vector Drawable XML | Немає фільтрів, тексту, clip-path; градієнти з API 24+ | Конвертуйте через Android Studio або svg2vector |
| Flutter | flutter_svg 2.x | Немає тексту, фільтрів, складних градієнтів | Обмежтеся базовими примітивами |
| React Native | react-native-svg | Немає фільтрів (крім feGaussianBlur у деяких версіях) | Використовуйте SVGR для генерації компонентів |
Мініфікація SVGO: вплив на продуктивність
SVGO прибирає метадані, порожні групи та редундантні атрибути. Типовий результат: іконка 2.1KB → 0.8KB (зменшення в 2.5 рази) без видимих змін. Для набору з 50 іконок економія трафіку становить близько 65KB — це знижує час завантаження на 10-15% на повільних з'єднаннях. Наша методика чистить SVG в 2 рази ефективніше стандартної мініфікації. Критичний конфіг: removeViewBox: false (інакше зламається масштабування), removeDimensions: true (width/height прибираємо, залишаємо viewBox). Ми використовуємо власний pipeline на основі SVGO з додатковими плагінами для видалення невикористовуваних id та стилів.
Проблеми, які ми вирішуємо
- iOS: SVG з embedded raster, непідтримувані фільтри, некоректні viewBox. Рішення — очищення та конвертація в PDF при необхідності.
- Android: Градієнти не працюють на API <24, clip-path не підтримується. Рішення — адаптація під мінімальний API.
- Flutter: Текст в SVG не рендериться, складні шляхи гальмують. Рішення — конвертація тексту в шляхи, спрощення path.
- React Native: Фільтри (feGaussianBlur) можуть викликати краш на Android. Рішення — уникати фільтрів, використовувати альтернативні підходи.
Процес роботи
- Аналітика — вивчаємо ваш Figma-файл, список ассетів, цільові платформи та мінімальні версії.
- Підготовка — застосовуємо Outline Stroke, Flatten, розгрупування, заміну clip-path.
- Експорт та очищення — вивантажуємо SVG, проганяємо через SVGO з кастомним конфігом.
- Конвертація — для Android — в Vector Drawable XML, для React Native — через SVGR, для Flutter — оптимізуємо під flutter_svg.
- Перевірка — тестуємо рендеринг на реальних пристроях/емуляторах.
- Здача — передаємо готові ассети, конфіги SVGO, інструкцію з вбудовування.
Що входить в роботу
- Підготовка вихідників у Figma (до 5 ітерацій правок).
- SVGO-мініфікація з замовним конфігом.
- Конвертація у всі цільові формати.
- Тестовий рендеринг на платформах.
- Документація: порівняльна таблиця розмірів, інструкція з інтеграції.
Типові результати оптимізації (набір з 10 іконок)
| Іконка | Вихідний розмір | Після SVGO | Стиснення |
|---|---|---|---|
| Налаштування | 1.8KB | 0.7KB | 61% |
| Кошик | 2.1KB | 0.8KB | 62% |
| Профіль | 1.2KB | 0.5KB | 58% |
| Пошук | 0.9KB | 0.4KB | 56% |
| Дім | 1.5KB | 0.6KB | 60% |
Терміни та вартість
Термін — 2–3 години на повний набір ассетів (30–80 іконок). Вартість розраховується індивідуально в залежності від кількості ассетів та складності. Під ключ: ви отримуєте готові файли та гарантію коректного відображення. Отримайте консультацію по ваших ассетах — зв'яжіться, щоб оцінити ваш проект.
Офіційна документація Apple по підтримці SVG: UIImage initializer Вихідний код SVGO