在HarmonyOS Next中加载SVG图标，主流的做法是通过Image组件直接渲染。它的用法很简单，根据SVG文件的来源不同，主要有下面这几种方式：

📁 加载本地SVG资源

这是最直接的方式。把SVG文件放到项目的资源目录下，然后用$r函数引用就行。文件通常放在 entry/src/main/resources/base/media/ 文件夹里 。

typescript

@Entry
@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 。

typescript

@Entry
@Component
struct NetworkSvgDemo {
  build() {
    Column() {
      Image('https://example.com/your-icon.svg')
        .width(100)
        .height(100)
    }
  }
}

✨ 进阶技巧与重要提示

1. SVG换色 (fillColor)：这是矢量图的一大优势。通过fillColor属性，可以动态改变SVG图标的颜色，非常适合做主题切换 。

   typescript

   Image($r('app.media.icon'))
     .width(30)
     .height(30)
     .fillColor('#FF0000') // 将图标变为红色

2. 缩放与适配 (objectFit)：可以用objectFit控制SVG在容器里的显示方式，比如ImageFit.Contain（保持比例完整显示）或ImageFit.Cover（填满容器可能裁剪）。

3. SVG字符串，不能直接用Base64：Image组件的src虽然支持传Base64字符串，但不支持SVG格式的Base64数据。如果需要显示从后端接口获取的SVG字符串（比如接口返回的是SVG的XML代码），需要借助ohos-svg这样的三方库来解析和渲染 。

   typescript

   // 伪代码示例：使用三方库处理SVG字符串
   // import { SVGImageView } from '@ohos/svg'
   // 然后通过 model.setFromString(svgString) 等方式渲染