Can Compose Multiplatform already render SVG files...

# compose-web

[Stefan Oltmann]

Can Compose Multiplatform already render SVG files or do I need a platform specific approach for that?
How will I do it on Kotlin/WASM?

[Stefan Oltmann]

Looks like io.coil-kt.coil3:coil-svg will solve that.

[Stefan Oltmann]

It's just unclear how.

https://github.com/coil-kt/coil/discussions/2527

[Daniel Weidensdörfer]

Shouldn't coil handle the rendering?

[Stefan Oltmann]

I guess I use it wrong, because it renders nothing.

[Daniel Weidensdörfer]

Coil is for loading images from web, looking at the example from the readme. So passing svg as string is not supposed to work I guess. Passing a link to svg might work though.

[Daniel Weidensdörfer]

And if you want to display svg from resources. I convert it to android XML vector using chat gpt and display it using the resources api.

[Stefan Oltmann]

There is no-longer-compiling Coil2 code around that suggests that showing an SVG from a string should be possible.

> And if you want to display svg from resources. I convert it to android XML vector using chat gpt and display it using the resources api.
In that regard I recommend the https://github.com/ComposeGears/Valkyrie plugin. 🙂

My use case is I want to display a visual representation of a game map of Oxygen Not Included at my current pet project https://stefan-oltmann.de/oni-seed-browser/

So the SVG input comes from an API.

If there is really no other way I could change the backend, so that I can get an "myimage.svg"-URL, but I would prefer not to.

[Stefan Oltmann]

This does not work, too...

So I wonder if it's working at all.

AsyncImage(
    model = "<https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/car.svg>",
    contentDescription = null
)

[Stefan Oltmann]

Okay, that does also not work:

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(PlatformContext.INSTANCE)
        .data("<https://file-examples.com/storage/fe36b23e6a66fc0679c1f86/2017/10/file_example_JPG_100kB.jpg>")
        .size(Size.ORIGINAL) // Set the target size to load the image at.
        .build()
)

Image(
    painter = painter,
    contentDescription = null
)

[Stefan Oltmann]

Coil3, an alpha, may be currently completely broken. 🤷‍♂️

[Michael Paus]

The desktop variant of Compose can render SVG and I use that all the time. It’s located in

androidx.compose.ui.res.SVGPainter

I copied that code and together with

androidx.compose.ui.graphics.vector.DrawCache

I can now render SVGs on all Skia platforms. (Tested on iOS) For Android I have a different solution.

[Stefan Oltmann]

That sounds promising. Thank you, will try that! 🙂

[Stefan Oltmann]

Thank you, @Michael Paus. This solution works! 🙂

I added a proper copyright header and added your code to my repo:
https://github.com/StefanOltmann/oni-seed-browser/blob/main/app/src/commonMain/kotlin/org/jetbrains/compose/resources/SVGPainter.kt

[Stefan Oltmann]

I'm facing the same problem here that I have with Coil3: My SVG is black.

Does anyone have an idea, why not_working.svg will display black?

not_working.svgworking.svg

[Daniel Weidensdörfer]

Is it appearing correctly in chrome?

[Daniel Weidensdörfer]

It works in slack so it should be a valid svg 😄

[Michael Paus]

Maybe you should try the original SvgPainter from Jetbrains on desktop in order to make sure the problem is not caused by my code changes.

[Stefan Oltmann]

Coil3 also renders to black... coincidence?

[Michael Paus]

Ok, then it’s probably not me 😇.

[Stefan Oltmann]

Apple Finder renders to black, too

[Stefan Oltmann]

I think something is wrong, but I have no experience there

[Michael Paus]

The mystery of web standards.

[Daniel Weidensdörfer]

I think compose doesn't handle groups that well, from what I remember.

[Stefan Oltmann]

One day I'll be able to look at SVG code and tell you spot on what's wrong, because I'm such an expert.

That day is not today.

[Stefan Oltmann]

And unlikely tommorow. 😆

[Stefan Oltmann]

ChatGPT gave an idea: Remove the alpha channel from the color definitions. That makes it visible in Apple Finder.

[Stefan Oltmann]

Only saving it with Affinity Designer makes it readable for Compose again. 🙄

[Stefan Oltmann]

So... I guess my next question is if there is an Kotlin Multiplatform SVG cleaner/optimizer... 😄

[Stefan Oltmann]

Maybe not that easy. Even Java has limited options.
Guess I need to try if Batik can fix the problems and if so set it up as a service.

[Daniel Weidensdörfer]

Whats the difference between the working and non working svg?

[Stefan Oltmann]

Tell me.

[Arjan van Wieringen]

You can use SVGO, which is a web based cleaner and optimizer. Not a permanent solution. But at least you can clean it

[Stefan Oltmann]

I want something reliable that always works.

[Arjan van Wieringen]

The you need to port it. Or don’t work with SVGs if you don’t understand them

[Arjan van Wieringen]

I used batik a lot previously as a service. Works pretty well. Slow though

[Arjan van Wieringen]

You can use svgo for this one svg and see if it works. There is a web interface for it. Then you see the difference between working and not working

[Stefan Oltmann]

Or don’t work with SVGs if you don’t understand them

Not the tone I expect here.

You are not helpful at all.

[Arjan van Wieringen]

But I am proposing a check for you to do. You immediately dismiss it as something that is not permanent

[Arjan van Wieringen]

People ask you what the differences are beteeen the working and not working one and you say: “you tell me”.

[Arjan van Wieringen]

Is it strange to expect a little more?

[Arjan van Wieringen]

Have you tried SVGO by copying and pasting it?

[Arjan van Wieringen]

And saying I am not “helpful at all” is also not a tone I’d expect.

[Arjan van Wieringen]

The not_working one is showing correctly in my Finder by the way

[Arjan van Wieringen]

My guesses are:
• group tags are not supported
• style tags are not supported, that one I have seen more.
• the style tag is weirdly formatted CSS, although valid. But maybe some parser breaks there.
Sadly the SVG standard is terribly implemented across targets.

[Arjan van Wieringen]

After some digging around, Skia doesn't support CSS Styles

[Arjan van Wieringen]

So there's your issue

[Stefan Oltmann]

SKIA does not support external CSS styles, inlined they work. That's the issue.

[Stefan Oltmann]

Have you tried SVGO by copying and pasting it?

What are you even talking about?
SVGO is a NodeJS tool in JavaScript.

I'm looking for a Kotlin Multiplatform SVG cleaner/optimizer that also works on JVM.

[Stefan Oltmann]

You immediately dismiss it as something that is not permanent

Because I'm obviously looking for a permanent solution.

[Stefan Oltmann]

Thank you for the hint to https://svgo.dev

If there doesn't seem to be what I'm looking for running an instance of that for the backend seems to be the next best thing I can do.

[Stefan Oltmann]

It that's a good working tool porting that to Kotlin Multiplatform and publish that as a lib sounds like another interesting side project. 🤔 You might be on to something. 👀

[Michael Paus]

Maybe this evaluation of tools is helpful too: https://gist.github.com/douglasmiranda/be203d129c55ad7793ccf06059ee1dd4

[Stefan Oltmann]

SkiaSharp has the same issue by the way. So it's really that SKIA doesn't fully support SVG.
https://github.com/mono/SkiaSharp.Extended/issues/48#issuecomment-531603910

[Stefan Oltmann]

Okay, wow, the winner of that list "svgcleaner" is already archived and nobody took over.

[Stefan Oltmann]

Looks like one should base a Kotlin Multiplatform cleaner upon svgcleaner if I look at the compatibility

[Stefan Oltmann]

And saying I am not “helpful at all” is also not a tone I’d expect.

I take that back. You have been helpful. 🙏

[Arjan van Wieringen]

No worries; Thanks we cleared that up :-)

[Arjan van Wieringen]

SVGO has a webui btw. That is what I meant also.

[Arjan van Wieringen]

But it doesn’t solve the issue

[Stefan Oltmann]

I now will see if I can call it using System.exec() on the server.
If it has a REST API I could launch another docker container and could make a call from my main service

[Stefan Oltmann]

Found another option to optimize:
https://github.com/Menecats/polybool-java

Downside is that I need to reconstruct the SVG by hand, but that will take care of the duplicated paths.

[Stefan Oltmann]

Small library. If it works I consider porting it to Kotlin Multiplatform

[Arjan van Wieringen]

https://github.com/RazrFalcon/resvg

Rust based… but hey

As a CLI, or C extension. Or maybe you’re able to wasmify it.

Edit: it is possible to compile as wasm target

It uses a subset of Skia… which is ironic

[Michael Paus]

I’d be interested in that polybool-kotlin version too 😉😇.

[Stefan Oltmann]

I moved away from SVG.

https://github.com/StefanOltmann/oni-seed-browser/blob/1b94dadc5d6305c1bc831a87847fd1bd823c1578/app/src/commonMain/kotlin/ui/MapView.kt#L69

I transfer only the paths and draw that directly on an Canvas.
That saves storage.

[Yahor]

@Stefan Oltmann
What about download svg as bytearray and convert it to ImageVector runtime?

https://github.com/JetBrains/compose-multiplatform/blob/e1caeade8a83e9422565681749[…]monMain/kotlin/org/jetbrains/compose/resources/ImageDecoders.kt

[Stefan Oltmann]

This doesn't take a SVG bytearray. It does take a XML file you need to convert in IDEA first, I guess.

[Stefan Oltmann]

Thanks for the hint anyway, but if I would need to render SVG I would use the code Michael hinted me at.

[Stefan Oltmann]

In my specific case I found it easier to just draw the path's myself.

[Stefan Oltmann]

Of course that's only possible because I know the file will always only contain paths and not something suprising.