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

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

一、SVG是什么?

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

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

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

dart 复制代码
<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 目录下。

dart 复制代码
@Entry
@Component
struct 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 和网络加载 SVG :

dart 复制代码
@Entry
@Component
struct 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)
    }
  }
}
相关推荐
SuperHeroWu72 小时前
【HarmonyOS 6】仿AI唤起屏幕边缘流光特效
华为·harmonyos·特效·鸿蒙6.0·流光·ai唤起·屏幕边缘
gcios3 小时前
鸿蒙-flutter 混合开发
harmonyos
特立独行的猫a3 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
安卓开发者5 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
云天徽上9 小时前
【数据可视化-106】华为2025上半年财报分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·华为·信息可视化·数据分析·pyecharts
爱笑的眼睛1118 小时前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
花先锋队长18 小时前
为何三折叠手机只有华为可以?看华为Mate XTs非凡大师就知道
华为·智能手机
安卓开发者19 小时前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。21 小时前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步
CAE虚拟与现实1 天前
华为的 4A 架构简介
服务器·华为·架构·4a架构