【HarmonyOS Next】鸿蒙应用加载SVG文件显示图标

在HarmonyOS Next中加载SVG图标主流的做法是通过Image组件直接渲染。它的用法很简单根据SVG文件的来源不同主要有下面这几种方式 加载本地SVG资源这是最直接的方式。把SVG文件放到项目的资源目录下然后用$r函数引用就行。文件通常放在entry/src/main/resources/base/media/文件夹里 。typescriptEntry Component struct LocalSvgDemo { build() { Column() { // 假设你的SVG文件名为 home.svg Image($r(app.media.home)) .width(50) .height(50) .fillColor(Color.Blue) // 矢量图可以轻松换色 } } }使用$r(app.media.文件名)时不需要写文件扩展名 。 加载网络SVG图片加载网络上的SVG和加载普通图片类似直接传URL就行。但别忘了在module.json5里申请网络权限ohos.permission.INTERNET。typescriptEntry Component struct NetworkSvgDemo { build() { Column() { Image(https://example.com/your-icon.svg) .width(100) .height(100) } } }✨ 进阶技巧与重要提示SVG换色 (fillColor)这是矢量图的一大优势。通过fillColor属性可以动态改变SVG图标的颜色非常适合做主题切换 。typescriptImage($r(app.media.icon)) .width(30) .height(30) .fillColor(#FF0000) // 将图标变为红色缩放与适配 (objectFit)可以用objectFit控制SVG在容器里的显示方式比如ImageFit.Contain保持比例完整显示或ImageFit.Cover填满容器可能裁剪。SVG字符串不能直接用Base64Image组件的src虽然支持传Base64字符串但不支持SVG格式的Base64数据。如果需要显示从后端接口获取的SVG字符串比如接口返回的是SVG的XML代码需要借助ohos-svg这样的三方库来解析和渲染 。typescript// 伪代码示例使用三方库处理SVG字符串 // import { SVGImageView } from ohos/svg // 然后通过 model.setFromString(svgString) 等方式渲染