icon font 使用与svg应用分享
icon font 字体概述
css3增加了@font-face属性，传统的浏览器是通过font-family来设置字体，如果系统里没有的话就用其它字体来代替。
有了@font-face属性就方便多了，可以由开发人员通过设计自定义字体来进行的，加载过程是浏览器通过下载字体，再进行渲染页面
font-face可以设置自定义自体，也可以设置自定义图片字体,font icon由此诞生。@font-face 引入生成好的字体文件 ，然后在网
页中需要使用某个图标的地方，写上对应的“文字”，那么在浏览器中就可以看到图标。
icon font 是国内第一家在线网络字体生成的工具网站，里面还有许多icon字体可以应用
Iconfont 使用起来很简单，打开它的首页，你会发现很多图标，点击你需要的图标，就会发现图标到了右上角的购物车里，选择好
了图标之后，点击购物车，即可下载下来一个 zip 包。
解压之后，会出现：demo.html, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 这几个文件。
其中 demo.html 文件是使用说明和效果，另外四个就是为兼容各个平台而转换生成的字体文件。你只需要打开 demo.html 文件
就可以看到详细的使用说明。
使用字体图标有很多好处，大体如下：
兼容性好，各个平台浏览器基本都可以使用，而且在某些低级浏览器中，效果比图片更好
相对于同效果的图片相比，体积小，减少 http 请求，增加前端性能
可维护性好，维护起来可以通过增减字体快速应用
交互性好，改变字体颜色即可改变图标的颜色，同时可以配合 CSS3 的动画、渐变、过渡、变形等属性实现
复杂的交互
然也有一些缺点，例如图标通常只有一种颜色，虽然渐变可以使其颜色更加丰富，但是兼容性没了。还有一些其他的缺点，不过对于
iconfont 这个工具来说，最大的缺点就是图标太少。国外网站iconfont字体有 fontello 可以使用。
PC端应用教程
font-face声明字体
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
定义使用的iconfont样式
.iconfont{
font-family:"iconfont";
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased; 抗锯齿显示样式，safair或chrome
-moz-osx-font-smoothing: grayscale;
display: block; 如果出现小方块，在ie7下，则加这句话
-webkit-text-stroke-width: 0.2px; pc的chrome出现严重的锯齿
}
页面引用
<i class="iconfont">!</i>
应用注意事项：
只在你确定你非常需要 @font-face的时候才使用他
将你的@font-face定义在所有的SCRIPT标签前
如果你有许多字体文件，考虑将它们分散到几个域名下。
不要包含没有使用的 @font-face声明——IE将不分它使用与否，通通加载
Gzip字体文件，同时给它们一个未来的过期头部声明
考虑字体文件的后加载，起码对于IE。
icon font制作
把制作好的AI图,另存为svg, 然后通过网址 上传, 点击加入购物车，然后在购物车中下载，会生成调用demo，进行对图片字段的调用。
以上是icon font 字体的使用，下面介绍svg的应用。
SVG的应用
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。
特点
1．任意放缩。
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2．文本独立。
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字 体，也会看到和他们制作时完全相同的画面。
3．较小文件。
总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4．超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
5．超级颜色控制。
SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
使用内联SVG
SVG作为背景图片使用
SVG作为src属性使用
内联SVG
声明一个SVG元素
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
<!-- svg stuff here -->
</svg>
创建SVG图形
circle:基础图形，基于中心点以及半径来创建的圆形。
对于circle元素，我们有3个需要指定的属性。它们是cx，cy，r。cx和cy是圆心在X轴和Y轴上的坐标，如果没有指定的话，它们的默认值为0。r为圆形的半径。一般来说，对一个圆形元素来说我们可以看到如下的标签：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"></circle>
</svg>
rect:基础图形，基于角的位置和矩形的宽度和高度来创建的矩形。
矩形的创建跟圆形的创建方式差不多。就它最基础的形式来说，我们需要为其指定左上角的的坐标x和y，以及该矩形的宽度width和高度height的值。其标签如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">
<rect x="0" y="0" width="200" height="100"></rect>
</svg>
polygon:基础图形，基于坐标点和两点相连而成的直线线段来创建的多边形。
我们可以通过在points属性上的多组 x-y 坐标点来定义我们的多边形元素。这些坐标点通过直线线段来连接。标签声明如下：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 100">
<polygon points="0,50 50,0 150,0 200,50 150,100 50,100"></polygon>
</svg>
path:万能的图形，可以用来创建任意的形状。所有基础图形都能由它来创建。
path元素是在形状处理方面最强大的元素。在path元素中，我们可以定义d属性，这个属性为我们的路径如何延伸作出了定义。d属性可以让我们通过一系列的命令来指定一个运动轨迹。我们可以用直线命令和弯曲命令来构建一些复杂的形状。但实际上，你并不希望手写贝塞尔曲线这种玩意，二是通过矢量软件来创建并输出SVG。但了解一下他们并不是什么坏事。
M x y:移动到坐标x-y
L x y:从当前位置画一条直线到坐标x—y
H x:从当前位置画一条水平线到坐标x
V y:从当前位置画一条垂直线到坐标y
Z:闭合路径
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<path d="M 0 0 H 200 V 200 H 0 Z"></path>
</svg>
fill:元素的填充颜色
fill-opacity:元素的填充颜色透明度
stroke:元素的笔画颜色
stroke-width:元素的笔画宽度
stroke-opacity:元素的笔画颜色透明度
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"></circle>
</svg>
.circle {
transition: stroke 0.3s, fill 0.3s;
}
.circle:hover {
stroke: #3399cc;
fill: #333333;
}
SVG中的结构化、分组和引用元素
使用元素分组
元素将其所有子内容分到一组。它通常有一个id属性，用来给分组命名。你给元素应用的样式也都会被应用于它所有的子元素。所以它很容易添加样式、动画、交互，甚至整个组的对象的动画。
使用重用元素
元素可以让你重用现有的元素，给你一个类似于图形编辑器中复制粘贴的功能。它可以用于重用单个元素，也可以重用一组用定义的元素。
元素有x，y，height，width属性，它通过使用xlink:href属性引用其它内容。所以如果你已经定义了一个分组，并给它赋予了id，当你想要在其它地方使用它时，你只需要在xlink:href属性中给一个URI，然后指定x和y的位置，也就是该组图像显示的原点(0, 0)。
<use x="100" y="100" xlink:href="#bird" />
<use x="100" y="100" xlink:href="path/to/animals.svg#bird" />
<use xlink:href="#bird" transform="translate(100, 100)" />
使用重用已存储元素
元素可以用来存储那些我们不想直接显示的内容。换句话说，元素就是用来定义元件，但是不直接渲染。这个隐藏的存储元件可以在后面被其它SVG元素应用及显示，这使得它非常适合用于绘制那些包含重用图像的图案。
<svg>
<defs>
<linearGradient id="gradient">
<stop offset="0%" style="stop-color: deepPink"></stop>
<stop offset="100%" style="stop-color: #009966"></stop>
</linearGradient>
</defs>
<rect stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>
使用对元素进行分组
非常适用于定义可重复使用的元件（或符号）。它也可以作为元素实例化的一个模板。而且有viewBox和preserveAspectRatio属性，它可以在引用元素定义的矩形视窗中自适应缩放。注意symbol元素每次被use元素实例化时都可以重新定义新的视窗。
SVG SMIL animation
现在这个功能正在逐步被移除，最好不要使用，它是在svg里直接加入动画元素，现在做的时候都用css3书写对元素的操作。
主要内容有
<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>`
正确的写法举例
#mouthTwo{
animation:domouth 1s linear infinite;
-webkit-animation: domouth 1s linear infinite;
}
@-webkit-keyframes domouth {
from {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes domouth {
from {
opacity: 0;
}
50% {
opacity: 1;
}
}
以前的写法
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
参考文档
snap.svg.js 制作svg动画
svg教程视频
以上仅供参考