Not able to display svg format image in jetpack compose

Question

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)

I think there might be some issue in your SVG, can you paste the SVG content? You can check for the SVG support in the [documentation](https://developer.android.com/studio/write/vector-asset-studio#svg-support) — Priyank Jain, Jul 13 '22 at 07:36
You should try and convert your svg to android vector drawables. In Android studio, go to new->Image Resource and choose your svg file. Android studio will automatically convert it into an xml drawable. — Rafsanjani, Jul 13 '22 at 08:19
In addition to the answer of @Rafsanjani, you can convert your svg in [here](https://svg2vector.com) — commandiron, Jul 13 '22 at 10:56
I convert the svg into drawables using drawable -> new -> vector Assets. Isn't it same ? @commandiron — Jeevan Rupacha, Jul 13 '22 at 10:57
I don't know, but I said it as an alternative. Did this solve your error? — commandiron, Jul 13 '22 at 11:03
Firstly, and you trying to read an SVG (as you state in your question) or a VectorDrawable? **They are different.** If you mean VectorDrawable, then please update/fix your question. Secondly, if it's failing to parse the file, then you should post the file, so we can see it. Because it will be the file that is the problem. — Paul LeBeau, Jul 20 '22 at 11:12
Possible duplicate of https://stackoverflow.com/questions/71369599/jetpack-compose-vector-parsing-issue? — Paul LeBeau, Jul 20 '22 at 11:15

score 0 · Answer 1 · answered Jul 20 '22 at 12:51

0

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
    )
}

answered Jul 20 '22 at 12:51

nglauber

18,674
6
70
75

SvgDecoder.Factory() is not supported in android studio – Jeevan Rupacha Jul 21 '22 at 10:07
Yes, it is. I'm using and it's working. I copied this sample from my code... Make sure you added both dependencies in your build.gradle https://github.com/nglauber/JetpackComposePlayground/blob/master/app/src/main/java/br/com/nglauber/jetpackcomposeplayground/screens/ImageScreen.kt – nglauber Jul 21 '22 at 10:12
Yes. I was using different version of coil. Now it works but still not solving the problem. I think It is because the complex structure of svg file that has too large string . I couldn't post the vector drawable here because of file size limitation. – Jeevan Rupacha Jul 22 '22 at 05:19
1

Got it. Check my answer with a different SVG file, if it works, ask a designer to check what's wrong with this particular image. Maybe Coil does not support some feature used by this file. – nglauber Jul 22 '22 at 10:22
1

I got mine working exactly as prescribed by nglauber, Thanks lots Mate – Tonnie Jan 02 '23 at 09:51
I'm not sure how @nglauber got it to work, but Coil shows this error when trying to load a vector drawable: java.lang.IllegalArgumentException: Unsupported type: ImageVector. If you wish to display this ImageVector, use androidx.compose.foundation.Image. – Ugo Jul 09 '23 at 04:46
It could be an issue in your SVG. As I mentioned in the comment above, it's working both with local and remote SVG images. – nglauber Jul 10 '23 at 14:09

score 0 · Answer 2 · answered Dec 16 '22 at 11:42

0

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

answered Dec 16 '22 at 11:42

leodev

208
4
13

Not able to display svg format image in jetpack compose

2 Answers2