H5新特性Svg绘图

SVG可缩放矢量图形（ScalableVector Graphics）。与我们常用的jpeg、png格式的位图格式不同，这种格式的图片在放大达到一定的倍数之后，就能看到一个个的小方块，图片整体在视觉上就模糊了，SVG格式的图片无论放大缩小都可以保证清晰度不变。

那么SVG有哪些特点呢？

1.      基于SVG的图像尺寸不限于固定的大小，可以升级到不同的现实分辨率。

2.      同一段SVG内容可以被灵活的运用在其它SVG图像中。

3.      动态交互性，利用dom的接口编程可实现响应各种高亮，声效，特效动画操作等，SVG定义了丰富的事件，可以满足动画效果的需求。

4.      文本的独立性，SVG图像中的文字独立于图像，可以被独立操作，以及被搜索引擎读取。

5.      SVG具备1600万色彩的调色板，支持ICC标准，RGB,线性填充和遮罩。

6.      SVG是基于XML的纯文本格式，通过XML传递数据，不受空间，设备，平台的限制。

SVG的应用

Svg提供了基本的图形元素，如线段，矩形，椭圆，折线等通过路径元素表现出来，基于坐标系统进行平移，伸缩，旋转等变化，通过色彩填充及滤镜对图片进行加工。并使用svg特有的动画标签实现动画效果。

实例介绍

代码图片效果：

图片

上面这段代码的意思就是定义一个svg画布宽高为100%，画一个一定规格的椭圆，由椭圆中心点开始一个放射性的渐变，并进行图片透明度的处理。

Svg图片除了用代码的形式进行编辑外，还可以使用绘图工具Adobe Illustrator 作图。因为其清晰度在放大缩小的情况下可以自适应，所以特别适合做响应式的配图，其动画效果也很好的满足了游戏开发的需求。