Jump to content
Delineated

SVG Gradient Bug

Recommended Posts

I have an SVG which contains a gradient with 2 stops (darker blue to lighter blue) that I created with Affinity Designer that I later optimised with SVGO for smaller size for web use.

 

However, after re-opening the optimised SVG in Affinity Designer, the gradient doesn't show - the entire curve appears as filled with only the first colour stop. However, when clicking on the curve, the fill settings show the correct gradient with both stops. The gradient in the optimised SVG shows up fine in all web browsers and a few other graphics editors.

 

Attached is the file.

 

Thanks

mountain.svg

Share this post


Link to post
Share on other sites

Hi Delineated

 

There's obviously something in the optimisation we don't like, but it is odd that the gradient is shown in the fill dialog but not on the object so I shall get this passed over to the development team

 

Cheers


Serif Europe Ltd - Check the latest news at www.affinity.serif.com

Share this post


Link to post
Share on other sites

This is a problem with the default values, for example, if you explicitly specify gradientUnits="objectBoundingBox" everything works correctly, but if this attribute is not specified, then the coordinates of the gradient points are set incorrectly.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">

<defs>

	<linearGradient id="GOOD" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
		<stop offset="0" style="stop-color:#000"/>
		<stop offset="1" style="stop-color:#FFF"/>
	</linearGradient>
	
	<linearGradient id="BAD" x1="0" y1="0" x2="1" y2="1">
		<stop offset="0" style="stop-color:#000"/>
		<stop offset="1" style="stop-color:#FFF"/>
	</linearGradient>

</defs>

<rect fill="url(#GOOD)" x="10" y="10" width="100" height="100"/>
<rect fill="url(#BAD)" x="120" y="10" width="100" height="100"/>

</svg>

 

Quote

If attribute ‘gradientUnits’ is not specified, then the effect is as if a value of 'objectBoundingBox' were specified.

 

The exact same problem with attributes x1, y1, x2 and y2 if they are not specified.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.