Failed to draw an SVG image, cairo returned CAIRO_STATUS_INVALID_MATRIX

[bolatuly]

As far as I know currently, inline SVG is not supported #75, and to use inline SVG within WeasyPrint, in the meantime as a workaround we use data: URLs. Steps we do:

1. Find all SVG elements on the page
2. Convert them to base64 and set them as background.
3. Remove all child nodes from the SVG root element

Everything has been working just fine before I tried to set width and height for the root SVG element.
If you set width and height attributes it breaks pdf rendering with the following exception:
Failed to draw an SVG image at None: cairo returned CAIRO_STATUS_INVALID_MATRIX: b'invalid matrix (not invertible)'
But if you set width and height through CSS style pdf renders normally.

So, I made a test html page with two exactly same circles, red(height and width attributes set on element), blue(width and height set through CSS style). Produced pdf has only the blue one.

<div style="display: inline-flex;">
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    style='display: block; background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICAgIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiBmaWxsPSJyZWQiLz4KICAgPC9zdmc+) no-repeat; background-size: contain;'></svg>
  <svg
    style="width: 200px; height: 200px;display: block; background: url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0id2lkdGg6IDIwMHB4OyBoZWlnaHQ6IDIwMHB4OyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iYmx1ZSIvPgogIDwvc3ZnPg==) no-repeat; background-size: contain;"
    xmlns="http://www.w3.org/2000/svg"></svg>
</div>

weasyprint version: v52

[liZe]

Hello!

Thanks a lot for this bug report.

There’s definitely a bug in WeasyPrint, but your example is a little bit weird. I’ll try to explain what’s going on.

WeasyPrint doesn’t support inline SVG (see #75) and your svg tags are actually seen as unknown tags. They’re common boxes, just as if they were spans.

The second one has width and height set in CSS, so the block with the background is displayed correctly. But the first one has no width and height set (the width and height attributes are ignored, just as they would be on HTML tags) and no child: it’s size is thus 0px × 0px. The error happens because WeasyPrint tries to draw an SVG with no size.

Without the error, the image wouldn’t be drawn, and you’d get the same rendering. You can replace your svg tags by spans and render them on a browser, you’ll get what WeasyPrint gives: a blue circle with no red circle.

So, we’ll fix the error but it won’t change the rendering. Fixing #75 would draw the red circle, because the svg would be seen as what it really is and thus take care of the width and height properties.