Login/Register
How to use .svg file in Jetpack Compose for Desktop?
Asked Answered
Solved kotlinandroid-jetpack-composecompose-desktop
M

2

12

I am trying to use a .svg (vector file) to show an image but I am stuck and not able to do it. Is there any way I can use it, I tried to use it like this

Image(imageFromResource("svg_file_name.svg"),contentDescription="")

But it throws an error :

Exception in thread "AWT-EventQueue-0" java.lang.IllegalArgumentException: Failed to Image::makeFromEncoded
    at org.jetbrains.skija.Image.makeFromEncoded(Image.java:130)
    at androidx.compose.ui.graphics.DesktopImageAsset_desktopKt.imageFromResource(DesktopImageAsset.desktop.kt:77)
    at ComposableSingletons$MainKt$lambda-1$1.invoke(main.kt:103)
    at ComposableSingletons$MainKt$lambda-1$1.invoke(main.kt:98)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.material.SurfaceKt$Surface$6.invoke(Surface.kt:267)
    at androidx.compose.material.SurfaceKt$Surface$6.invoke(Surface.kt:254)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.material.SurfaceKt.Surface-F-jzlyU(Surface.kt:251)
    at androidx.compose.material.SurfaceKt.Surface-F-jzlyU(Surface.kt:110)
    at androidx.compose.material.CardKt.Card-F-jzlyU(Card.kt:66)
    at MainKt.ShowCanvasIsEmpty(main.kt:93)
    at MainKt.DisplayMainUI(main.kt:78)
    at MainKt$main$1$1.invoke(main.kt:60)
    at MainKt$main$1$1.invoke(main.kt:55)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.material.TextKt.ProvideTextStyle(Text.kt:252)
    at androidx.compose.material.MaterialThemeKt$MaterialTheme$1.invoke(MaterialTheme.kt:81)
    at androidx.compose.material.MaterialThemeKt$MaterialTheme$1.invoke(MaterialTheme.kt:80)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.material.MaterialThemeKt.MaterialTheme(MaterialTheme.kt:72)
    at MainKt$main$1.invoke(main.kt:55)
    at MainKt$main$1.invoke(main.kt:53)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.desktop.AppWindow_desktopKt$Window$1$1.invoke(AppWindow.desktop.kt:97)
    at androidx.compose.desktop.AppWindow_desktopKt$Window$1$1.invoke(AppWindow.desktop.kt:96)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.desktop.AppWindow$show$1.invoke(AppWindow.desktop.kt:446)
    at androidx.compose.desktop.AppWindow$show$1.invoke(AppWindow.desktop.kt:444)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.desktop.AppWindow$onCreate$1.invoke(AppWindow.desktop.kt:420)
    at androidx.compose.desktop.AppWindow$onCreate$1.invoke(AppWindow.desktop.kt:419)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.desktop.ComposeWindow$setContent$1$1.invoke(ComposeWindow.desktop.kt:95)
    at androidx.compose.desktop.ComposeWindow$setContent$1$1.invoke(ComposeWindow.desktop.kt:94)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.desktop.ComposeWindow$setContent$1.invoke(ComposeWindow.desktop.kt:91)
    at androidx.compose.desktop.ComposeWindow$setContent$1.invoke(ComposeWindow.desktop.kt:90)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:148)
    at androidx.compose.ui.platform.Wrapper_desktopKt$ProvideDesktopCompositionsLocals$1.invoke(Wrapper.desktop.kt:51)
    at androidx.compose.ui.platform.Wrapper_desktopKt$ProvideDesktopCompositionsLocals$1.invoke(Wrapper.desktop.kt:50)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215)
    at androidx.compose.ui.platform.Wrapper_desktopKt.ProvideDesktopCompositionsLocals(Wrapper.desktop.kt:48)
    at androidx.compose.ui.platform.Wrapper_desktopKt.access$ProvideDesktopCompositionsLocals(Wrapper.desktop.kt:1)
    at androidx.compose.ui.platform.Wrapper_desktopKt$setContent$1.invoke(Wrapper.desktop.kt:40)
    at androidx.compose.ui.platform.Wrapper_desktopKt$setContent$1.invoke(Wrapper.desktop.kt:39)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
    at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
    at androidx.compose.runtime.ComposerKt.invokeComposable(Composer.kt:3324)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2575)
    at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2571)
    at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(SnapshotState.kt:523)
    at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:2564)
    at androidx.compose.runtime.ComposerImpl.composeContent$runtime(Composer.kt:2515)
    at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:476)
    at androidx.compose.runtime.Recomposer.composeInitial$runtime(Recomposer.kt:727)
    at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:432)
    at androidx.compose.ui.platform.Wrapper_desktopKt.setContent(Wrapper.desktop.kt:39)
    at androidx.compose.desktop.ComposeLayer.initOwner(ComposeLayer.desktop.kt:268)
    at androidx.compose.desktop.ComposeLayer.access$initOwner(ComposeLayer.desktop.kt:49)
    at androidx.compose.desktop.ComposeLayer$Wrapped.init(ComposeLayer.desktop.kt:87)
    at org.jetbrains.skiko.SkiaLayer.checkInit(SkiaLayer.kt:69)
    at org.jetbrains.skiko.SkiaLayer.access$checkInit(SkiaLayer.kt:23)
    at org.jetbrains.skiko.SkiaLayer$2.hierarchyChanged(SkiaLayer.kt:57)
    at java.desktop/java.awt.Component.processHierarchyEvent(Component.java:6819)
    at java.desktop/java.awt.Component.processEvent(Component.java:6438)
    at java.desktop/java.awt.Component.dispatchEventImpl(Component.java:5027)
    at java.desktop/java.awt.Component.dispatchEvent(Component.java:4859)
    at java.desktop/java.awt.Component.addNotify(Component.java:7123)
    at java.desktop/java.awt.Canvas.addNotify(Canvas.java:104)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/javax.swing.JComponent.addNotify(JComponent.java:4791)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/javax.swing.JComponent.addNotify(JComponent.java:4791)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/javax.swing.JComponent.addNotify(JComponent.java:4791)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/javax.swing.JComponent.addNotify(JComponent.java:4791)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/javax.swing.JComponent.addNotify(JComponent.java:4791)
    at java.desktop/javax.swing.JRootPane.addNotify(JRootPane.java:733)
    at java.desktop/java.awt.Container.addNotify(Container.java:2800)
    at java.desktop/java.awt.Window.addNotify(Window.java:787)
    at java.desktop/java.awt.Frame.addNotify(Frame.java:490)
    at java.desktop/java.awt.Window.show(Window.java:1049)
    at java.desktop/java.awt.Component.show(Component.java:1732)
    at java.desktop/java.awt.Component.setVisible(Component.java:1679)
    at java.desktop/java.awt.Window.setVisible(Window.java:1032)
    at androidx.compose.desktop.ComposeWindow.setVisible(ComposeWindow.desktop.kt:110)
    at androidx.compose.desktop.AppWindow.show(AppWindow.desktop.kt:449)
    at androidx.compose.desktop.AppWindow.show$default(AppWindow.desktop.kt:435)
    at androidx.compose.desktop.AppWindow_desktopKt$Window$1.run(AppWindow.desktop.kt:96)
    at java.desktop/java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:313)
    at java.desktop/java.awt.EventQueue.dispatchEventImpl(EventQueue.java:776)
    at java.desktop/java.awt.EventQueue$4.run(EventQueue.java:727)
    at java.desktop/java.awt.EventQueue$4.run(EventQueue.java:721)
    at java.base/java.security.AccessController.doPrivileged(Native Method)
    at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:85)
    at java.desktop/java.awt.EventQueue.dispatchEvent(EventQueue.java:746)
    at java.desktop/java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:203)
    at java.desktop/java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:124)
    at java.desktop/java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:113)
    at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:109)
    at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
    at java.desktop/java.awt.EventDispatchThread.run(EventDispatchThread.java:90)
Magnusson answered 29/7, 2021 at 13:2 Comment(0)
C
12

Desktop Compose has painterResource, which supports:

To load an image from other places (file storage, database, network), use these functions inside LaunchedEffect or remember: loadSvgPainter, loadXmlImageVector, loadImageBitmap

Confident answered 29/7, 2021 at 16:21 Comment(8)
Where does it come from? I can't import it from import androidx.compose.ui.res., am I missing a dependency? I would have guessed androidx.compose.ui:ui from gradle dependencies... – Alkene
@Alkene the API was changed, now you can use painterResource. I've updated my answer – Confident
If you try to load a file outside the resources you still have to use loadSvgPainter – Illyricum
Could you use this function in the common folder? How could we import it there? – Versicolor
@Versicolor I don't have an example project with a common module, I suggest you try it yourself. But I don't think it will work, because Android painterResource expects the Int parameter, which is the resource ID generated by the Android resources plugin. The organization of Android resources is quite different from the JVM. – Confident
Side-question: Are there limitations on what SVG is supported? I have a collection of SVGs for playing cards here where the back face renders and the front faces mostly don't... the images are the same size, and IDEA and Chrome render both fine. In particular, it seems like the <use/> element might not work at all... which is unfortunately extremely common in this sort of SVG... – Rosewater
@Rosewater you can report issue with svg sample to official repository, so it will be fixed in future releases, or you'll get a workaround – Confident
github.com/JetBrains/compose-multiplatform/issues/4102 – Rosewater
O
0

If you are looking for Icon you can use ImageVector.vectorResource(id = R.drawable.res_id)

 Icon(imageVector = ImageVector.vectorResource(id = R.drawable.ic_reddit_grey),
                    contentDescription = "Reddit smol icon" )
Ocam answered 4/5, 2022 at 15:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.