在鸿蒙HarmonyOS应用开发中SVG 因其无限缩放不失真和体积小巧的特性被广泛应用于图标、插画等场景。针对不同的业务需求开发者可以选择以下四种主流方案方案一原生 Image 组件直接加载推荐基础场景鸿蒙的Image组件原生支持 SVG 格式对于简单的静态 SVG 图片这是最轻量、最直接的方案。核心用法将 SVG 文件放置在resources/base/media或resources/rawfile目录下通过$r()或$rawfile()引用即可。typescript编辑// 加载 media 目录下的 SVG Image($r(app.media.icon)) .width(100) .height(100) // 加载 rawfile 目录下的 SVG Image($rawfile(illustration.svg)) .width(100%) .height(100%)⚠️ 核心避坑指南必须显式设置宽高如果 SVG 文件内部没有定义width和height属性且Image组件也未设置宽高图片将不会显示。标签支持受限原生Image基于 SVG 1.1 规范不支持text标签无法显示文字、不支持 SVG 动画且部分复杂渐变可能渲染异常。SVG2 增强支持从 API version 22 开始可通过设置.supportSvg2(true)属性来增强 SVG 标签的解析能力。方案二SVG 字符串转 PixelMap 动态加载当 SVG 内容是由后端接口返回的字符串或由第三方库动态生成时无法直接使用$r()引用。此时需将字符串转换为PixelMap进行渲染。核心实现利用TextEncoder将 SVG 字符串转为Uint8Array再通过ImageSource创建PixelMap。typescript编辑import { image } from kit.ImageKit; import { util } from kit.ArkTS; async function loadSvgFromString(svgString: string): Promiseimage.PixelMap { let encoder new util.TextEncoder(); const uint8Array encoder.encodeInto(svgString); const iconArray: ArrayBuffer uint8Array.buffer.slice(0); let source image.createImageSource(iconArray); const pixelMap await source.createPixelMap(); source.release(); // 务必释放资源 return pixelMap; } // 在组件中使用 State pixelMap: image.PixelMap | undefined undefined; // ... 在 aboutToAppear 或按钮点击中调用 this.pixelMap await loadSvgFromString(this.svgContent); // Image(this.pixelMap).width(100).height(100)方案三引入 ohos-svg 第三方库复杂渲染与高性能如果原生Image无法满足需求例如需要渲染包含文本、复杂渐变或需要更高性能推荐使用 OpenHarmony 官方的三方库ohos/svg。核心优势支持大部分 SVG 1.1 规范包含基本形状、路径、文本、样式和渐变。性能优异内存占用低。提供SVGImageView组件支持从 Rawfile、Resource、对象或字符串直接加载。快速接入bash编辑ohpm install ohos/svgtypescript编辑import { SVGImageView } from ohos/svg; State model: SVGImageView.SVGImageViewModel new SVGImageView.SVGImageViewModel(); aboutToAppear() { // 支持直接传入 SVG 字符串 this.model.setFromString(svg.../svg); } build() { SVGImageView({ model: this.model }) .width(100) .height(100) }方案四XmlGraphicsBatikSVG 生成、解析与深度操作如果业务不仅需要“渲染” SVG还需要在代码中“生成”、“修改”或“深度解析” SVG 结构如动态改变颜色、替换路径、导出文件应使用ohos/xmlgraphicsbatik库。核心能力快捷生成 SVG 图像文件并保存至本地。操作 SVG 图像进行颜色、样式、内容的修改。将 SVG XML 文本解析为可操作的 JSON 对象。快速接入bash编辑ohpm install ohos/xmlgraphicsbatiktypescript编辑import { SVGManager } from ohos/XmlGraphicsBatik; // 获取管理类实例 let svgManager SVGManager.getInstance(); // 创建 SVG 声明及根标签 svgManager.createSVGDeclares(); // 获取根节点并添加子节点如 rect, circle 等... // 最终保存为文件 svgManager.saveSVG(output.svg, svgManager.getSVGTotalObj()); 选型决策总结静态图标/插画展示首选原生Image组件注意补齐宽高。动态/接口下发的 SVG使用TextEncoderPixelMap方案。包含文字/复杂渐变的渲染引入ohos/svg。需要代码动态生成或修改 SVG引入ohos/xmlgraphicsbatik。