android 加载本地.svg资源的几种引入方式

在 Android 中,可以在 XML 布局文件中引入本地 .svg 资源,但需要先转换为 Android 可识别的格式。主要有以下几种方式:


方式 1:使用 Vector Asset(官方推荐)

Android 不支持直接加载 .svg,但可以使用 Vector Asset 工具将 .svg 转换为 VectorDrawable,然后在 XML 中使用。

步骤:
  1. 转换 SVG 为 VectorDrawable

    • 在 Android Studio,打开 res/drawable 目录
    • 右键 → NewVector Asset
    • Local File 选择 .svg 文件并导入
    • 生成 .xml 矢量图资源
  2. 在 XML 布局中使用

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_svg_vector" />
    

方式 2:使用 Compose 的 SVG 解析(现代方式)

如果你的项目使用 Jetpack Compose,可以使用 Accompanist 库解析 .svg 文件。

步骤:
  1. 添加 coil-svg 依赖:

    implementation "io.coil-kt:coil-svg:2.0.0"
    
  2. 使用 rememberAsyncImagePainter 加载 SVG:

    Image(
        painter = rememberAsyncImagePainter("file:///android_asset/sample.svg"),
        contentDescription = "SVG Image"
    )
    

方式 3:使用 Glide 或 Coil 加载 SVG

如果 SVG 是静态资源,建议转换为 VectorDrawable。但如果是 动态加载,可以使用 CoilGlide

Coil 加载 SVG
implementation "io.coil-kt:coil-svg:2.0.0"
val imageLoader = ImageLoader.Builder(context)
    .components {
    
    
        add(SvgDecoder.Factory())
    }
    .build()

val painter = rememberAsyncImagePainter("file:///android_asset/sample.svg", imageLoader)

Image(painter = painter, contentDescription = "SVG Image")
Glide 加载 SVG
implementation "com.github.bumptech.glide:glide:4.12.0"
implementation "com.caverock:androidsvg:1.4"
Glide.with(context)
    .load("file:///android_asset/sample.svg")
    .into(imageView)

总结

方式 是否支持 XML 适用场景
Vector Asset ✅ 支持 静态 SVG 资源,官方推荐
Compose + Coil ❌ 不支持 现代 Compose UI,适用于动态加载
Glide/Coil ❌ 不支持 适用于网络或动态加载

如果你要 在 XML 布局中直接引入,推荐 方式 1(Vector Asset)