Anyone know how best to load an SVG in Compose for Web (Canvas)? Looking to add it to this <canvas o...

# compose-web

[darkmoon_uk]

Anyone know how best to load an SVG in Compose for Web (Canvas)?
Looking to add it to this canvas of capabilities

[Dima Avdeev]

For now, it's not possible for experimental "Canvas" mode.
But, we plan to support Android-like xml vector graphics.

[darkmoon_uk]

Sorry @Dima Avdeev, never tell a developer it's not possible 😅

lol, I couldn't resist poking around and found we can still do this in Canvas mode:

val svgDom = remember(bytes) { SVGDOM(data = Data.makeFromBytes(bytes)) }
Canvas(modifier = modifier) {
    svgDom.setContainerSize(size.width,size.height)
    drawIntoCanvas { canvas ->
        svgDom.render(canvas.nativeCanvas)
    }
}

Outcomes:
• SVG loaded 🎉 (The bottom-left Kotlin logo)
• Code
Actually, I did find it a bit hit-and-miss which SVG's can load and not - some show as black mask only, at a quick glance seems to be where SVG style classes(?) are involved?

[Dima Avdeev]

That's amazing!