移动世界的尴尬
在移动设备中的网页设计，设计师需要面对不同分辨率的设备。位图资源在高分辨率屏幕里变得模糊，显得品质感不高。在pc时代我们还能将对矢量的期待寄托在Flash里，在移动时代，我们似乎没什么可选择，直到我们遇见svg。
什么是svg
SVG就是可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
svg的优势
1:矢量的
2:极其小的体量
3:超强的显示效果
4:超强的颜色控制
5:交互和智能化
美柚如何使用svg
我们来举一个例子：
下图是两个网页资源，左边是png 格式，有54kb之大。右边svg格式可以适用不同的分辨率，却只有8kb。
只是切成svg格式是不够的哦，我们希望能够更有趣。所以，将绘制的svg拖进Edge Code，我们就会看到，这几个文字的svg描点，如下图所示：
看上去很复杂，其实svg已经以一种非常友好的方式描述自己。
svg有一些预设的形状描述，可以被开发者使用和操作：
矩形<rect>
圆形<circle>
椭圆<ellipse>
线<line>
折线<poluline>
多边形<polygon>
路径<path>
我们可以看到，由于[欢度女生节]这几个字是异形的，所以被用以path来描述。在<path>这个组内的坐标点描述，完整说明了这个svg图形的描边粗细，颜色，是否填充。有了坐标点和描述讯息，我们可以对svg做更有趣的事情。
我们对svg进行了定义，确定了线段的出现时间和闭合时间，结果就像下面这样：
静态的图片一下子变得有活力了起来，当然，这只是svg动画里对沧海一粟。在简单的页面里使用svg，同时适当添加动画，就会使得页面变的很生动。除此之外，svg还是中文设计师的好帮手。因为网络字库的不健全，中文排版也困扰了中国设计师很多年。如果将标题文字导出为svg，那么在网页里也可以使用漂亮的中文字体了。再也不用担心设计效果图与开发实现的结果大相径庭的情况。
svg如此有趣，使得很多团队都在为其努力，有的通过使用svg来推广它，有些人则选择开发更好用的工具来推动svg。下面介绍一下snap.svg ，这是大名鼎鼎的Dmitry Baranovskiy开发的svg动画库，不断探索svg动画中新的可能。相信不久的将来，svg将突破硬件与浏览器的限制，为手机网页带来全新的体验。
http://snapsvg.io/
其他也很有趣：
http://codepen.io/tag/svg/
codepen中svg分类下有很多有趣的svg动画，大家可以去玩玩，总有一款适合你。
http://species-in-pieces.com/#
Specise in Pieces 是一个low-poly风格的网站，用户点击小动物之后，会变成若干三角形重新组合。体验非常好，而且很新奇。在刚看到这个网站的时候，我们会误以为其使用了svg 来描述形状，重新组合。通过研究后发现，作者使用更有趣的方式，通过绘制polygon,定义区域内坐标点的位置和动画来实现切换。
http://codepen.io/golhoon/pen/BNvXMG
此处有实现的方式，与大家分享。
今天的内容到此结束，期待下次与你再见。