Xcode and iOS render SVG gradient upside down

In Xcode 12.4 and on iOS 14.4 (using UIKit), I am using an SVG graphic from the asset catalog as a UIButton image. The gradient on the graphic renders upside-down, fading from light at the bottom to dark at the top.

In Safari, Chrome, and Photoshop, the SVG gradient renders upside-right, fading from light at the top to dark at the bottom.

In the asset catalog, the asset is set to Render As: Default, Compression: Inherited (Automatic), Preserve Vector Data is unchecked, Devices is set to Universal only.

The gradient code from the SVG is:
Code Block
<linearGradient id="linear-gradient" x1="37.26" y1="75.97" x2="37.26" y2="2.49" gradientTransform="matrix(1, 0, 0, -1, 0, 76)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7c7c7c"/><stop offset="1" stop-color="#646464"/></linearGradient>


Any thoughts?
Is it a problem new to iOS 14.4 and/or Xcode 12.4 ?

I did not analyse in depth you gradient definition. But you use a transform, have you check it is not what causes the inversion ?

I also remember there are some cases (don't remember which) where the coordinate system in iOS API is reversed (y-negative usually, but in some case y-positive as on MacOS).
Could it be the reason ?

See some partly related discussion here:
https://stackoverflow.com/questions/41644590/why-did-apple-flip-their-unit-circle-for-uibezierpath
@Claude31 No idea if this in new to those versions of Xcode and iOS, only added this asset now. However, if the coordinate system were flipped for SVG files in general, I('d expect to find widespread discussion of the issue on these forums and on StackOverflow.
Filed a radar, as we used to say.

No idea if this in new to those versions of Xcode and iOS, only added this asset now.

That's why I always keep some older versions of XCode (earlier 12, 11 and even 10), to be able to test.
Wish you to find what the problem is.
Xcode and iOS render SVG gradient upside down
 
 
Q