Broken coordinate values on exporting linear gradient to svg

[MardyGit]

We are exporting groups as SVGs from a large document to parse for animations. In one document a particular element is made of an inner group 10 paths. One of these paths has a simple 3 stop linear gradient. The element position is translated differently in each animation. The export is mangling the gradient coordinates. They should all be x1="0" y1="0" x2="1" y2="0", but some are getting values like x1="0" y1="0" x2="1" y2="-0.0293122", x1="0" y1="0" x2="1" y2="-2.48946" etc. For the moment I'm correcting this in our parser, but I shouldn't really have to do this.

[David in Яuislip]

I can't reproduce this, can you provide a file or else part of the file that has this problem
Every time I export an svg it shows x1="0" y1="0" x2="1" y2="0" 

As an experiment I changed the y2 value in a text editor
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0.3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(381.25,-29.1667,29.1667,381.25,506.25,250)">

opened that in APhoto, exported it and got
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1625,355.035,-355.035,1625,2109.38,1041.67)">

I don't speak Transform very well but Affinity has reinstated the x1="0" y1="0" x2="1" y2="0" and modified the gradientTransform accordingly on export, it goes without saying that both files displayed the same, I used Chrome and they were identical

So I understand your mardyness

[MardyGit]

I've uploaded a version of the Affinity file, an SVG export and a screen-grab of our export settings.

It looks a little strange as it contains all of the animations 'frames'. Each group with a 'AA' prefix is a 'frame'. Our parser extracts the 'frames' in the exported SVGs and saves them to our proprietary binary vector format.

As we work only on MacOs, we can't verify this on Windows. MacOs preview, Safari and Edge show the incorrect linear gradient output. Affinity Design seems to fix this on re-import, but will re-export incorrectly. Oddly, I exported a single group and it worked fine, I didn't test every group.

This problem is with the linear gradient of the parrots wing.

EasyThrees-00.afdesign EasyThrees-00.svg

[MardyGit]

Here's screen-grabs of what we get...

A single group export where the parrot wing gradient is fine.

The full SVG export with the 'dodgy' wing gradients.

The blue and green 'dodgy' gradients move up and down and swap places in different groups - an interesting effect, but not one we want.

[David in Яuislip]

Ok, I don't have Designer and have only a vague idea what an artboard is so I opened EasyThrees-00.afdesign in Photo, ditched the ASSETTS and SKETCHPAD artboards then pulled the 16 layers out of STORY

Exporting this as an svg showed "Some areas will be rasterised" with a predicted file size of 1.29MB so I set Rasterise Nothing and ended up with the y2 error

<linearGradient id="_Linear211" x1="0" y1="0" x2="1" y2="-0.0179776" gradientUnits="userSpaceOnUse" gradientTransform="matrix(31.73,-5.47824,-4.90706,-31.8244,186.068,918.798)"><stop offset="0" style="stop-color:#999;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient>

This svg looks wrong in Chrome and Inkscape; however, opened in Photo it looks correct and the svg export this time was ok. With Rasterise set to Unsupported Properties nothing was rasterised

<linearGradient id="_Linear211" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(132.576,-20.4421,20.4421,132.576,775.283,3828.33)"><stop offset="0" style="stop-color:#999;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient>

I have no idea why the first export fails then the reimport/ export works

EasyThrees-00RasteriseNothing-Reimport.zip

[MardyGit]

I would assume Designer & Photo share the same code base, so would do similar things. I'm guessing the Affinity coders did what I have had to do and put a default coordinate set in when any of the X or Y values appear out of bounds (0.0 to 1.0). The SVG specification doesn't state any bounds for the X & Y coordinate values, only the defaults. My concern is my code may get a valid linear gradient where the X & Y values are not in the range 0.0 to 1.0.

Guess I'll have to wait for Serif to pick this up.

Thanks for your help.

[David in Яuislip]

Issues seem to be caused by applying a gradient then skewing the shape. They can be fixed by selecting the object, change to the gradient tool and double clicking on one of the rogue nodes, this will turn the parallelogram back into a line. Sometimes the lines are close together and you'll need to zoom in pretty close to see all four nodes

If the shape is skewed before applying the gradient then all is well, see the SkewTest file.
Export with Rasterise Unsupported Properties and the centre gradient will be rasterised.
Export with Rasterise Nothing and the centre gradient will show:
  <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0.0868241"
The gradients on the right are fine

I've fixed AA01 and marked the layers which have been changed, good luck with doing the rest

EasyThrees-00-STORYonly_AA01Fixed.afphoto SkewTest.afphoto

[MardyGit]

Sorry about the late reply, a birthday got in the way.

Good catch finding the cause of the bug.

I write software for living so have every sympathy with the developers of a complex code-base like Serif's. Of course I never create bugs myself, only unexpected features.

Hopefully someone will add this bug to the product backlog </hint>.