现在出现了不同型号的手机,ipad.电脑，开发上对分辨率的要求日益严格。我们需要更多的关注各种设备的阅读性和显示效果。我们希望能在不同的时间，不同的地方都能传递非常棒的客户体验。
我们需要在开发时，不同的设备准备不同分辨率的设计稿。一套在普通屏幕上显示，一套在高清屏幕上显示。
为了解决屏幕分辨率对图标影响的问题，字体图标即icon font顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言，使用字体来制作图标可以不受于屏幕分辨率的影响，这对于现在各种分辨率屏幕的移动互联网时代，比起用图片来说确实有很大的优势。所以现在在web开发中，使用字体来制作icon应用的也越来越多。
SVG的优势：
随着高清屏幕的普及，相比使用png等位图而言，使用SVG等矢量图形是一种全新的设计方式。更重要的是相比位图而言，SVG有着无可比拟的优势。这里我总结一下SVG具体的一些优势：
1.相对于png等位图而言，使用SVG的矢量图是一种全新的设计方式，更重要的是svg有很多优势，
SVG是矢量图文件，可以随意改变大小，同时不影响图标质量。
可以用CSS样式自由定义图标颜色，尺寸等。
所有的SVG可以全部放在一个文件中，节省HTTP请求。
使用SML.CSS或者js可以制作有交互动画的效果。
犹豫SVG也是一种XML文件，所以可以使用gzip的方法把文件压缩到很小。
SVG使用方法
在web开发中，SVG主要有下面几种使用方法：
1.使用img和object标签直接引用svg。这种方法的缺点主要在于要求每个图标都单独保存成一个SVG文件，使用时也是单独请求的，增加了HTTP请求。
2.Inline SVG，直接把SVG写入 HTML 中，这种方法简单直接，而且具有非常好的可调性。Inline SVG 作为HTML文档的一部分，不需要单独请求。临时需要修改某个图标的形状也比较方便。但是Inline SVG使用上比较繁琐，需要在页面中插入一大块SVG代码不适合手写，图标复用起来也比较麻烦。
3.SVG Sprite。这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
