Coil是否支持字符串源SVG动画？转ByteArray后无动画问题

Coil默认的SvgDecoder不支持SVG动画。原因是Coil的SVG解码模块依赖AndroidSVG库，该库默认仅处理静态SVG渲染，会将SVG转换为静态的PictureDrawable，丢失原有的动画（如SMIL动画）信息，所以你能看到图片但无法播放动画。

解决方案：自定义动画SVG渲染逻辑 #

要在Coil生态中显示带动画的SVG，你需要借助AndroidSVG的动画扩展能力，自定义渲染逻辑，而不是依赖默认的SvgDecoder。具体步骤如下：

1. 确保依赖支持动画的AndroidSVG版本
   确认项目中引入了支持动画的AndroidSVG依赖（Coil的coil-svg模块可能已包含，但需确保版本正确）：

   implementation "com.caverock:androidsvg-aar:1.4"
   

2. 创建支持动画SVG的Composable组件
   直接使用AndroidSVG提供的AnimatedSVGView来加载并播放SVG动画，替代Coil的AsyncImage：

   @Composable
   fun AnimatedSvgImage(
       svgByteArray: ByteArray,
       modifier: Modifier = Modifier
   ) {
       val context = LocalContext.current
       // 缓存解析后的AnimatedSVG实例，避免重复解析
       val animatedSvg = remember(svgByteArray) {
           runCatching {
               AnimatedSVG.getFromInputStream(svgByteArray.inputStream())
           }.getOrNull()
       }
   
       AndroidView(
           factory = { ctx ->
               AnimatedSVGView(ctx).apply {
                   animatedSvg?.let { setSVG(it) }
               }
           },
           modifier = modifier,
           update = { view ->
               animatedSvg?.let { view.setSVG(it) }
               view.start() // 启动动画
           }
       )
   }
   

3. 替换原有代码使用自定义组件

   val decoded: ByteArray = Base64.decode(source, Base64.DEFAULT)
   
   AnimatedSvgImage(
       svgByteArray = decoded,
       modifier = Modifier.fillMaxSize()
   )
   

注意事项 #

• AndroidSVG仅支持SMIL动画的子集（如<animate>、<animateTransform>标签），对CSS动画的支持有限，若你的SVG使用CSS动画，可能无法正常播放。
• 若需要结合Coil的缓存、请求管理能力，可以自定义ImageRequest.Target，将解码后的SVG数据传递给AnimatedSVGView，实现更灵活的控制。

内容的提问来源于stack exchange，提问作者Wafi_ck