How to load remote SVG image using Coil in Jetpack Compose

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.

The syntax for adding a new decoder has changed a bit from 1.4.0 to 2.x.x.

val imageLoader = ImageLoader.Builder(context)
.components {
    add(SvgDecoder.Factory())
}
.build()

You can find the latest syntax here: https://coil-kt.github.io/coil/svgs/