Has anyone successfully loaded a multicolor SVG into a Compose Desktop app? It strikes me as ridicul...

# compose-desktop

[dleuck]

Has anyone successfully loaded a multicolor SVG into a Compose Desktop app? It strikes me as ridiculous that there is no way to do this, but you can load a single color SVG. Having to create three sizes of PNG for every multicolor icon is really frustrating.

[Olivier Patry]

Either use Image (I guess you are using Icon) or give Color.Unspecified to the `Icon`'s tint

[Olivier Patry]

See (even if it's a drawable, I guess it's the same)

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1729202867919799

[dleuck]

@Olivier Patry I appreciate the effort, but neither of your suggested solutions work. Using an Image or an Icon with Color.Unspecified defaults to an all black SVG. You get the shape, but they don't load multicolor SVGs. Try it.

I've yet to see an example from any developer or AI that works. Claude.ai, who is amazingly good at answering questions like this, is also stumped.

[Olivier Patry]

can you share you SVG?

[dleuck]

Sure. Here are three examples. I appreciate you looking at it, and I'm happy to reciprocate. I created the logo.svg and the txt.svg. The folder.svg is from FlatIcon. Note that these SVGs are used on the web and other platforms with no issues.

folder.svglogo.svgtxt.svg

[Olivier Patry]

Here is what I get with these SVGs, it seems folder.svg is fine but logo.svg & txt.svg aren't

[Olivier Patry]

var bytes by remember { mutableStateOf(ByteArray(0)) }
LaunchedEffect(svgFilename) {
    bytes = Res.readBytes("files/$svgFilename")
}
val svgPainter by remember {
    derivedStateOf {
        if (bytes.isNotEmpty()) {
            bytes.decodeToSvgPainter(density)
        } else {
            null
        }
    }
}

svgPainter?.let { painter ->
    Image(painter, null, Modifier.size(48.dp))
}
svgPainter?.let { painter ->
    Icon(painter, null, Modifier.size(48.dp), tint = Color.Unspecified)
}
svgPainter?.let { painter ->
    Icon(painter, null, Modifier.size(48.dp), tint = Color.Red)
}

[Olivier Patry]

given the SVGs, I guess this is because of <style> not being supported by the SVG painter

[Olivier Patry]

Indeed, inlining CSS style rules as SVG attributes fixes the issue

[Olivier Patry]

Capture d’écran 2024-11-04 à 10.47.52.png

[Olivier Patry]

folder.svg,logo.svg,txt.svg

logo.svgtxt.svgfolder.svg

[Olivier Patry]

Note: didn't test on Android, only Compose Desktop

[Oliver.O]

@dleuck It wasn’t me. 🙃

[dleuck]

@Olivier Patry This is extremely helpful. I really appreciate you taking the time to figure this out. Thank you!

[Oliver.O]

@dleuck No, you should address @Olivier Patry, not me. 😆

[dleuck]

@Oliver.O Thank you for the correction:-)