How to load remote SVG image using Coil in Jetpack Compose

Question

I'm failing to load this image in Image using Coil in Jetpack Compose

Answer 1

Coil doesn't support SVG by default.

According to documentation, you need to:

1. Add following dependency:

   implementation("io.coil-kt:coil-svg:$coil_version")
   

2. Set SvgDecoder as decoder:

   Coil 2.0.0 version:

   AsyncImage(
       model = ImageRequest.Builder(LocalContext.current)
           .data(svgImageUrl)
           .decoderFactory(SvgDecoder.Factory())
           .build(),
       contentDescription = null
   )
   

   Coil 1.4.0 version:

   Image(
       rememberImagePainter(
           data = svgImageUrl,
           builder = {
               decoder(SvgDecoder(LocalContext.current))
           }
       ),
       contentDescription = null
   )
   

p.s. note that if you set the decoder this way, Coil will not be able to work with non-SVG images in this painter, so if you want some general solution, you should check the url extension and add the decoder accordingly.