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.