SVGDom

[Jonas M.]

Hello Skia team,

I am currently working on a light simulation with SVG, which is rendered using Skia's SVGDOM module. I have noticed a few issues that I couldn't find clear answers to in the documentation:

1. Which SVG standard does Skia's SVGDOM target?
I found a post from a few years ago that says the target is SVG 1.1 up to and including section 15 (filter effects), with interactivity, scripting and animation explicitly excluded. Is that still correct? Is there any official, up-to-date documentation listing the supported and unsupported features?

2. Are `matrix3d(...)` / 3D CSS transformations supported?
The SVG attribute `transform` supports `matrix(a b c d e f)` for 2D affine transformations. Is there support for 3D transformations (e.g. `matrix3d(...)` or `perspective(...)`) in the SVG module, or is the transformation system strictly 2D?

3. Is additive colour mixing from an SVG string possible in Skia?
I need to combine light contributions additively. CSS `mix-blend-mode: plus-lighter` is not available without CSS support.
For example, via a non-standard extension `mode=‘plus’` or via `feComposite operator="lighter"`?

Many thanks

Kind regards,
Jonas

[William Candillon]

Hello Jonas,

The non-affine transform and the plus-lighter blend mode are both great examples of things hard to do in SVG but that are trivial with the native Skia API.
You might find it easier to work with a data format closer to the native Skia API.

The SVG module  currently only allows parsing affine transforms (as specified in SVG): https://github.com/google/skia/blob/d6bc6d17d637ccfa5bc9ae7658c9ec0a88b58f58/modules/svg/src/SkSVGAttributeParser.cpp#L607. It could easily be patched to support 3x3 matrices but that would be non-standard SVG.
This is how the plus-lighter blend mode looks in Skia: https://github.com/Shopify/react-native-skia/blob/main/packages/skia/cpp/api/CustomBlendModes.h#L29 but it is not clear to me how to achieve it with SVG image filters.
Using the native Skia API you can also create an image filter using an SKSL shader which can be useful for lighting, if you want to provide a bump map that relies on geometric information.

We try to document what is supported by the Skia SVG module at https://shopify.github.io/react-native-skia/docs/images-svg/#svg-support this can probably be refined, let me know if you have any notes there.

I hope this helps.

Kind regards,

William