https://kotlinlang.org logo
Title
d

darkmoon_uk

06/16/2021, 12:40 PM
I'm playing with SVG loading via
svgResource
and finding that it plainly does not resize as expected. Currently only trying on Retina MacBook Pro so wondering if screen DPI is playing a part? Anyone tried this? I set a background colour via Modifier to see the layout of the Image element and that is correct; but the SVG itself never scales within, regardless of
ContentScale
passed in 🤷
i

Igor Demin

06/16/2021, 12:45 PM
Screen DPI should affect the size of SVG. What Compose version do you use? After 0.4.0 we changed SVG resizing logic, you can switch to the latest 0.5.0-buildXXX
d

darkmoon_uk

06/16/2021, 12:48 PM
I'm using
0.5.0-build225
i

Igor Demin

06/16/2021, 12:50 PM
Can you show the code where you load SVG? You want SVG to fit the all available space in the Box?
d

darkmoon_uk

06/16/2021, 12:51 PM
So as a sanity check I'm down to this:
Image(
            painter = svgResource("MyImage.svg"),
            contentDescription = "",
            modifier = Modifier
                .requiredWidth(442.dp).requiredHeight(64.dp).background(Color.Red),
            contentScale = ContentScale.FillBounds,
            alignment = Alignment.Center
        )
Even without showing you the image, I would expect to see no Red
Because FillBounds should cover all the background.
(White block is part of SVG image)
I'm aware that to scale to a precise width or height myself, I'll need to manage some aspect ratio calculations. So I was doing that originally; and suspected I had a problem in my calculations. In the end, I did this more hard-coded PoC and it seems the
ContentScale
is having no effect.
Now I'll try 0.4.0 🙂
i

Igor Demin

06/16/2021, 12:58 PM
I tried this code with this SVG. And it looks ok. Can you show the SVG? Maybe internally it uses some other units.
d

darkmoon_uk

06/16/2021, 12:59 PM
I'll DM you the SVG file
🆗 1
i

Igor Demin

06/16/2021, 1:01 PM
I'm aware that to scale to a precise width or height myself
to preserve aspect ratio, you can use the default
ContentScale.Fit
d

darkmoon_uk

06/16/2021, 1:03 PM
Understand that will maintain the aspect ratio, but not guarantee overall size. To get the image in the original aspect ratio, on screen, for a given, fixed height or width, I must calculate the other dimension.
Changing some other settings like 'Relative Coordinates' had no effect, but the DPI did.
Somehow it looks like the way this SVG file is expressing its coordinates, gets overlooked by the Compose scaling code(?)
i

Igor Demin

06/16/2021, 1:23 PM
Adding
viewBox="0 0 615 89
to the root fixes the issue. To my shame, we didn't fix this issue. Reopened it. Trying to fix this now.
d

darkmoon_uk

06/16/2021, 1:31 PM
Alright; glad to have highlighted an issue and thanks to you for being so responsive 👍
i

Igor Demin

06/16/2021, 1:48 PM
Ok, fixed it. Will be fixed in the next build, after review. Thanks for letting us now about this bug 🙂
:jetpack-compose: 1
🎉 2
d

darkmoon_uk

06/16/2021, 1:51 PM
Thank you @Igor Demin 🙏 Since its 23:50 in my time-zone; you have just saved me the torture of lying in bed, wondering what I did wrong in my code 😆.
😄 3