在 Weex 中使用 SVG

weex-svg 介绍

近几年 SVG 逐渐成为前端开发的热门技术。我们可以在业务场景中构建我们的图标，以及替代部分位图，随着动画交互的普及，SVG 也成为了大家的选择之一。
今天我们给大家带来如何在 weex 项目中通过 weex-svg 来实现 SVG 的一些图形信息的展示。

我们查阅 weex-svg 的文档，可以了解它目前支持的一些元素和属性有:

基本的图形

rect 矩形
circle 圆形
path 路径
polyline 折线
polygon 几何形
line 直线
linear-gradient 线性渐变
radial-gradient 径向渐变

通用属性

fill 颜色填充
stroke 描边的颜色
stroke-width 描边的宽度

快速开始

weex-svg 在插件市场已经发布了，我们可以通过 weex-toolkit 来添加插件。
首先我们创建一个项目：

weex create svgapp

然后进入创建的项目，添加插件。

cd svgapp && npm install
# 添加 Android 应用模板，你也可以修改为iOS
weex platform add android 
weex plugin add weex-svg

然后我们编辑src/index.vue 文件，如果没有，就自行创建 index.vue。


  .page{
    flex: 1;
  }

这个时候我们就可以看到一个简单红色的矩形在界面上。接下来，我们修改 index.vue,添加一些复杂的图形

预览效果:

组件使用

Weex-svg 目前已经对 rect ，circle，path，polyline，polygon，linear-gradient，radial-gradient 的支持，考虑在下一版本继续完善，因此在使用的时候，目前只能解析上面的那些元素。

rect

绘制矩形，你可以通过 x，y 来设置矩形的起点，你可以通过 width 和 height 来设置矩形的大小，你可以通过fill 和 stroke 来进行填充和描边。

circle

绘制圆形，其中 cx 和 cy 表示圆心， r 表示半径。

line

你可以通过 line 标签来进行直线的绘制，其中 x1 和 y1 表示起点，x2 和 y2 表示终点。

polyline

绘制折线，你可以通过points 来进行路径设置，每一组数据的坐标由逗号分隔。

path

你可以使用 path 来定义任何形状，无论是直线还是曲线， path 也是 svg 中最强大的工具。你可以通过 d 命令来进行设置, 它可以绘制直线，曲线，以及复杂的贝塞尔曲线。你可以阅读MDN -D 来了解它的具体使用。一般情况下，比较复杂的 SVG 图形，我们都是通过第三方工具来完成的比如 Adobe Illustrator 来进行适量图形的制作。

fill

fill 主要用于填充不同的颜色。

stroke

而 stroke 主要用于设置描边的颜色，而描边的宽度可以通过 stroke-width来设置。

使用场景对比

SVG 是矢量图形，相对于位图，它很好地解决多机型分辨率的问题。而我们在Android开发的时候，我们需要生成多套资源文件(Android下我们会在hdpi,xhdpi,xxhdpi等目录存放图片资源)，去克服不同分辨率下图片可能失真的情况。我们可以模拟这种效果，可能一个图片在 hdpi 下的用户感知图片效果参考下图上面的图标，而将它放到 xxhdpi 的分辨率下，图片就会出现一些锯齿，非常影响用户体验，而 SVG 则可以避免这种情况。(下图为测试为设置大小为都为300px，SVG 和 PNG 的对比)

我们可以感知到下面图标在高分辨率的情况下有些模糊。我们常用的svg的场景，主要就是图标的显示和一些动画的使用。对于一些复杂的图形，首先我们的工具不一定可以导出SVG ，第二 SVG 导出的体积可能会比优化后的位图还大。而小图标对于设计师而言，他们可以方便的导出 SVG 代码，相对而言，SVG 的代码可读性强，有利于工程师进行代码使用和编辑。

这里我们做了一个测试，分别用使用 SVG 和 PNG 去制作一个带有 ICON 的底部导航条，预览效果如下:

这个是先后扫码 PNG 和 SVG 文件的演示视频:

演示视频

在这个视频中我们可以看到扫码 PNG 的测试文件后，可以感觉到底部是由白色然后显示出图标这样的效果。而第二次扫码 SVG的测试文件则不会存在这种感觉。

透过 weex debug 的功能我们可以查看手机(测试机型 HUAWEI Honor7) 的 log 信息，了解到我们渲染的时间。下面我们通过一组简单的测试来看下渲染时间对比:

单位(ms)	JS Bundle Networking Time	Render Time	Resource Networking Time
SVG	67	179	0
PNG	46	122	233

接下来我们测试比较复杂的图形，显示效果如下:

文件源码

渲染时间对比:

单位(ms)	JS Bundle Networking Time	Render Time	Resource Networking Time
SVG	47	235	0
PNG	29	119	798

从图中我们可以直观的看到，SVG 的优点在于节省了资源的请求，在 render 上时间则不占优势，原因在于我们需要花时间去进行DOM的解析然后按照命令去进行图形的绘制。
使用 weex compile 进行文件的编译后文件大小对比如图:

由此也发现了使用 SVG 一些需要注意的点，比如我们的 JS Bundle 的文件会相对增大。因此也不太建议特别复杂的图形使用 SVG 去进行绘制，这会造成性能的开销。

不过对于动态类数据的图形展示，我们也可是尝试使用SVG，比如我们前端经常使用的 d3.js ，它可以生成很多漂亮的图表，而我们可以利用 D3 这个 JS 库,通过一些 hack 技巧，结合我们的 weex-svg ，在手机上展示一些漂亮的图标，手机运行的截图如下:

使用项目 Demo

Demo 里面包含了目前所支持的特性的的案例。你只需要

 
 git clone https://github.com/weex-plugins/weex-svg.git

然后进行项目的 demo文件拷贝到你创建的项目 src 目录下, 运行 weex run android 或者 weex run ios 即可。

视频演示

小结

本文只是粗浅的介绍了 weex-svg 的基本用法，我们可以尝试在我们的 weex 项目中引进 svg ，它可以帮助我们去完成一些图标的展示和基本图形的页面展示，它还可以实现一些简单的图形动画。当然在实际使用过程中，你有事吗想法和建议也可以反馈到项目issue ，从而帮助开发者进一步完善。

扩展阅读

SVG Tutorial-Jakob Jenkov
Android 关于SVG矢量图支持
5 reasons you should be using SVG’s over PNG’s
MDN - SVG

原文同步: http://www.jackpu.com/weex-sv...