Gradient not importing correctly (at all) for loaded SVG

[megalithic]

Version

2.0

Test Case

Using the Kitchen Sink demo

Steps to reproduce

Using the Kitchen Sink demo to load this SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 1400 980" xmlns="http://www.w3.org/2000/svg" width="1400px" height="980px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><rect id="ee-background" x="0" y="0" width="1400" height="980" style="fill: white; fill-opacity: 1; pointer-events: none;"/><g transform="matrix(1.3140727281570435, 0, 0, 1.3140727281570435, -482.49212397372656, 90.55544215244811)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 5.4569682106375694e-12, 1.3642420526593924e-12)">
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="702.4817" y1="66.4817" x2="825.5183" y2="189.5183">
<stop offset="0" style="stop-color:#FBB03B"/>
<stop offset="0.2209" style="stop-color:#FBAC3A"/>
<stop offset="0.4348" style="stop-color:#F9A037"/>
<stop offset="0.6458" style="stop-color:#F78D32"/>
<stop offset="0.8538" style="stop-color:#F4722A"/>
<stop offset="1" style="stop-color:#F15A24"/>
</linearGradient>
<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style="fill: url('#SVGID_11_');"/>
</g><g transform="matrix(1, 0, 0, 1, 7.275957614183426e-12, 1.8189894035458565e-12)">
<g>
<g class="st2" style="opacity: 0.15;">
<path d="M777.7,170.6c-2.6,2.7-4.7,1.9-4.7-1.9v-67.2c0-3.7,2.2-4.6,4.7-1.9l29.1,30.6c2.6,2.7,2.5,7.1,0,9.8L777.7,170.6z"/>
</g>
<g>
<path class="st3" d="M770.7,163.6c-2.6,2.7-4.7,1.9-4.7-1.9V94.6c0-3.7,2.2-4.6,4.7-1.9l29.1,30.6c2.6,2.7,2.5,7.1,0,9.8&#10;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;L770.7,163.6z" style="fill: rgb(255, 255, 255);"/>
</g>
</g>
<g>
<g class="st2" style="opacity: 0.15;">
<path d="M766,165.2c0,3.7-3,6.8-6.8,6.8h-1.5c-3.7,0-6.8-3-6.8-6.8v-59.5c0-3.7,3-6.8,6.8-6.8h1.5c3.7,0,6.8,3,6.8,6.8V165.2&#10;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;z"/>
</g>
<g>
<path class="st3" d="M759,158.2c0,3.7-3,6.8-6.8,6.8h-1.5c-3.7,0-6.8-3-6.8-6.8V98.8c0-3.7,3-6.8,6.8-6.8h1.5&#10;&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;c3.7,0,6.8,3,6.8,6.8V158.2z" style="fill: rgb(255, 255, 255);"/>
</g>
</g>
</g></g></g></svg>

Expected Behavior

Expect to see an orange gradient like this:
https://cl.ly/3M272R2m060q

Actual Behavior

Actual behavior is a solid black filled shape like this:
https://cl.ly/2S1j0O021u2i

[blobinabottle]

I have the same issues in different app (Sketch & Figma). But if I open your svg in illustrator and save it again it's ok. Where did you get it?

[megalithic]

@blobinabottle thanks for chiming in sir! It was from Vecteezy's online vector editor (a shape in the elements/illustrations panel of the app): https://www.vecteezy.com/editor.

Would you mind pasting the svg content of that same vector after you opened it in illustrator and saved it so I can see what the difference is?

Thank you so much for your help and time!

[blobinabottle]

You're welcome ;-) here it is.
quick test in fab here:
https://jsfiddle.net/blobinabottle/4mkksqkx/2/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="master-artboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 1400 980" style="enable-background:new 0 0 1400 980;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:url(#SVGID_1_);}
	.st2{opacity:0.15;}
</style>
<rect id="ee-background" y="0" class="st0" width="1400" height="980"/>
<g transform="matrix(1.3140727281570435, 0, 0, 1.3140727281570435, -482.49212397372656, 90.55544215244811)">
	<g transform="matrix(1, 0, 0, 1, 0, 0)">
		<g transform="matrix(1, 0, 0, 1, 5.4569682106375694e-12, 1.3642420526593924e-12)">
			
				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="974.8733" y1="612.295" x2="1097.9099" y2="489.2585" gradientTransform="matrix(1.3141 0 0 -1.3141 -578.5729 871.0819)">
				<stop  offset="0" style="stop-color:#FBB03B"/>
				<stop  offset="0.2209" style="stop-color:#FBAC3A"/>
				<stop  offset="0.4348" style="stop-color:#F9A037"/>
				<stop  offset="0.6458" style="stop-color:#F78D32"/>
				<stop  offset="0.8538" style="stop-color:#F4722A"/>
				<stop  offset="1" style="stop-color:#F15A24"/>
			</linearGradient>
			<path class="st1" d="M851,128c0,48-39,87-87,87l0,0c-48,0-87-39-87-87s39-87,87-87C812,41,851,80,851,128z"/>
		</g>
		<g transform="matrix(1, 0, 0, 1, 7.275957614183426e-12, 1.8189894035458565e-12)">
			<g>
				<g class="st2">
					<path d="M777.7,170.6c-2.6,2.7-4.7,1.9-4.7-1.9v-67.2c0-3.7,2.2-4.6,4.7-1.9l29.1,30.6c2.6,2.7,2.5,7.1,0,9.8L777.7,170.6z"/>
				</g>
				<g>
					<path class="st0" d="M770.7,163.6c-2.6,2.7-4.7,1.9-4.7-1.9V94.6c0-3.7,2.2-4.6,4.7-1.9l29.1,30.6c2.6,2.7,2.5,7.1,0,9.8
						L770.7,163.6z"/>
				</g>
			</g>
			<g>
				<g class="st2">
					<path d="M766,165.2c0,3.7-3,6.8-6.8,6.8h-1.5c-3.7,0-6.8-3-6.8-6.8v-59.5c0-3.7,3-6.8,6.8-6.8h1.5c3.7,0,6.8,3,6.8,6.8V165.2z"
						/>
				</g>
				<g>
					<path class="st0" d="M759,158.2c0,3.7-3,6.8-6.8,6.8h-1.5c-3.7,0-6.8-3-6.8-6.8V98.8c0-3.7,3-6.8,6.8-6.8h1.5
						c3.7,0,6.8,3,6.8,6.8V158.2z"/>
				</g>
			</g>
		</g>
	</g>
</g>
</svg>

[asturur]

weird, i want to debug this. the only thing i see weird is the path data.

[megalithic]

Thank you @asturur Please let me know if I might be of assistance in any way.

[asturur]

found it!

The url of the fill was using a quoting around the id. Never seen that in any example. i presume is wrong and tolerate by browsers, we can tolerate it as well with a nicer regex.