I’m trying to use some vector icons that I designed in Figma inside my Flutter app. I exported them as SVG files and tried to display them using the flutter_svg package but they won’t load properly.
Here’s the error message I keep getting:
Assertion failed while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#a4b2c(), name: "assets/icons/help-icon.svg", colorFilter: null, theme: SvgTheme(currentColor: null, fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint:
Cannot locate definition for url(#Layer 2__fill)
This package only handles <defs> and xlink:href references when they are declared before being used.
I think I know what’s causing this problem but I’m wondering if there’s a specific way to export SVGs from Figma so they work correctly with Flutter’s SVG library?
Had this exact issue switching from Illustrator to Figma for icons. Figma’s gradient and pattern handling in SVG exports is the culprit. Try exporting as “Outline” instead of keeping fills as gradients - this converts everything to basic paths without definition references. If you need gradients, open the SVG in a text editor and move the <linearGradient>, <radialGradient>, or <pattern> tags from the bottom into the <defs> section at the top. Also, some Figma effects like certain blends don’t play nice with SVG anyway. I usually simplify designs before export - works way better in Flutter.
Same issue here! Check your SVG from Figma - it usually dumps the <defs> at the bottom. Just move the <defs> tag right after <svg> in any text editor and Flutter will render it properly. Fixed it for me every time!