SVG animation (features?)

[pgilfernandez]

I've testing the animated SVG format, it can do a lot of things, great for Friction!

Anyway, I would like to know what this format features has implemented and which not yet.
For instance I found out that it can't export mask shapes using DstIn... is there any working way to export masks to animated SVG?

Thanks!

[rodlie]

Anyway, I would like to know what this format features has implemented and which not yet.

The exporter should warn if you use features not supported.

I don't have a list of features supported, will need to check. In general all the basic stuff works.

For instance I found out that it can't export mask shapes using DstIn... is there any working way to export masks to animated SVG?

Masking was introduced in 0.9.6.1 (backported from v1), it works fine, used it at work several times today.

https://friction.graphics/releases/friction-0961.html#svg-changes

I could probably make a tutorial.

[pgilfernandez]

Here you have a brief study of the "svg follow path rotation" problem... I hope it helps you =)

https://github.com/orgs/friction2d/discussions/326

[pgilfernandez]

Masking was introduced in 0.9.6.1 (backported from v1), it works fine, used it at work several times today.

I was using masking today and found out that if you demote the layer to group it not only doesn't export the mask but it doesn't behave the same with layers below and out of the group/layer you "have masked".

But, well, apart from that I was thinking about the "obligation" to use white color... I was testing other colors and it seems what it translates to opacity is the "saturated color", that is, the grey value your color has. But if you use the alpha channel it lowers too the opacity...
What I mean and would like to suggest is if it would be a good idea to override RGB color with white at SVG export time so that any color you pick it behaves as normal Friction does and let the mask opacity be handled just by the alpha color channel, once again as normal Friction does.

Summing it up, why don't override any color you have set to a DstIn layer when exporting to SVG turning it into white, that is, the color you need for the mask to work?
It would help users to match normal Friction behavior

[rodlie]

I was using masking today and found out that if you demote the layer to group it not only doesn't export the mask but it doesn't behave the same with layers below and out of the group/layer you "have masked".

Masking is a compositing operation and is reserved for layers.

why don't override any color you have set to a DstIn layer when exporting to SVG turning it into white, that is, the color you need for the mask to work?

Not sure about that one, first we can't really assume everything in a DstIn layer should be white, should we change all fill to white? is that also true for stroke? we could also have several groups/layers (with misc objects) under a main DstIn layer.

[pgilfernandez]

Masking is a compositing operation and is reserved for layers.

Do you mean also for Friction or are you talking about SVG export?

Not sure about that one, first we can't really assume everything in a DstIn layer should be white, should we change all fill to white? is that also true for stroke? we could also have several groups/layers (with misc objects) under a main DstIn layer.

Umm, let me test all possibilities in depth tomorrow and I'll let you know.

[pgilfernandez]

Short answer: I found so many different behaviors while testing and mixing the following parameters:

• color channels (RGB)
• alpha one
• fill
• stroke
• groups
• layers
• group/layer ordering

... so, I'll need more time to explore and document them all to have an overall view of what's happening but the truth to be told is that I find different behaviors between how normal Friction renders and how SVG export does so it's better to wait a little bit more and see "my results"...

[Dinesh0N]

Inkscape animation plugin for reference:
https://imvenx.github.io/inkaweb/#/

[pgilfernandez]

Inkscape animation plugin for reference: https://imvenx.github.io/inkaweb/#/

Thanks!
I was using https://lottiefiles.com/supported-features as it is a simple feature table and a way to side by side compare Lottie with animated SVGs