Мы часто получаем 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