Експорт ассетів у форматі SVG для мобільного застосунку
Правильно експортований SVG — це вектор, який розробник відкриває та одразу використовує. Неправильний — це SVG з embedded raster, десятками зайвих груп, трансформаціями на кореневому елементі та несумісністю з рендерером платформи. Різниця в 20 хвилинах роботи при експорті економить години відладки.
Підготовка у Figma перед експортом
До експорту у Figma потрібно: «Outline Stroke» на всіх обводках (Path → Outline Stroke), «Flatten» для складних булевих операцій (перетину, вичитання), розгрупування ненужних вкладень. Градієнти — перевіряємо, що вони підтримуються цільовим SVG-рендерером.
Для іконок: убираємо clip-path там, де можна замінити маскою або правильним viewBox. iOS SVG-рендерер (через UIImage(named:) з PDF) не підтримує всі SVG-фічі — якщо потрібна максимальна сумісність, використовуємо PDF-вектор у Asset Catalog замість SVG.
Куди йде SVG на кожній платформі
React Native — через react-native-svg. SVG рендериться нативно через Svg, Path, G компоненти. Для автоматичної конвертації SVG у React-компоненти використовуємо SVGR: npx @svgr/cli --native icon.svg > Icon.tsx. Важливо: react-native-svg не підтримує деякі SVG-фільтри (feGaussianBlur та інші) — використовуємо тільки базові примітиви.
Flutter — пакет flutter_svg 2.x (бібліотека від dnfield). Рендерит SVG через SvgPicture.asset('assets/icon.svg'). Обмеження: немає підтримки text елементів у SVG (конвертуємо текст у шляхи), нема filter ефектів. flutter_svg працює через власний SVG-парсер, не через WebView.
Android — Vector Drawable XML. Конвертуємо з SVG через Android Studio (File → New → Vector Asset → Local file) або через svg2vector CLI. Vector Drawable підтримує: <path>, <group>, <clip-path>, базові fillColor/strokeColor. Градієнти — <gradient> з API 24+.
iOS — два підходи: PDF-вектор у Asset Catalog (простіше, масштабується), або SVG прямо з iOS 15+ через UIImage(named:) з .svg файлу. До iOS 15 SVG підтримується тільки через SVGKit або подібні бібліотеки.
Чистка SVG перед передачею
Мініфікація через SVGO: убирає зайві метадані, пусті групи, редундантні атрибути. Конфіг SVGO з removeViewBox: false (viewBox не можна видаляти — це ломає масштабування) та removeDimensions: true (убираємо width/height, залишаємо тільки viewBox).
Типовий результат: іконка 2.1KB → 0.8KB після SVGO без видимих змін.
Строк — 2–3 години на повний набір ассетів (30–80 іконок) з чисткою та перевіркою. Вартість розраховується індивідуально.