Gradient has no stop info error while importing SVG file in Android Studio

Solution 1:

As I suspected the problem was in line xlink:href="#linearGradient11815". It looks like Android Studio is not able to recognize that stop info is in reference. Therefore it is enough to rewrite it in the following way:

<defs
    id="defs11210">
    <radialGradient
       inkscape:collect="always"
       id="radialGradient11817"
       cx="29.611446"
       cy="168.14627"
       fx="29.611446"
       fy="168.14627"
       r="80.8426"
       gradientTransform="matrix(1.6670816,2.4672037,-1.1136432,0.75249749,172.27529,-58.475252)"
       gradientUnits="userSpaceOnUse">
       <stop
          style="stop-color:#69aeed;stop-opacity:1"
          offset="0"
          id="stop11811" />
       <stop
          style="stop-color:#66e6b2;stop-opacity:0.90909094"
          offset="1"
          id="stop11813" />
    </radialGradient>
  </defs>

Solution 2:

In my case I figure out why this happpen. I have 2 shape with the same gradient color for example: white to blue in svg, it defines this gradient only one times and the other doesnt. This cause no "stop" statement is declared to fill in the second shape

=> to fix this just change the second shape to a slightly different color (I increased the RGB by one Interger)

Solution 3:

The main reason is the attribute xlink:href is deprecated according to MDN Web Docs. Therefore I guess it is no longer recognized by Android Studio.

I personally imported an svg asset which was exported from Adobe Illustrator via File -> Export -> Export As... -> SVG. The file exported from Illustrator utilizes this attribute and cause the problem.

To solve this problem, just copy all the missing attributes and subelements of the one xlink:href is referencing to the caller element.

The original snippet in my svg file looks like this:

<linearGradient id="linear-gradient-23" x1="643.82" y1="401.79" x2="178.79" y2="-321.38" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-24" x1="391.43" y1="437.67" x2="459.26" y2="298.96" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-25" x1="608.57" y1="440.97" x2="515.57" y2="257.5" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-26" x1="512" y1="551.86" x2="512" y2="-28.38" xlink:href="#linear-gradient-23"/>
<linearGradient id="linear-gradient-27" x1="381.42" y1="391.4" x2="478.72" y2="193.35" xlink:href="#linear-gradient-23"/>

I copied the attribute gradientUnits="userSpaceOnUse" and subelements <stop .. /> from "linear-gradient-23" to every element who is referencing it:

<linearGradient id="linear-gradient-23" x1="643.82" y1="401.79" x2="178.79" y2="-321.38" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-24" x1="391.43" y1="437.67" x2="459.26" y2="298.96" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-25" x1="608.57" y1="440.97" x2="515.57" y2="257.5" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-26" x1="512" y1="551.86" x2="512" y2="-28.38" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>
<linearGradient id="linear-gradient-27" x1="381.42" y1="391.4" x2="478.72" y2="193.35" gradientUnits="userSpaceOnUse" xlink:href="#linear-gradient-23">
  <stop offset="0" stop-color="#fff" stop-opacity="0"/>
  <stop offset="0.98"/>
</linearGradient>

I recommend using a modern text editor like VSCode to do the job. Also, if anyone knows how to export assets from Illustrator without causing the problem, feel free to leave a comment!

Update: As mentioned by @mainactivity there's an automated script on GitHub for this converting job github.com/14v/svg-non-stop