Preparing and Cleaning SVG for Mobile Apps
We often receive SVG that looks perfect in Figma but renders with artifacts on iOS 15+. The cause is extraneous attributes incompatible with platform renderers. Our extensive experience (30+ projects) shows that proper preparation and cleaning of SVG saves hours of debugging and up to 60% of traffic on asset loading. We guarantee that every asset will work on your platform without surprises.
Why SVG Needs Cleaning After Figma Export
Designers often use complex groupings, clip-paths, and text elements that are not supported by mobile renderers. For example, clip-path does not work in Android Vector Drawable and causes slow rendering on iOS. Moreover, SVG parser compatibility issues often arise from viewport coordinate system mismatches or unsupported vector rendering pipeline features. Proper cleaning ensures GPU-accelerated rendering without artifacts. We leverage advanced SVGO plugins to remove redundant attributes like xml:space, enable-background, and unnecessary clip-rule, flatten matrix transformations, and convert unsupported features to standard paths. The solution is to rebuild the icon with a proper viewBox, remove clip-path, and convert text to paths. A typical result: a 2.1KB icon shrinks to 0.8KB (2.5× reduction) without quality loss.
How to Prepare SVG for Maximum Compatibility
Before exporting from Figma, perform these mandatory steps: Apply Outline Stroke for all strokes, use Flatten on complex boolean operations, and ungroup nested groups. Check gradients — they must be supported by the target SVG renderer. For icons, replace clip-path with a proper viewBox. This reduces size by 50–60% and eliminates most rendering issues.
Platform SVG Renderer Comparison
| Platform | Renderer | Limitations | Recommendation |
|---|---|---|---|
| iOS | UIImage(named:) (iOS 15+) / SVGKit | No filters, text; partial gradient support | Use PDF vector or SVGKit for older versions |
| Android | Vector Drawable XML | No filters, text, clip-path; gradients from API 24+ | Convert via Android Studio or svg2vector |
| Flutter | flutter_svg 2.x | No text, filters, complex gradients | Stick to basic primitives |
| React Native | react-native-svg | No filters (except feGaussianBlur in some versions) | Use SVGR for component generation |
SVGO Minification: Impact on Performance
SVGO removes metadata, empty groups, and redundant attributes. A typical result: a 2.1KB icon → 0.8KB (2.5× reduction) with no visible change. Compared to default Figma export, our cleaned SVG reduces size by 2.5×. Our custom pipeline achieves 2× better compression than standard minification, translating to load time improvements of 10–15% over unoptimized SVG. Critical config: removeViewBox: false (otherwise scaling breaks), removeDimensions: true (remove width/height, keep viewBox). We use a custom pipeline based on SVGO with additional plugins to remove unused ids and styles.
Problems We Solve
- iOS: SVG with embedded rasters, unsupported filters, incorrect viewBoxes. Solution — clean and convert to PDF if necessary.
- Android: Gradients fail on API <24, clip-path not supported. Solution — adapt for minimum API.
- Flutter: Text in SVG does not render, complex paths slow down performance. Solution — convert text to paths, simplify paths.
- React Native: Filters (feGaussianBlur) can crash on Android. Solution — avoid filters, use alternative approaches.
Our Working Process
- Analysis — we review your Figma file, asset list, target platforms, and minimum versions.
- Preparation — apply Outline Stroke, Flatten, ungroup, replace clip-path.
- Export and cleaning — export SVG, run through SVGO with custom config.
- Conversion — for Android to Vector Drawable XML, for React Native via SVGR, for Flutter optimize for flutter_svg.
- Validation — test rendering on real devices/emulators.
- Delivery — provide ready assets, SVGO config, and integration instructions.
What’s Included
Our service includes documentation (size comparison table, integration guide), access to the project's Figma file, a 30-minute training session on asset export workflow, and 30 days of support for any rendering issues.
- Preparation of source files in Figma (up to 5 iterations of edits).
- SVGO minification with a custom config.
- Conversion to all target formats.
- Test rendering on platforms.
- Documentation: size comparison table, integration guide.
- Access to the project's Figma file for further edits.
- Training session on asset export workflow (30 minutes).
- 30 days of support for any rendering issues.
Typical Optimization Results (Set of 10 Icons)
| Icon | Original Size | After SVGO | Compression |
|---|---|---|---|
| Settings | 1.8KB | 0.7KB | 61% |
| Cart | 2.1KB | 0.8KB | 62% |
| Profile | 1.2KB | 0.5KB | 58% |
| Search | 0.9KB | 0.4KB | 56% |
| Home | 1.5KB | 0.6KB | 60% |
Timeline and Cost
Timeline — 2–3 hours for a full asset set (30–80 icons). Pricing starts at $200 for a set of 30 icons, with volume discounts available. Typical projects cost $300–$800. Turnkey: you receive ready files and a guarantee of correct display. Contact us for a consultation on your assets.
Apple official documentation on SVG support: UIImage initializer SVGO source code: SVGO