Экспорт ассетов в формате 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 иконок) с чисткой и проверкой. Стоимость рассчитывается индивидуально.