如何在Jetpack Compose中使用Coil加载远程SVG图片

核心原因是Coil默认未内置SVG格式解码器，需额外配置扩展组件适配，具体操作如下：

1. 引入Coil SVG扩展依赖 #

在模块级build.gradle.kts（或Groovy语法的build.gradle）中添加依赖，需保证扩展版本与项目中已引入的Coil核心版本完全一致：

// Kotlin DSL 写法
implementation("io.coil-kt:coil-compose-svg:2.5.0") // 替换为你的Coil对应版本

// Groovy 写法
implementation 'io.coil-kt:coil-compose-svg:2.5.0'

2. 配置SVG解码器 #

两种配置方式可选：

单次加载指定解码器 #

加载SVG时单独为该请求指定SvgDecoder即可：

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg")
        .decoderFactory(SvgDecoder.Factory())
        .build(),
    contentDescription = "印度国旗",
    modifier = Modifier.size(200.dp)
)

全局配置自动适配所有SVG #

如果项目中多处用到SVG资源，可直接全局配置ImageLoader，无需每次请求单独指定：

1. 自定义全局ImageLoader实例：

val customImageLoader = ImageLoader.Builder(LocalContext.current)
    .components {
        add(SvgDecoder.Factory())
    }
    .build()

2. 在应用根组件处替换默认ImageLoader：

CompositionLocalProvider(LocalImageLoader provides customImageLoader) {
    // 应用根布局组件
    AppNavHost()
}

后续加载SVG即可直接使用默认写法：

AsyncImage(
    model = "https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
    contentDescription = "印度国旗",
    modifier = Modifier.size(200.dp)
)

常见问题排查 #

如果配置完成后仍加载失败，可逐一排查以下项：

• 确认AndroidManifest.xml中已添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

• 确认当前设备网络可正常访问对应图片资源，无代理、防火墙限制
• 确认Coil核心依赖与SVG扩展依赖版本完全匹配，避免版本兼容问题

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