Export of layer effects (in SVG?) bug

[DarkClown]

It seems that exporting an object in SVG Format with native colour is not the same than exporting the same object in SVG with an overlay colour as a layer effect. At least browsers (Opera/Firefox) don't recognise the additional overlay colour from the layer effects - they still think the object has the native (original) colour. Nasty bug - took me a long time to figure out it's not a wordpress thumbnail handling issue but an original Affinity Designer file bug! Some programs display the files properly - so there must be some detail in the object description in the file format that is written different by AD

Cheers, Timo.

[walt.farrell]

9 hours ago, DarkClown said:

Some programs display the files properly - so there must be some detail in the object description in the file format that is written different by AD

If some programs display it correctly, perhaps the bug is in the programs that don't, rather than in AD?

In any case, a quick test just worked for me in Firefox, so how about a sample .afdesign file and the exported SVG to demonstrate the problem? Also, perhaps some details about the Export settings would be useful.

[DarkClown]

2 hours ago, walt.farrell said:

If some programs display it correctly, perhaps the bug is in the programs that don't, rather than in AD?

In any case, a quick test just worked for me in Firefox, so how about a sample .afdesign file and the exported SVG to demonstrate the problem? Also, perhaps some details about the Export settings would be useful.

Hi Walt,

It might be a combination from what my Wordpress Elementor Widget interprets from the SVG file and what AD produces. It's a fact that exporting an object with native color produces a different file than an object with a layer overlay colour. (And this is caused by AD!) - Unless overlay colours are a feature of the SVG format (what I don't think) I assume there is a bug in AD at least as well.

This is what I generated in AD:

Here are the layer settings:

 

And this is what I get to see in Wordpress:

 

(The "fork" is part of an Element I used in a different Icon Box before in wordpress)

The only thing that is different in the third box is the colour overlay information ... this shouldn't result in a difference in the export format (SVG).

Here's the original designer file:

AD Test2.afdesign

As I said - displayed properly by many other programs - but the SVG Format shouldn't make a difference between a native colour and an overlay colour.

I exported selected objects without background.

Cheers, Timo

[Jowday]

15 hours ago, DarkClown said:

It seems that exporting an object in SVG Format with native colour is not the same than exporting the same object in SVG with an overlay colour as a layer effect. At least browsers (Opera/Firefox) don't recognise the additional overlay colour from the layer effects - they still think the object has the native (original) colour. Nasty bug - took me a long time to figure out it's not a wordpress thumbnail handling issue but an original Affinity Designer file bug! Some programs display the files properly - so there must be some detail in the object description in the file format that is written different by AD

You do know that the element with an overlay FX is exported as a bitmap - is rasterized? All elements with effects will be rasterized in Affinity. Some sort of colour management difference between vector and bitmap could affect the presentation of the contents on your system. Just a wild guess.

On my computer opening the SVG in Chrome, Firefox or even Adobe Photoshop CC 2020 etc. renders the greens identically. In a heavily colour managed setup btw.

[DarkClown]

12 minutes ago, Jowday said:

You do know that the element with an overlay FX is exported as a bitmap - is rasterized? All elements with effects will be rasterized in Affinity.

Well ... I export as SVG (and that should be vector format - not bitmap) - but if SVG can contain rasterized bitmap content as well I have to admit: Nope ... that's new ... but will explain things. In that case the problem could be related to the WP Elementor Widget that is not capable of handling bitmaps in SVG vector format the right way ...
(Frankly spoken I'm a bit surprised that the overlay should come as bitmap - very unexpected when you work vector based and export in a vector format).
I wonder if Illustrator exports overlay FX as bitmap as well - or is it an Affinity specific behaviour? ...

[walt.farrell]

10 minutes ago, Jowday said:

On my computer opening the SVG in Chrome, Firefox or even Adobe Photoshop CC 2020 etc. renders the greens identically.

On my laptop, too.

It might be interesting to see the actual file that was used for WordPress, in case there's some other difference that explains the different color.

[DarkClown]

I attached the actual SVG file that displays wrong in the WP Elementor Widget in the post before. The more I dig deeper in this it seems to be a combination from what AD writes as SVG and a buggy interpretation of this SVG format from the widget.

The different colour is not the problem - the "new" green" is taken from an SVG file I used in another Icon-Box on the same page (so the green is just taken from another SVG file and could as well be any other random colour). I will have to deal with the Elementor guys as well on the topic.

The Affinity topic from my perspective is: why is the Exported SVG different, when an object uses an layered FX than with the native colour?

[walt.farrell]

12 minutes ago, DarkClown said:

I attached the actual SVG file that displays wrong in the WP Elementor Widget in the post before.

If you did, I don't see it. Sorry if I've missed it. You had a screenshot from WordPress, and an .afdesign file, but I did not see an SVG file corresponding to the screenshot.

[DarkClown]

I'm sorry, Walt ... Here it comes:

AD Test4.svg

[walt.farrell]

Thanks. That's still not the one from WordPress (as it's got a rectangle rather than the fork/arc). And still looks good in browsers, but it's nice to confirm that

[DarkClown]

Looks like i'm dealing with extended complexity...
The problem only occurs from the second SVG Icon on I use in the WP Icon Box. Someone from the Elementor forum gave a good hint for the cause of the problem:

 

Quote

Check your CSS classes and Id's that they are not overwriting each other, for example in the svg you provided it has a use element
<use xlink:href="#_Image1" x="346.549" y="50.679" width="166.08px" height="166.08px" transform="matrix(0.994491,0,0,0.994491,0,0)"/>

which in turn uses <image id="_Image1" width="167px" height="167px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACnCAYAAAB0FkzsAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB1UlEQVR4nO3SIQEAIADAMMDTPy4kQHOxJbj4HGefAUHrdwC8mJMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5yTInWeYky5xkmZMsc5JlTrLMSZY5ybo7tgNZJ/FguAAAAABJRU5ErkJggg=="/> (green by the way)

So if you have another SVG in that same page which has a <use> element that calls the same ID (_Image1) it will use this same image, and if you happen to have another <image> element again with the same id (_Image1) it will overwrite all calls of that ID.

The way I generated the SVG was basically using the same original picture and only changing the overlay FX colour to generate a different coloured SVG - So if the following derivatives of SVG icons uses the same "_Image1" coding this might lead to overwritten content ... but I don't fully get the cause of the problem.

[DarkClown]

And, as you can see from my description - the file is the same ... but for the 3rd square (the one with the fx-overlay) WP simply uses a different SVG Icon with the same ID to display it ... (so the fork has never been part of the original file

[walt.farrell]

59 minutes ago, DarkClown said:

And, as you can see from my description - the file is the same ... but for the 3rd square (the one with the fx-overlay) WP simply uses a different SVG Icon with the same ID to display it ... (so the fork has never been part of the original file

So, perhaps you should edit the SVG file that AD produced using your favorite text editor, and change both those occurrences of image1 to something unique.

[DarkClown]

So you are suggesting I should manually edit the source code of every icon SVG file I produced with AD to get it working in the field?

That's a "creative" workaround ... 

[walt.farrell]

19 minutes ago, DarkClown said:

So you are suggesting I should manually edit the source code of every icon SVG file I produced with AD to get it working in the field?

That's a "creative" workaround ... 

Well, alternatively, you could edit the icon you're using on WordPress that conflicts with it.

SVG files are text, and if you mix and match different SVG files on the same website it seems (based on your experience) that you could have conflicts. 

Unless each application creating the files generates guaranteed unique names for everything, such conflicts will be possible and will have to be handled manually.

[walt.farrell]

24 minutes ago, DarkClown said:

 

Or, perhaps you just need to change your object names in AD do they don't conflict with your other WordPress files.

[DarkClown]

My current workaround: getting rid of the overlay and changing the native object colour. Seems to work out.

[Sean P]

I'm going to move this to questions as this is not a bug in the app, but a side effect of the object having to be rasterised (because the Filter Effects usage) and the property name clashing with another SVG on the Wordpress site containing content that has been rasterised.

[Jowday]

On 1/19/2020 at 7:26 PM, DarkClown said:

I wonder if Illustrator exports overlay FX as bitmap as well - or is it an Affinity specific behaviour? ...

Illustrator generally is good at preserving as much as possible as vectors. In this case it wouldn’t rasterize. Allthough you would achive the same effect from the appearance panel using a fill on a group fx. This is not possible in Affinity.

If you add an effect to a group (fx glow) of elements in Affinity the entire group is rasterized into one image. Illustrator only rasterizes the glow and all elements are preserved as vector when exporting.

There is even a vector free perspective option in Illustrator in the FX panel.