SVG（可缩放矢量图形）

    SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

 

    图片的数字化。将图片存储为数据有两种方案。其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是RGB。根据需要，编码后的信息可以有不同的位(bit)数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合，它的大小自然就等于点数乘以位深。位图格式是一个庞大的家族，包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP。

第二种方案为矢量图。它用抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据。它将图片看成各个“对象”的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案（如用梯度描述渐变色）。比如一张留影，被看成各个人物和背景中各种景物的组合。这种更高级的视角，正是人类看世界时在意识里的反映。矢量图格式有CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML等等。

矢量图中简单的几何图形，只需要几个特征数值，就可以确定。比如三角形，只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述它的函数已知的曲线也只需要几个参数就能够确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何图案，则需要包含组成线条的各个像素的数据。除了大大节省空间，矢量图还具有完美的伸缩性。因为记录的是图形的特征，图形的尺寸任意变化时，都只是做着相似变换，不会出现模糊和失真。相反位图的图片放大到超出原有大小时，各个像素点之间出现空缺，即使用某种算法填充，也会出现模糊锯齿等现象，不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。而位图则适合于没有明显规律的、颜色丰富细腻的图片。

 

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 <rect>
• 圆形 <circle>
• 椭圆 <ellipse>
• 线 <line>
• 折线 <polyline>
• 多边形 <polygon>
• 路径 <path>

什么是SVG？

　　SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
　　SVG 用来定义用于网络的基于矢量的图形
　　SVG 使用 XML 格式定义图形
　　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
　　SVG 是万维网联盟的标准
　　SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

 Canvas 和 SVG 的区别：
　　SVG
　　　　SVG 是一种使用 XML 描述 2D 图形的语言。
　　　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
　　　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
　　　　特点：
　　　　 　　不依赖分辨率
　　　　 　　支持事件处理器
　　　　 　　最适合带有大型渲染区域的应用程序（比如谷歌地图）
　　　　　　 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
　　　　 　　不适合游戏应用
　　Canvas
　　　　Canvas 通过 JavaScript 来绘制 2D 图形。
　　　　Canvas 是逐像素进行渲染的。
　　　　在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
　　　　特点：
　　　    　　依赖分辨率
　　　　 　　不支持事件处理器
　　　　　　 弱的文本渲染能力
　　　　　　 能够以 .png 或 .jpg 格式保存结果图像

　　　　 　　最适合图像密集型的游戏，其中的许多对象会被频繁重绘

 

<svg width="100%" height="100%"  >
    <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
 
<img src="kiwi.svg" alt="新西兰鹬鸵鸟">
<a href="/" class="logo" style="background: url(kiwi.svg); display: block;text-indent: -9999px; 100px;height: 82px;background-size: 100px 82px;"> 新西兰 </a>

 图标字体：

 

使用字体图标的优势

字体图标除了图像清晰度之外，比位图还有哪些优势呢。

适用性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍大小的图像）要小。一旦图标字体加载了，你的图标就会马上渲染出来，不需要下载一个图像。

可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。

灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性：网页字体支持所有现代浏览器，包括IE低版本。

弊端：

1、浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同，可能会导致显示效果不同。

2、Icon Font 作为一种字体，Icon 显示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响，调整起来很不方便。

3、使用上存在不便。首先，加载一个包含数百图标的 Icon Font，却只使用其中几个图标，非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题

4、为了实现最大程度的浏览器支持，可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。如果是自己制作的话，可能要头疼死

参考：

http://www.w3school.com.cn/svg/index.asp

https://icomoon.io/

http://www.iconfont.cn/