分类 - SVG相关
点点iOS项目本身功能较多，导致应用体积也比较大。但是手机淘宝集成时对插件包大小有要求。因此点点iOS团队使用了一些方法来缩小插件包体积，比如部分业务只放在独立版、图片压缩（PNG大图转成JPG，ImageAlpha与ImageOptim对PNG图片压缩）、部分大图安装后从网络下载。近期小虎提出使用IconFont技术减小图片体积，让我在这这方面做了一些研究。最终将IconFont应用在iOS
什么是Iconfont
我们通常看到的图标都是以图片形式集成到项目中使用，而 Iconfont 是一套字体图标，和我们使用自定义字体的方式是一样的，并且它是一种矢量图标。
计算机中显示的图形一般分为两类---位图和矢量图，我们平常使用的JPEG、PNG等图片都是位图格式，是一种由像素来表示的图像，而矢量图是由点、直线、多边形等基于数学方程的几何图元表示的图像，对比位图，矢量图具有体积小，放
一、SVG SMIL animation概览
1. SMIL是什么？
SMIL不是指「水蜜梨」，而是Synchronized Multimedia Integration Language（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。
SMIL允许你做下面这些事情：
- 动画元素的数值属性（X, Y, …）
- 动画属性变换（平移或旋转）
- 动画颜色属性
- 沿着运动路径运动
注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，呵呵，CSS3只能蹲在墙角画圈圈了！
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。
2. 强大之处是？
除了可以实现「路径动画」，SVG animation最强大的地方在于：™只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。你会发现，我勒个去，原来要实现个动画效果这么简单。什么CSS3动画，哪边凉快哪边呆着吧！
唷，不信？给你个马，看它跑不跑！
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text> <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/> </g> </svg>
如何？是不是看到了童年梦幻的旋转木马效果？ 纳尼？你没看到。请检查您现在使用的浏览器，IE浏览器(包括IE11)是不支持的哦，亲~
如果不是浏览器原因，那就是缓存作祟，可以点击这里浏览器访问：horse.svg。
二、SVG animation元素及效果概览
5大元素，1统江湖。
- <set>
- <animate>
- <ani