有了Omi，在小程序中渲染SVG再也不慌了！

淩亂°似流年 2021-12-22 00:29 470阅读 0赞

经过腾讯 Omi 团队的努力，今天你可以在小程序中使用 Cax 引擎高性能渲染 SVG！

SVG 是可缩放矢量图形(Scalable Vector Graphics)，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。SVG 的优势有很多:

*  SVG 使用 XML 格式定义图形，可通过文本编辑器来创建和修改
 *  SVG 图像可被搜索、索引、脚本化或压缩
 *  SVG 是可伸缩的，且放大图片质量不下降
 *  SVG 图像可在任何的分辨率下被高质量地打印
 *  SVG 可被非常多的工具读取和修改（比如记事本）
 *  SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性、可编程星更强
 *  SVG 完全支持 DOM 编程，具有交互性和动态性

而支持上面这些优秀特性的前提是 - **需要支持 SVG 标签。**比如在小程序中直接写：

‍上面定义了 SVG 的结构、样式和点击行为。但是小程序目前不支持 SVG 标签，仅仅支持加载 SVG 之后 作为 background-image 进行展示，如 background-image: URL("data: image/svg+xml.......)，或者 base64 后作为 background-image 的 url。

那么怎么办呢？有没有办法让小程序支持 SVG? 答案是有的！需要下面这些东西（站在巨人的肩膀上）：

*  JSX，史上最强 UI 表达式，支持书写 XML-Hyperscript 互转的 JS 语言
 *  小程序内置 Canvas 渲染器
 *  Cax 最新渲染引擎
 *  HTM，Hyperscript Tagged Markup，可能是 JSX 的替代品或者另一种选择，使用ES标准的模板语法实现的 Hyperscript 运行时/编译时生成，preact 作者(也是google工程师)打造

这里稍微解释下 Hyperscript：

比如 JSX 中的

或者 js 中的 htm:

最后都会被编译成:

嵌套的 div 也会变编译成 h 嵌套 h，比如

编译后:

而 h 函数的定义也是相当简洁:

通过 h 的执行可以 js 中拿到结构化的数据，也就是所谓的虚拟 dom。需要注意的是 htm 有轻微的运行时开销，jsx 没有。

一句话总结：

> 使用小程序内置的 Canvas 渲染器， 在 Cax 中实现 SVG 标准的子集，使用 JSX 或者 HTM 描述 SVG 结构行为表现

直接看在小程序中使用案例:

其中的 svg-a 对应着 wxml 里 cax-element 的 id:

声明组件依赖

小程序中显示效果:

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

在来一个复杂的例子，用 SVG 绘制 Omi 的 logo:

小程序中显示效果:

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

在 omip 和 mps 当中使用 cax 渲染 svg，你可以不用使用 htm。比如在 omip 中实现上面两个例子：

> 需要注意的是在 omip 中传递的最后一个参数不是 this，而是 this.$scope。

在 mps 中，更加彻底，你可以单独创建 svg 文件，通过 import 导入。

所以总结一下:

*  你可以在 mps 中直接使用 import 的 SVG 文件的方式使用 SVG
 *  你可以直接在 omip 中使用 JSX 的使用使用 SVG
 *  你可以直接在原生小程序当中使用 htm 的方式使用 SVG

这就完了？远没有，看 cax 在小程序中的这个例子：

![640?wx\_fmt=gif][640_wx_fmt_gif]

详细代码:

再试试著名的 SVG 老虎:

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

path 太长，就不贴代码了，可以通过本地址查看：https://github.com/Tencent/omi/blob/master/packages/cax/pages/tiger/index.js

就这么多？未完待续...，后续补充:

## pasiton 标签 ##

pasiton 提供了两个 path 和 颜色 相互切换的能力，最常见的场景比如 menu 按钮和 close 按钮点击后 path 的变形。

## 线性运动 ##

这里举一个在 mps 中使用 SVG 的案例:

效果如下:

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

## 组合运动 ##

效果如下:

![640?wx\_fmt=gif][640_wx_fmt_gif 2]

## 其他 ##

*  vscode 安装 lit-html 插件使 html内容 高亮
 *  还希望小程序 SVG 提供什么功能可以开 issues告诉我们，评估后通过，我们去实现！
 *  Cax SVG Github
 *  参考文档：http://tutorials.jenkov.com/svg/index.html

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 3]

[640_wx_fmt_jpeg]: /images/20211220/235d259ecd1e4b1ea0a34aa93612a388.png
[640_wx_fmt_jpeg 1]: /images/20211220/223c923ff05d460d9aec2d36f6e27dfd.png
[640_wx_fmt_gif]: /images/20211220/968d67cbd8b24b78b25435bf6238cd4f.png
[640_wx_fmt_jpeg 2]: /images/20211220/fc10770149524bb7af14280123a1797f.png
[640_wx_fmt_gif 1]: /images/20211220/3578ca1ac69540dfa47f39c9388d7b56.png
[640_wx_fmt_gif 2]: /images/20211220/bde82451b1544798b49d72ed8c1dc759.png
[640_wx_fmt_jpeg 3]: /images/20211220/ee408b84171246c29483eabe6853bc7f.png