HarmonyOS 鸿蒙Next Image显示svg格式图片问题

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Image显示svg格式图片问题

下面代码，一个svg来源谷歌，一个来源iconfont, 但是谷歌的svg图片无法显示

Text('----------iconfont--------------')
    .textAlign(TextAlign.Center)
    .width('100%')
  Image($r('app.media.ic_search_iconfont'))
    .width(24)
    .height(24)
    .fillColor(0xFF0000)
    .borderWidth(1)
    .objectFit(ImageFit.Contain)

  Text('----------google--------------')
    .textAlign(TextAlign.Center)
    .width('100%')

  Image($r('app.media.ic_search_google'))
    .width(24)
    .height(24)
    .fillColor(0x00FF00)
    .borderWidth(1)
    .objectFit(ImageFit.Contain)

显示效果

![cke_15420.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nOydd3xU5Z3Hf5c9qKSmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiY


更多关于HarmonyOS 鸿蒙Next Image显示svg格式图片问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
19 回复

src/main/resources/base/media/ic_search_google.svg

src/main/resources/base/media/ic_search_iconfont.svg

src/main/ets/pages/Page06.ets

![cke_1728.png](data-originheight=“381” data-originwidth=“877” src="cmtybbs/071/824/066/0260086000071824066.20240707124203.23522259029755194397994332786565:50001231000000:2800:A8393BF75015C72C58EEF23E0626D16269525610D1A2A44526BA1EEE57708D0C.png)

更多关于HarmonyOS 鸿蒙Next Image显示svg格式图片问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


是的，就是你说的viewBox的问题，

我的预览器和模拟器都没问题。

google fonts

iconFont

<svg t="1720278023613" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="4266" width="24" height="24">
<path d="M899.375984 842.057389l0.009783-0.007826-180.079864-180.079865c44.551344-57.189455 71.099398-129.091086 71.099398-207.201221 0-186.376418-151.087933-337.464351-337.464351-337.464351S115.478556 268.392059 115.478556 454.768477s151.087933 337.464351 337.464351 337.464351c87.118629 0 166.524077-33.018751 226.396122-87.218419l178.541924 178.541924 0.025437-0.025436c5.337787 5.519757 12.804427 8.965447 21.086997 8.965447 16.210984 0 29.350001-13.139017 29.35-29.350001a29.242384 29.242384 0 0 0-8.967403-21.088954z m-447.51707-110.543842c-153.19135 0-277.375116-124.185723-277.375117-277.375117S298.667563 176.763314 451.858914 176.763314c153.189393 0 277.377073 124.185723 277.377073 277.375116s-124.187679 277.375116-277.377073 277.375117z" fill="#525252" p-id="4267"></path>
</svg>

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

楼主您好，建议使用最新的Deveco工具看下，这边测试在模拟器和预览器中都是正常显示的。

方便的话可以把svg文件发出来

五楼发了，

看不到喔，

姓名: 张三
职位: 软件工程师
简介: 拥有超过10年的软件开发经验，熟悉Java、Python和C++。

补充一下：模拟器无法显示，但是studio的预览可以显示

测试结果发到10楼了，我这边预览器和模拟器都没问题。推测是适配问题，Google Fonts提供的SVG图标中，viewBox设置为"0 -960 960 960"，这意味着图像的坐标系是从(0, -960)开始的，高度为960，宽度也为960。这样的设置对于某些系统来说可能不太常见，因为大多数SVG的viewBox通常从(0, 0)开始。尝试将Google Fonts的SVG图标中的viewBox改为更常见的形式，如"0 0 24 24"，并相应地调整SVG路径的坐标。

<svg viewBox="0 0 24 24" width="24" height="24" fill="#00FF00"> <path d="M..."/> </svg>

// 在HarmonyOS中使用 Image($r(‘app.media.ic_search_google’)) .width(24) .height(24) .objectFit(ImageFit.Contain) // 移除了.fillColor()，如果SVG中的fill属性已删除或未指定，

尝试把.fillColor(0x00FF00)删掉试试。

可以打开google的svg源代码，搜索fill="，如果搜索到，说明鸿蒙的.fillColor可以使用，会把svg中的fill=“颜色值替换，如果搜索不到，你可以手动在svg上添加好fill=”，或者在鸿蒙里删掉.fillColor属性。

不行，都试过啦，无法显示，

我把svg代码发出来吧，我在我这边试试，

上面有，2楼，我自己发的，

iconfont 的 svg

```xml
<svg t="1720278023613" class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="4266"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
    <path d="M899.375984 842.057389l0.009783-0.007826-180.079864-180.079865c44.551344-57.189455 71.099398-129.091086 71.099398-207.201221 0-186.376418-151.087933-337.464351-337.464351-337.464351S115.478556 268.392059 115.478556 454.768477s151.087933 337.464351 337.464351 337.464351c87.118629 0 166.524077-33.018751 226.396122-87.218419l178.541924 178.541924 0.025437-0.025436c5.337787 5.519757 12.804427 8.965447 21.086997 8.965447 16.210984 0 29.350001-13.139017 29.35-29.350001a29.242384 29.242384 0 0 0-8.967403-21.088954z m-447.51707-110.543842c-153.19135 0-277.375116-124.185723-277.375117-277.375117S298.667563 176.763314 451.858914 176.763314c153.189393 0 277.377073 124.185723 277.377073 277.375116s-124.187679 277.375116-277.377073 277.375117z" fill="#525252" p-id="4267"></path>
</svg>

google 的 svg 图片

<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#000000">
    <path d="M796-121 533-384q-30 26-69.96 40.5Q423.08-329 378-329q-108.16 0-183.08-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l264 262-44 44ZM377-389q81.25 0 138.13-57.5Q572-504 572-585t-56.87-138.5Q458.25-781 377-781q-82.08 0-139.54 57.5Q180-666 180-585t57.46 138.5Q294.92-389 377-389Z"/>
</svg>

针对HarmonyOS（鸿蒙）Next Image显示SVG格式图片的问题，以下提供直接相关的解答：

在HarmonyOS中，Next Image组件默认可能不支持直接显示SVG格式的图片。SVG（可缩放矢量图形）是一种基于XML的文件格式，用于描述二维矢量图形。由于其特殊性质，直接显示SVG可能需要特定的解析和处理。

为了解决这个问题，可以考虑以下几种方法：

  1. 转换为位图格式：将SVG图片转换为PNG、JPEG等位图格式，这些格式是Next Image组件原生支持的。可以使用在线转换工具或图形编辑软件来完成转换。

  2. 使用第三方库：寻找并集成支持SVG解析和渲染的第三方库。这些库通常提供API来加载和显示SVG文件，但需要确保它们与HarmonyOS兼容。

  3. 自定义组件：如果上述方法不适用，可以考虑开发自定义组件来解析和渲染SVG文件。这需要深入理解SVG文件格式以及HarmonyOS的UI开发框架。

请注意，选择哪种方法取决于具体的应用场景和需求。如果转换格式或集成第三方库能够满足需求，通常是最简单和最直接的方法。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部