SVG DPI scaling issue with tiny-skia

[njust]

Is your issue REALLY a bug?

• My issue is indeed a bug!
• I am not crazy! I will not fill out this form just to ask a question or request a feature. Pinky promise.

Is there an existing issue for this?

• I have searched the existing issues.

Is this issue related to iced?

• My hardware is compatible and my graphics drivers are up-to-date.

What happened?

When using an SVG on macOS with tiny-skia the layout is not correct:

pub const LOGO: &'static [u8] = include_bytes!("../res/circle.svg");

pub fn logo() -> Svg<'static> {
    svg(svg::Handle::from_memory(LOGO))
}

pub fn banner<'a, T: 'static>(title: &'static str) -> Element<'a, T> {
    let header_content = row![
        container(logo().height(64).width(64)).padding(Padding {
            right: 20.,
            ..Default::default()
        }),
        column![text("Header").size(24), text(title).size(20)]
    ];

    container(header_content)
        .padding(12)
        .width(Fill)
        .style(|_| container::Style {
            background: Some(Background::Color(Color::from_rgb8(246, 247, 250))),
            ..Default::default()
        })
        .into()
}

It works fine using wgpu. I created a minimal repro for the issue here:
https://github.com/njust/iced-svg-issue.git

The issue exists on iced 0.13.1 and the current master (beddf49).

What is the expected behavior?

No layout issues. On Linux and Windows it's rendered as expected:

Linux

Windows

Version

crates.io release

Operating System

macOS

Do you have any log output?

[njust]

I recognized, that this issue exists on Linux and Windows as well, if you change the DPI scaling to something above 100%. E.g on Windows with 150%:

Screen.Recording.2025-03-07.at.18.58.10.mov

[flakes]

It doesn't just affect SVG, but also other renderings that use transformations, even simple translations like this are ignored by tiny-skia:

let bounds_translation = Vector::new(
    (bounds.x + (viewport.width - width_float) * 0.5).max(bounds.x), // center horizontally
    bounds.y + y_offset,
);

renderer.with_translation(bounds_translation, |renderer| {
     // ...
});

[T-256]

I'm unsure but there is fix for shadow rendering issue at #2715, perhaps similar approach could be made to fix bounds rendering with tiny-skia.

[semiversus]

Had the same problem in my application and wrote pull request #2954 fixing this issue. @T-256 : The problem with the shadow rendering is unrelated - the shadow is drawn beyond the bounding box, so redraw is not working correctly.

[andersondanilo]

i had this same problem with both canvas and svg