在 Android 中,可以在 XML 布局文件中引入本地 .svg
资源,但需要先转换为 Android 可识别的格式。主要有以下几种方式:
方式 1:使用 Vector Asset(官方推荐)
Android 不支持直接加载 .svg
,但可以使用 Vector Asset 工具将 .svg
转换为 VectorDrawable,然后在 XML 中使用。
步骤:
-
转换 SVG 为 VectorDrawable
- 在 Android Studio,打开
res/drawable
目录 - 右键 →
New
→Vector Asset
Local File
选择.svg
文件并导入- 生成
.xml
矢量图资源
- 在 Android Studio,打开
-
在 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
文件。
步骤:
-
添加
coil-svg
依赖:implementation "io.coil-kt:coil-svg:2.0.0"
-
使用
rememberAsyncImagePainter
加载 SVG:Image( painter = rememberAsyncImagePainter("file:///android_asset/sample.svg"), contentDescription = "SVG Image" )
方式 3:使用 Glide 或 Coil 加载 SVG
如果 SVG 是静态资源,建议转换为 VectorDrawable
。但如果是 动态加载,可以使用 Coil
或 Glide
。
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)。