SVG Asset Export for Mobile Applications
Correctly exported SVG is a vector that developer opens and uses immediately. Incorrect SVG has embedded raster, dozens of extra groups, transforms on root element and incompatibility with platform renderer. The difference in 20 minutes of export work saves hours of debugging.
Preparation in Figma Before Export
Before exporting in Figma: "Outline Stroke" on all strokes (Path → Outline Stroke), "Flatten" for complex boolean operations (intersections, subtractions), ungrouping unnecessary nesting. Gradients — verify they're supported by target SVG renderer.
For icons: remove clip-path where replaceable with mask or correct viewBox. iOS SVG renderer (via UIImage(named:) from PDF) doesn't support all SVG features — for maximum compatibility, use PDF vector in Asset Catalog instead of SVG.
Where SVG Goes on Each Platform
React Native — via react-native-svg. SVG renders natively via Svg, Path, G components. For automatic SVG to React component conversion use SVGR: npx @svgr/cli --native icon.svg > Icon.tsx. Important: react-native-svg doesn't support some SVG filters (feGaussianBlur, etc.) — use only basic primitives.
Flutter — flutter_svg 2.x package (library by dnfield). Renders SVG via SvgPicture.asset('assets/icon.svg'). Limitations: no text element support in SVG (convert text to paths), no filter effects. flutter_svg works via custom SVG parser, not WebView.
Android — Vector Drawable XML. Convert from SVG via Android Studio (File → New → Vector Asset → Local file) or svg2vector CLI. Vector Drawable supports: <path>, <group>, <clip-path>, basic fillColor/strokeColor. Gradients — <gradient> with API 24+.
iOS — two approaches: PDF vector in Asset Catalog (simpler, scales), or SVG directly from iOS 15+ via UIImage(named:) from .svg file. Before iOS 15, SVG supported only via SVGKit or similar libraries.
SVG Cleanup Before Handoff
Minification via SVGO: removes extra metadata, empty groups, redundant attributes. SVGO config with removeViewBox: false (viewBox can't be removed — this breaks scaling) and removeDimensions: true (remove width/height, keep only viewBox).
Typical result: 2.1KB icon → 0.8KB after SVGO without visible changes.
Timeline: 2–3 hours for full asset set (30–80 icons) with cleanup and verification. Cost is calculated individually.







