SVG renders different (without masks)

[animanathome]

Describe the bug
Rendered output looks different from browser (chrome - v96/firefox - v95/safari - v15.1).

Source SVG: https://storage.cloud.google.com/lumen5-prod-lottie/test.svg

SVG Rendered using browser (GOOD)

SVG Rendered using skia-python (BAD)

The SVG uses a combination of clipPath, mask, g, rect, path and filter tags.

To Reproduce
Run the following code:

import skia

stream = skia.FILEStream.MakeFromFile('./test.svg')
dom = skia.SVGDOM.MakeFromStream(stream)

dom.setContainerSize(skia.Size(128, 128))
surface = skia.Surface(512, 512)
with surface as canvas:
    canvas.scale(10, 10)
    dom.render(canvas)

image = surface.makeImageSnapshot()
image.save('/output.png', skia.kPNG)

With the docker container running specified below, I use xvfb-run -a -n 0 -s "-ac -screen 0 1920x1080x24" python src/render_skia_svg.py. This should generate the BAD image.

Expected behaviour
We expect skia-python to generate the GOOD image. The white shape is actually a mask, displaying the background color. In this case, white.

Desktop (please complete the following information):

• OS: docker image python:3.7.12-buster
• Python: 3.7.12
• skia-python version: 87.3

The is my docker build file

FROM python:3.7.12-buster

RUN apt-get update && apt-get upgrade -y && \
    apt-get install -y \
      xvfb \
      libfontconfig1 \
      libgl1-mesa-glx \
      libgl1-mesa-dri

RUN pip install skia-python==87.3

@kyamagu As far as I understand, skia is being used within chrome and firefox so I would expect this SVG to render the same result in skia-python then it does in the browser. Thank you for looking at this.

[animanathome]

Here is a link to a simpler example: https://storage.googleapis.com/lumen5-prod-lottie/square.svg. This clearly illustrates that masks don't render properly.

SVG Rendered using browser (GOOD)

SVG Rendered using skia-python (BAD)

[animanathome]

Another update on this issue. https://www.npmjs.com/package/canvaskit-wasm seems to work, rendering both sources as expected. This should indicate that this isn't a skia issue per se.

[kyamagu]

@animanathome The difference is likely due to the version issue. The current skia-python depends on m87 branch of skia, but the latest codebase should include a lot of enhancements to the SVGDOM API. The m87 branch includes only experimental APIs for SVG. Plus, browsers usually have their own implementation on DOM handling.

Currently I have no capacity on going over the version update, unfortunately.

[animanathome]

Thank you for getting back to me so quickly @kyamagu. I was assuming as much. Since canvaskit-wasm seems to address all of our requirements, we'll probably move forward with that package. Keep up the good work!