CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-vectordrawablecoil
Jeevan Rupacha
Jeevan Rupacha

Reputation: 5816

Not able to display svg format image in jetpack compose

I tried to display svg image in my project but some of the file works but throws the error.. I tried with the coil library too but it doesn't show anything. While using Image compose with painterResource throws the follwing error:-

compose code:

Image(
      painter = painterResource(id = imageId),
      contentDescription = null,
      contentScale = ContentScale.Fit
     )

Error msg:

java.lang.IllegalArgumentException: Unknown command for: R
        at androidx.compose.ui.graphics.vector.PathNodeKt.toPathNodes(PathNode.kt:275)
        at androidx.compose.ui.graphics.vector.PathParser.addNode(PathParser.kt:525)
        at androidx.compose.ui.graphics.vector.PathParser.parsePathString(PathParser.kt:84)
        at androidx.compose.ui.graphics.vector.VectorKt.addPathNodes(Vector.kt:75)
        at androidx.compose.ui.graphics.vector.compat.XmlVectorParser_androidKt.parsePath(XmlVectorParser.android.kt:283)
        at androidx.compose.ui.graphics.vector.compat.XmlVectorParser_androidKt.parseCurrentVectorNode(XmlVectorParser.android.kt:101)
        at androidx.compose.ui.res.VectorResources_androidKt.loadVectorResourceInner(VectorResources.android.kt:81)
        at androidx.compose.ui.res.PainterResources_androidKt.loadVectorResource(PainterResources.android.kt:95)
        at androidx.compose.ui.res.PainterResources_androidKt.painterResource(PainterResources.android.kt:65)
        at eac.qloga.android.features.negotiation.presentation.CustomerOrdersScreenKt.OrdersEmptyStateCard(CustomerOrdersScreen.kt:134)
        at eac.qloga.android.features.negotiation.presentation.CustomerOrdersScreenKt$CustomerOrdersScreen$2.invoke(CustomerOrdersScreen.kt:83)
        at eac.qloga.android.features.negotiation.presentation.CustomerOrdersScreenKt$CustomerOrdersScreen$2.invoke(CustomerOrdersScreen.kt:61)
        at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:116)
        at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
        at androidx.compose.material3.ScaffoldKt$ScaffoldLayout$1$1$1$bodyContentPlaceables$1.invoke(Scaffold.kt:189)
        at androidx.compose.material3.ScaffoldKt$ScaffoldLayout$1$1$1$bodyContentPlaceables$1.invoke(Scaffold.kt:184)
        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.ui.layout.LayoutNodeSubcompositionsState$subcompose$2$1$1.invoke(SubcomposeLayout.kt:770)
        .
        .
        .
        android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:686)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:692)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:801)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:3456)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3256)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2610)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1533)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7455)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:953)
        at android.view.Choreographer.doCallbacks(Choreographer.java:765)
        at android.view.Choreographer.doFrame(Choreographer.java:697)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:939)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6711)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:911)

Upvotes: 4

Views: 4025

Answers (2)

leodev
leodev

Reputation: 228

I think that helios answer in this post could explain the problem. I solved splitting the long path into multiple shorter paths

Upvotes: 0

nglauber
nglauber

Reputation: 23904

Assuming that your image is correct, you can use the following:

First, add the dependency to the SVG support for coil

implementation "io.coil-kt:coil-compose:$coilVersion"
implementation "io.coil-kt:coil-svg:$coilVersion"

Then you can pass the SvgDecoder as parameter and use the android.resource://your.package.name/resId to load your resource.

@Composable
fun SvgLocalImageSample() {
    val ctx = LocalContext.current
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(ctx)
            .decoderFactory(SvgDecoder.Factory())
            .data("android.resource://${ctx.applicationContext.packageName}/${R.raw.android_robot}")
            .size(Size.ORIGINAL) // Set the target size to load the image at.
            .build()
    )
    Image(
        painter = painter,
        modifier = Modifier.size(100.dp),
        contentDescription = null
    )
}

Upvotes: 0

Related Questions