1. 首页>
  2. 腾讯云代理

有了Omi,在小程序中渲染SVG再也不慌了!

腾讯云 2019年05月14日 浏览144

    腾讯云代理 腾讯云新闻 腾讯云代理 腾讯云直播申请 游戏上云

摘要:

经过腾讯 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工程师)打造

阅读原文

相关文章

在线客服
淘宝购买
腾讯云直播申请 title=
+成为腾讯云VIP客户 腾讯云直播申请 客服电话

15818558013

0755-33940501-803

0755-33940501-808