Kamel-Media / Kamel

Kotlin asynchronous media loading and caching library for Compose.
Apache License 2.0
592 stars 23 forks source link

Problem with SVG on iOS #91

Closed GimazDo closed 1 month ago

GimazDo commented 4 months ago

Hi, i have the following problem: I'm trying to draw svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect width="100%" height="100%" fill="#B68D00"/>
<text x="50%" y="50%" dy="0.36em" text-anchor="middle" pointer-events="none" fill="#ffffff" font-family="'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'" font-size="125">
T
</text>
</svg>

In android it looks:

image

But in ios:

image

How can I solve this problem? My Kamel config:

KamelConfig {
            httpFetcher(TolkiHttpClientConfiguration.client)
            imageBitmapDecoder()
            imageVectorDecoder()
            svgDecoder()
            imageBitmapCacheSize = DefaultCacheSize
            svgCacheSize = DefaultCacheSize
        }

My code:

    CompositionLocalProvider(LocalKamelConfig provides CustomKamelConfig.customKamelConfig) {
        KamelImage(
            resource = asyncPainterResource(Url(avatarUrl)) {
                requestBuilder {
                    cookie("userId", "${getVault().string("Token")}")
                    cacheControl(CacheControl.MAX_AGE)
                }
            },
            contentDescription = "avatar",
            onLoading = { progress -> CircularProgressIndicator(progress) },
            onFailure = { exception ->
                println(exception)
                RemoteImage("${avatarUrl.substringBefore("?etag")}.svg")
            },
            contentScale = ContentScale.Fit,
            modifier = modifier
        )
    }
luca992 commented 4 months ago

So I tried it out and got the same. I don't think I can fix this unfortunately.

The loadSvgPainter implementation for non-jvm targets is basically directly copied from the jvm desktop implementation here.

However, jvm desktop actually displays that svg just fine. Where as on native I'm seeing unsupported unit type: <3> thrown ( I think it's complaining about dy="0.36em") I think the issue is futher upstream with SVGDOM. You could try and isolate the issue there and report it... Or you could just try and find another way to center the T in the svg. If all else fails you could make your own svg decoder for iOS similar to how we have the BatikSvgDecoder also bundled only for jvm desktop