HarmonyOS鸿蒙Next中怎么展示SVG格式图片

【背景知识】

• Image组件可显示矢量图（SVG格式的图片），SVG标签文档请参考SVG标签说明。如果SVG图片没有原始大小，需要给Image组件设置宽高，否则不显示。SVG图片不支持通过image标签引用svg格式和gif格式的本地其他图片。
• 加载SVG图片目前可行的方法有很多，例如下载为SVG文件，然后通过文件读取；或者解析为Uint8Array，然后转为PixelMap进行加载，目前转为PixelMap方式可行性更高。

【解决方案】

首先可以使用TextEncoder类的encodeInto方法，将SVG字符串转化为Uint8Array类型，然后使用createImageSource通过buffer创建ImageSource实例，最后使用createPixelMap返回结果，参考代码如下：

import { image } from '@kit.ImageKit';
import { util } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined;
  // 将以下内容替换成从三方库得到的SVG字符串
  svgContent = '';

  async uint8ArrayToPixelMap(svg: string): Promise<image.PixelMap> {
    let encoder = new util.TextEncoder();
    const uint8Array = encoder.encodeInto(svg);
    const iconArray: ArrayBuffer = uint8Array.buffer.slice(0);
    let source = image.createImageSource(iconArray);
    const pixelMap = await source.createPixelMap();
    source.release();
    return pixelMap;
  }

  build() {
    Column() {
      Button('点击根据字符串加载SVG图片')
        .onClick(() => {
          this.uint8ArrayToPixelMap(this.svgContent).then((data: PixelMap) => {
            this.pixelMap = data;
          })
        })
        .margin({ top: 30, bottom: 30 })
      Image(this.pixelMap)
        .width('50%').height('50%')
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .margin({ top: 30, bottom: 30 })
    }
    .height('100%')
    .width('100%')
  }
}