Support xlink:href for defs

[csga5000]

Here's the SVG:

<svg viewBox="0 0 32 32">
	<defs>
		<linearGradient id="linearGradient4688">
			<stop stop-color="#761f24" offset="0"/>
			<stop stop-color="#962025" stop-opacity="0.35" offset="0.65"/>
			<stop stop-color="#c1272d" stop-opacity="0" offset="1"/>
		</linearGradient>
		<linearGradient y2="0" x2="0" y1="1" x1="0.5" id="linearGradient4694" xlink:href="#linearGradient4688"/>
	</defs>
	<circle fill="#c1272d" stroke="#b8cfe0" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="4" r="15.25" cy="16" cx="16"/>
	<circle fill="url(#linearGradient4694)" stroke-miterlimit="4" r="12" cx="16" cy="16"/>
</svg>

Renders fine in chrome with a red angled linear gradient in the center part caused by the inner circle.

In my app, the inner circle is plain white. Any idea why?

[dnfield]

I don't have support for these kind of composed references for defs - really, the only thing you can reference right now is a gradient or a clipRect :(

[dnfield]

Renamed this issue and will leave open to track/gauge interest.

[csga5000]

@dnfield Please forgive my ignorance w/ SVG's and what not. But isn't a gradient what I'm referencing? And fearing lack of support I tried some of the other SVG's this app uses. And this one works fine, which has similar stuff going on like the weird xlink:href thing.

This works:

<svg viewBox="0 0 48 48">
	<defs>
		<linearGradient id="3">
			<stop stop-color="#fff" stop-opacity="0.5"/>
			<stop offset="1" stop-color="#fff" stop-opacity="0.01"/>
		</linearGradient>
		<linearGradient id="4">
			<stop stop-color="#fff"/>
			<stop offset="1" stop-color="#fff" stop-opacity="0"/>
		</linearGradient>
		<linearGradient id="5">
			<stop stop-color="#fff" stop-opacity="0.8"/>
			<stop offset="1" stop-color="#fff" stop-opacity="0"/>
		</linearGradient>
		<linearGradient y1="5.87" x2="0" y2="42.13" id="6" xlink:href="#5" gradientUnits="userSpaceOnUse"/>
		<linearGradient x1="10.04" y1="-16.96" x2="24" y2="30.51" id="7" xlink:href="#4" gradientUnits="userSpaceOnUse" />
		<radialGradient cx="24.43" cy="52.28" r="21.57" id="8" xlink:href="#3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.29,0,36.7255)" />
	</defs>
	<path
		 d="M 5.62,4.81 A 1.04,1.04 0 0 0 4.81,5.84 l 0,36.3125 a 1.04,1.04 0 0 0 1.03,1.03 l 12.25,0 A 1.04,1.04 0 0 0 19.125,42.1562 l 0,-36.31 A 1.04,1.04 0 0 0 18.0937,4.81 l -12.25,0 a 1.04,1.04 0 0 0 -0.21,0 z m 24.06,0 A 1.04,1.04 0 0 0 28.875,5.84 l 0,36.3125 a 1.04,1.04 0 0 0 1.03,1.03 l 12.25,0 a 1.04,1.04 0 0 0 1.03,-1.03 l 0,-36.31 A 1.04,1.04 0 0 0 42.1562,4.81 l -12.25,0 a 1.04,1.04 0 0 0 -0.21,0 z"
		 fill="#204a87" />
	<path
		 d="m 5.84,5.84 0,36.3125 12.25,0 0,-36.31 -12.25,0 z m 24.06,0 0,36.3125 12.25,0 0,-36.31 -12.25,0 z"
		 fill="#729fcf" />
	<path
		 d="m 6.37,6.37 0,35.25 11.1875,0 0,-35.25 -11.18,0 z m 24.06,0 0,35.25 11.1875,0 0,-35.25 -11.18,0 z"
		 opacity="0.8"
		 fill="none"
		 stroke="url(#6)" />
	<path
		 d="m 5.84,5.84 0,22.1875 c 3.98,-1.44 8.07,-2.81 12.25,-4.15 l 0,-18.03 -12.25,0 z m 24.06,0 0,14.4062 c 4.11,-1.19 8.21,-2.35 12.25,-3.43 l 0,-10.96 -12.25,0 z"
		 opacity="0.6"
		 fill="url(#7)" />
</svg>

I don't get why this works and the other doesn't.

[csga5000]

But regardless, is a gradient like I'm wanting (linear inside a cirlce) possible and I just need to change my svg's xml, or are you saying that's not supported?

[csga5000]

So it does work if I remove the xlink:

<svg viewBox="0 0 32 32">
	<defs>
		<linearGradient y2="0" x2="0" y1="1" x1="0.5" id="linearGradient4688">
			<stop stop-color="#761f24" offset="0"/>
			<stop stop-color="#962025" stop-opacity="0.35" offset="0.65"/>
			<stop stop-color="#c1272d" stop-opacity="0" offset="1"/>
		</linearGradient>
	</defs>
	<circle fill="#c1272d" stroke="#b8cfe0" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="4" r="15.25" cy="16" cx="16"/>
	<circle fill="url(#linearGradient4688)" stroke-miterlimit="4" r="12" cx="16" cy="16"/>
</svg>

Still not super great w/ SVG's but this works.

Perhaps I just am not noticing a difference rendering the other SVG through your library that may well be manifesting.

[dnfield]

It looks like neither is working to my eyes - it's just that your second example it's less obvious because of the size of the paths.

Your first SVG could be refactored like this, and it will work fine:

<svg viewBox="0 0 32 32">
	<defs>
		<linearGradient id="linearGradient4688">
			<stop stop-color="#761f24" offset="0"/>
			<stop stop-color="#962025" stop-opacity="0.35" offset="0.65"/>
			<stop stop-color="#c1272d" stop-opacity="0" offset="1"/>
		</linearGradient>
      <linearGradient y2="0" x2="0" y1="1" x1="0.5" id="linearGradient4694">
        <stop stop-color="#761f24" offset="0"/>
        <stop stop-color="#962025" stop-opacity="0.35" offset="0.65"/>
        <stop stop-color="#c1272d" stop-opacity="0" offset="1"/>
      </linearGradient>
	</defs>
	<circle fill="#c1272d" stroke="#b8cfe0" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="4" r="15.25" cy="16" cx="16"/>
	<circle fill="url(#linearGradient4694)" stroke-miterlimit="4" r="12" cx="16" cy="16"/>
</svg>

In fact, you could remove the linearGradient id="linearGradient4688" altogether.

Your second one could also be refactored similarly.

Basically, the xlink:href attribute is saying "use the stops defined in the gradient over there for me". It's a nice way to keep the SVG a little smaller and more composable. It's not impossible to support, but it hasn't been high on my list because it's not terribly difficult to work around.

[dnfield]

Implemented in dd44ee7

Still needs:

• documentation
• decision about whether this really should be a breaking change
• clean up of paint server stuff - I don't think some of the types are used anymore

[dnfield]

I'd appreciate any feedback on whether this is really fixing the problem for all your SVGs - I added a couple tests that pass, but suspect I might be missing something for some more complicated cases.

[dnfield]

This should be working as of v0.10.1

Going to open another issue for out of order def support, which Inkscape seems to also like to do.