Figma exported SVGs with gradients not working as expected

If you are googling that issue that SVGs gradients are not working, and you exported these SVGs from Figma: here is your solution.

SVGs are basically XML data. And a gradient is just an XML tag within your SVG file.

That gradient YML tag can looks like this:

<svg ...>
    <rect ... fill="url(#paint0_linear)"/>

    <defs>
        <linearGradient id="paint0_linear" ... gradientUnits="userSpaceOnUse">
            <stop offset="..."/>
            <stop offset="1" stop-opacity="0"/>
        </linearGradient>
    </defs>
</svg>

Figma defines a  with the id="paint0_liner" and usesed that id in the  element.

The issue with this Figma export is: if you got two or more SVGs with a gradient on your page, the IDs would interfere with each other. That's why you may see the issue that adding a new SVG (with gradient) breaks your old SVG or your new one.

The fix is simple: if you export an SVG from Figma, you should always make IDs for gradients unique. Just change the paint0_liner to any unique name you like. Don't forget to change it in the gradient definition and the elements using that gradient.