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

Question

I am trying to upload SVG file which was exported from Inkscape in Android Studio using Vector Asset but unfortunately I' ve got following error:

ERROR @line 35: Gradient has no stop info

Code where gradients are defined:

<defs
     id="defs11210">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient11815">
      <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" />
       --&gt;
    </linearGradient>
    <radialGradient <!-- LINE 35-->
       inkscape:collect="always"
       xlink:href="#linearGradient11815"
       id="radialGradient928"
       cx="99.615288"
       cy="233.88142"
       fx="99.615288"
       fy="233.88142"
       r="80.842598"
       gradientTransform="matrix(1,0,0,1.3440437,0,-80.46542)"
       gradientUnits="userSpaceOnUse" />
  </defs>

I guess xlink:href="#linearGradient11815" cause the problem but I don't understand why Android Studio would not be able to recognize that stop info is in reference.

Thanks in advance.

I changed syntax as Moini suggested but still it doesn't work:

<stop stop-color="#69aeed"
        stop-opacity="1"
        offset="0" />
<stop stop-color="#66e6b2"
        stop-opacity="0.90909094"
        offset="1" />

I suspect Android studio expects this syntax instead of the CSS style gradient: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop — Moini, Aug 09 '19 at 13:37
I updated code for `stop-color` but it still doesn't work. Could you please take a look at it? — Paweł Bęza, Aug 09 '19 at 13:55
Sorry, I'm not actually an expert here, hence only a comment. I'd try replacing the xlink thing, and I'd also check what line 35 (or another line now, probably) actually contains. — Moini, Aug 09 '19 at 16:10

score 24 · Accepted Answer · edited Apr 28 '22 at 14:39

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>

Basically the stop tags should be nested inside the radialGradient or linearGradient.

You can also use the Java tool github.com/14v/svg-non-stop. You need to download and install JDK in your machine first. Then run the tool using command line.

Linux or Mac can use terminal for eg.

> cd /folder/to/svg-non-stop 
> ./svg-non-stop /my/full/path/to/your.svg

Then another svg file will be outputted with the correct format and you can then import that into Android Studio's Asset Vector.

@Jetwiz go the github page, click the link for the binaries, download and extract them, open a terminal window and navigate to the directory svg-non-stop-1.x.x. Then use as instructed on the github page with the command `./bin/svg-non-stop /full/path/to/my_vector_drawable.svg`. I've only tested on a Linux machine, but for me it worked flawlessly, and generated a new svg next to the original, with the fix perfectly applied! — Geoff Davids, Jul 10 '20 at 14:29
https://github.com/14v/svg-non-stop automated this algorithm — MainActivity, Aug 26 '20 at 07:54

score 4 · Answer 2 · edited Jun 28 '22 at 16:07

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. 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

@rickey-levi If you mean how to export a flawless svg from Illustrater, no. — Homan, Jul 06 '21 at 14:40

score 4 · Answer 3 · answered Mar 15 '22 at 15:13

4

this site just saved me: https://svg2vector.com/ import your .svg and generate the xml code

answered Mar 15 '22 at 15:13

LLL

101
4

score 3 · Answer 4 · edited May 25 '22 at 04:13

3

It helped me to re-save the SVG in Inkscape as File > Save as.. > Save as type: Optimized SVG (*.svg).

My SVG is very simple, so it may not work for everyone.

edited May 25 '22 at 04:13

Bruno Bieri

9,724
11
63
92

answered May 12 '22 at 18:35

Darkyen

109
5

score 2 · Answer 5 · answered Mar 03 '21 at 05:37

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)

score 0 · Answer 6 · answered Oct 12 '21 at 20:07

0

I ran into the same problem, but instead of hand-editing the XML file I just ran it through this: https://www.svgminify.com/

answered Oct 12 '21 at 20:07

erikjber

11
1

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

6 Answers6

Linked