search

slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
17.67k stars 611 forks source link

wasm: Wrong SVG size if the svg don't have explicit with/height #6715

Open hunger opened 3 weeks ago

hunger commented 3 weeks ago

The latch on the printerdemo looks wrong in Slintpad (1.8.0 version):

On chrome:

image

In Firefox:

image

Looks to me like the rendering of the SVG is missing/has the wrong size.

ogoffart commented 3 weeks ago

Note that this can be reproduced in slintpad, but not on the rust-compiled demo.

I believe the difference is that the rust demo uses resvg to render the SVG, while the interpreter uses a <img> tag with a source being the URL of the .svg

ogoffart commented 2 weeks ago

The home-automation's padlock icon has the same issue. The problem appear in the printer demo since commit 0fd9bf4b995ebc6fe7fb46b1f83eea67ae7a45a6 changed the svg so that it doesn't have a width and height hardcoded in the svg element.

resvg which is what we use to render svg in non-web, uses the size of the viewBox when width and height are not specified.

On the wasm interpreter, we do use an <img> element's naturalWidth / naturalHeight. https://github.com/slint-ui/slint/blob/fc01c549d3c4313ead4b7a1458277f21018cb4bb/internal/core/graphics/image/htmlimage.rs#L50 That returns 0 on firefox, and some wrong value with chromium. I wonder if there is a better way to get the size that uses the viewbox of the svg if width and height are not specified.