Svg masking support

In my quest to use SVGs, after adding clip-path and dashes support in our JUCE branch (https://github.com/soundradix/JUCE), I found the next reason for which the SVGs from our designer don't render right - masks.

Note that masks (at least those from our SVGs, created in Adobe Illustrator) aren't supported in Safari too (though they are supported in Chrome and Firefox).

My question is: How would one go for supporting masks?

I see that Graphics has reduceClipRegion to an Image. We could add to DrawableShape a "ScopedPointer<Drawable> mask", render it to a temporary Image on DrawableShape::paint and then use the image reduceClipRegion method. Does this sound like a reasonable way to go?

Cheers, Yair

Yes, I think you'd need to create an intermediate image and clip to that. It'd be a pretty inefficient operation, but that's essentially the only way to do it.

Yep, it would be pretty inefficient, but I suppose that's probably what browsers do as well, though perhaps on GPU?

Yes, on a GPU it could work pretty well.

For SVGs which don’t render properly in JUCE - I made a tool called svg-simplify which simplifies SVG files to use simpler features while retaining their content, so that then they can render properly with JUCE.

It doesn’t yet support everything - currently only some combinations of mask gradients with some stroke/fill color/gradients, but if your SVGs can be simplified and this tool doesn’t work for them I’m willing to improve it to support more cases.

8 Likes