Figma SVG not parsing with flutter_svg

Question

I have created a bunch of vector graphics I want to use inside my flutter application but cannot seem to load any SVGs from Figma using flutter_svg.

This is the error I'm receiving

The following assertion was thrown while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#e7c1f(), name: "assets/images/question-btn.svg", colorFilter: null, theme: SvgTheme(currentColor: null, fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint:
Failed to find definition for url(#Group 1__d)

This library only supports <defs> and xlink:href references that are defined ahead of their references.

I understand the issue and why it's occurring but is there a way to export a component in figma to an svg that'll work in flutter.

Answer 1

It appears, from the error message, that your SVG has id attributes that have spaces in them.

url(#Group 1__d)

The part after the # has to be the id of another element. But id values cannot have spaces in them.

I would expect Figma to handle that gracefully when exporting an SVG. But perhaps it doesn't.

Try editing your Figma file and remove the spaces from your layer names. For example, change Group 1__d to something like Group_1__d, or Group1d, etc.