网站后端开发流程网站开发公司 郑州

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

一、SVG是什么？

SVG 即可缩放矢量图形（Scalable Vector Graphics），它是一种基于 XML 语法的二维矢量图形格式，由万维网联盟（W3C）制定。

SVG 使用 XML 文本格式来描述图形，与传统的位图图像（如 JPEG、PNG 等）不同，SVG 图形是由一系列的点、线、形状和颜色定义组成的，而不是像素点。这使得 SVG 图形具有无限的可扩展性，无论放大或缩小多少倍，图形都能保持清晰、不失真。

SVG 代码示例，用于绘制一个黄色的圆形：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="yellow" />
</svg>

二、鸿蒙中如何加载显示？

首先将 SVG 文件放置在项目的 entry/src/main/resources/base/media 目录下。

@Entry
@Component
struct SvgIconExample {build() {Column({ space: 50 }) {// 假设 svg 文件名为 icon.svgImage($r('media.icon')) .width(100).height(100)}.width('100%').padding({ top: 50 })}
}

$r 是资源引用函数，media.icon 表示引用 media 目录下名为 icon 的资源文件。这里会加载 entry/src/main/resources/base/media 目录下的 icon.svg 文件。

三、源码示例：

以下是一个将本地加载 SVG 和网络加载 SVG ：

@Entry
@Component
struct SvgLoadingExample {build() {Column({ space: 50 }).width('100%').padding({ top: 50 }).alignItems(FlexAlign.Center) {// 本地加载 SVGText('本地加载 SVG').fontSize(20).fontWeight(FontWeight.Bold)// 假设本地 SVG 文件名为 local_icon.svgImage($r('media.local_icon')) .width(100).height(100)// 网络加载 SVGText('网络加载 SVG').fontSize(20).fontWeight(FontWeight.Bold)Image('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/1200px-SVG_Logo.svg.png') .width(100).height(100)}}
}