Combine SVG using union, intersection and difference?

[VTW]

I want to create some custom shapes that combine other shapes, like e.g. a lemon shape. I was thinking of just creating a mask that was the intersection of two circles partly overlapping. However, I have not found a way of doing this. What is the recommended way of creating a slightly more complex SVG graphic than the standard figures supported out-of-box?

[Gondwana · Accepted solution]

I generally found masks to work, but they do have some quirks. I did a fairly extensive exploration here. I think that some/all of those issues have been addressed in newer devices.

You can create compound elements (like your Union) using template symbols. Those can also be used as wrappers for other graphical components that include multiple elements (including masks).

[VTW]

The weird behavior you are mentioning on your GitHub is exactly what I am experiencing too - the black mask showing outside the figure I'm trying to mask. I'm working on a Versa 3, so it doesn't really help me if the issues have been fixed on newer models. I guess I'll create the shapes as PNG for now.