Skip to content

SVG DPI scaling issue with tiny-skia #2825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
4 tasks done
njust opened this issue Mar 4, 2025 · 4 comments
Open
4 tasks done

SVG DPI scaling issue with tiny-skia #2825

njust opened this issue Mar 4, 2025 · 4 comments
Labels
bug Something isn't working

Comments

@njust
Copy link

njust commented Mar 4, 2025

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()
}
Image

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

Image

Windows

Image

Version

crates.io release

Operating System

macOS

Do you have any log output?

@njust njust added the bug Something isn't working label Mar 4, 2025
@njust
Copy link
Author

njust commented Mar 7, 2025

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

Image

@njust njust changed the title Layout issue using an SVG on macOS with tiny-skia SVG DPI scaling issue with tiny-skia Mar 7, 2025
@flakes
Copy link

flakes commented Mar 13, 2025

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
Copy link
Contributor

T-256 commented Mar 13, 2025

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants