SVG exported from Figma fails to render with flutter_svg package

Other Questions Figma
1

I am having trouble rendering an SVG file that I exported from Figma using the flutter_svg package in my Flutter application. When I attempt to run the app, I encounter the following error messages:

Failed to find definition for url(#pattern0)
Failed to find definition for url(#pattern1)

The complete error message indicates that the SVG library only supports references that are defined prior to being referenced. It seems that this issue could arise if definitions are placed after the elements that refer to them, or if they are located in another file.

Here’s the SVG code I’m using:

<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <image id="image0_133_96" width="100" height="100" xlink:href="data:image/png;base64,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"/>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/>
    </pattern>
    <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
        <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/>
    </pattern>
</defs>
<mask id="mask0_133_96" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="26" height="27">
    <rect y="0.333344" width="25.28" height="26" fill="url(#pattern0)"/>
</mask>
<g mask="url(#mask0_133_96)">
    <rect y="0.333344" width="25.28" height="26" fill="url(#pattern1)"/>
    <rect y="0.333344" width="25.28" height="26" fill="#9A9EAA"/>
</g>
</svg>

Can anyone help me identify what is going wrong?

2

Had the same issue with complex Figma SVG exports. This happens because flutter_svg doesn’t handle pattern definitions well, especially when they reference embedded images. I fixed it by simplifying the SVG - removed the pattern elements and converted the base64 image to a direct fill/stroke. You can open it in Inkscape and convert patterns to simple paths or shapes. Or just export as PNG from Figma and use a regular Image widget instead. That’s usually better for performance anyway when you’ve got complex bitmap data like this, and you won’t hit flutter_svg’s pattern limits.

3

The issue arises because the flutter_svg package struggles with SVG patterns that reference embedded base64 images. Figma’s exports can lead to pattern definitions that are not well-supported. I’ve encountered similar problems before. One approach to resolve this is to manually edit the SVG by removing the pattern and mask elements, transforming the rectangles into a simple path or using a solid color fill. Alternatively, you could use an SVG optimizer to simplify the structure, which can prevent referencing errors while maintaining an acceptable level of visual quality.