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

2025-03-24
上海
本文字数：1510 字
阅读完需：约 5 分钟

【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@Componentstruct SvgIconExample {  build() {    Column({ space: 50 }) {      // 假设 svg 文件名为 icon.svg      Image($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 文件内容字符串，如何加载显示的方案如下：

可以使用三方库 ohos-svg，https://gitcode.com/openharmony-sig/ohos_svg

//Indeximport { SVGImageView } from '@ohos/svg'
@Entry@Componentstruct Index {  svgStr: string =    "<svg id=\"vector\" xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\"><defs><linearGradient gradientUnits=\"userSpaceOnUse\" x1=\"6.935\" y1=\"3.252\" x2=\"6.909\" y2=\"10.552\" id=\"gradient_0\"><stop offset=\"0\" stop-color=\"#FFFE4144\"/><stop offset=\"1\" stop-color=\"#FFFF6D67\"/></linearGradient></defs><path fill=\"url(#gradient_0)\" d=\"M10.983,3.951C10.983,3.313 10.461,2.79 9.823,2.79C5.983,2.79 2.862,5.913 2.862,9.755C2.862,10.393 3.384,10.915 4.022,10.915C4.66,10.915 5.182,10.393 5.182,9.755C5.182,7.189 7.259,5.112 9.823,5.112C10.461,5.112 10.983,4.589 10.983,3.951Z\" stroke-width=\"1\" fill-rule=\"evenodd\" stroke=\"#00000000\" id=\"path_6\"/></svg>"  model: SVGImageView.SVGImageViewModel = new SVGImageView.SVGImageViewModel();
  aboutToAppear(): void {    this.model.setFromString(this.svgStr)  }
  build() {    Column() {      SVGImageView({ model: this.model })        .width(50)        .height(100)    }    .height('100%')    .width('100%')  }}

复制代码

三、源码示例：

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

@Entry@Componentstruct SvgLoadingExample {  build() {    Column({ space: 50 })      .width('100%')      .padding({ top: 50 })      .alignItems(FlexAlign.Center) {      // 本地加载 SVG      Text('本地加载 SVG')        .fontSize(20)        .fontWeight(FontWeight.Bold)      // 假设本地 SVG 文件名为 local_icon.svg      Image($r('media.local_icon'))         .width(100)        .height(100)
      // 网络加载 SVG      Text('网络加载 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)    }  }}

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/51d9deedca971f34365cee9f3】。文章转载请联系作者。

GeorgeGcs

关注

路漫漫其修远兮，吾将上下而求索。 2024-12-24 加入

历经腾讯，宝马，研究所，金融。待过私企，外企，央企。深耕大应用开发领域十年。 OpenHarmony，HarmonyOS，Flutter，H5，Android，IOS。目前任职鸿蒙应用架构师。 HarmonyOS官方认证创作先锋

发布

暂无评论

创作场景

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

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

一、SVG 是什么？

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

三、源码示例：

GeorgeGcs

评论