为什么要⽤SVG？svg与iconfont、图⽚多维度对⽐
SVG在既能满⾜现有图⽚的功能的前提下，⼜是⽮量图，在可访问性上⾯也⾮常不错，并且有利于SEO和⽆障碍，在性能和维护性⽅⾯也⽐icon font要出⾊许多，总之⼤家可以根据项⽬实际情况去尝试使⽤。
SVG是什么？
可缩放⽮量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语⾔（XML），⽤于描述⼆
维⽮量图形的图形格SVG是⼀种可缩放⽮量图形
式。SVG由W3C制定，是⼀个开放标准。
简单的理解，它是图形的另⼀种格式例如它和常见的图⽚格式.png、.jpg、.gif等是⼀类。
SVG发展历程
2001年9⽉4⽇，发布SVG 1.0
2003年1⽉4⽇，发布SVG 1.1
2003年1⽉14⽇，推出SVG移动⼦版本：SVG Tiny和SVG Basic
2008年12⽉22⽇，發布SVG Tiny 1.2
2011年8⽉16⽇，發布SVG 1.1（第2版），成为W3C⽬前推荐的标准
W3C⽬前仍正在研究制定SVG 2
他在2001年就已经被加⼊到W3C的标准中去了，历时这么久终于到了该翻⾝的时候了。
它和传统图⽚格式有什么不同？
1. 兼容现有图⽚能⼒前提还⽀持⽮量
SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能⼒，它还具备了传统图⽚没有的⽮量功能，在任何⾼清设备都很⾼清。点击查看下⾯这张SVG图形：
这样⼀张⾼质量的⽮量图⽚它的质量仅仅只有：
2. 可读性好，有利于SEO与⽆障碍
由于SVG采⽤的是XML语法，图形的⾥⾯的⽂本内容可以直接被浏览器，搜索引擎SEO和⽆障碍读屏软件读取，具体⽤法如下代码设置title与desc标签即可：
与icon font对⽐
1. 渲染⽅式不同
icon font采⽤的是字体渲染，icon font在⼀倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的，SVG上⾯我说过它是图形所以在浏览器中使⽤的是图形渲染，所以SVG却没有这种问题，请看下图对⽐：
2. icon font只能⽀持单⾊
icon font做为字体⽆法⽀持多⾊图形，这就对设计造成了许多限制，因此这也成为了icon font的⼀个瓶颈。svg矢量图导入ppt
3. ion font可读性不好
icon font主要在页⾯⽤Unicode符号调⽤对应的图标，这种⽅式不管是浏览器，搜索引擎和对⽆障碍⽅⾯的能⼒都没有SVG好
SVG的制作成本与维护成本
⽬前制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等，⽤AI画图对设计师是否会产⽣额外成本，我还专门咨询了组内⼏个设计师：“⽤PS画⼀个图形和⽤AI画⼀个图形的所需时间是⼀样”（来⾃我组峰哥，华D哥，登哥，丹哥原话），AI做好后直接导出成SVG格式给前端同学即可使⽤。相⽐制作字体包要步骤简单许多。
在维护性⽅⾯：做成SVG对设计师之前的⼯作量也有⼀定的提升，过去他们同⼀个图不同尺⼨在PS输出都需要调整⼀次图形，因为如果直接等⽐例缩放图形尺⼨，会出现图⽚有锯齿。但是⽤SVG以后，不同尺⼨的控制都有前端同学直接调整SVG宽⾼参数就能实现不同尺⼨切换，且不会有
锯齿。
SVG的性能测试
性能应该是⼤家最关注的为题了，为了测试的可靠性，我在icomoon挑选了 __491个__ 免费ICON，分别⽣成了svg图标和icon font在Chrome Timeline做了测试，测试内容分别对demo页⾯491图标的 __Loading、Rendering、Painting__ 这三个指标做了测试
1. svg与ion font性能对⽐
Rendering项基本上是碾压了icon font，数据如下：
（1）结果svg整体是的Rendering项基本上是碾压了icon font
页⾯图标数量：491个
上图SVG案例中我⽤了两种不同引⽤⽅式，⼀种是在页⾯直接inline svg⽅式插⼊的⽅法和⽤svg sprite合并后引⽤图标的两种，结果显⽰svg sprite的性能是最⾼的。
（2）⼤批量的测试结果SVG性能已经⽐较有保证了，但实际项⽬中⼀个页⾯不可能会存在这么多图标，我们按正常页⾯出现图标10-30个这个区间， _取15个图标为中间值
取15个图标为中间值在进⾏⼀次测试看看，结果如何：
页⾯图标数量：15个
Rendering的渲染结果和之前差不多，icon font所⽤时间依旧⽐svg icon要多很多，但是inline svg和svg sprite两种不同⽤法之间的差异却Rendering
Rendering的时间是差不多的。
变得⾮常⼩，⼏乎Rendering
2. svg sprites与png sprites性能对⽐
这个测试通过将svg sprites⽣成对应的1倍图png sprites来进⾏测试，图标在页⾯的实际⼤⼩是相等的。
测试图标数量：491个
Rendering也⽐图⽚要长很多，但最终两者之间综合所消耗时间差不多
⽂件⼤⼩上⾯svg sprites⼤了png sprites将近⼀倍，Rendering
测试图标数量：15个
Rendering也⽐图⽚要长很多，但最终两者之间综合所消耗时间差不多。
⽂件⼤⼩svg sprites与png sprites差不多，Rendering
SVG动画
SVG还有⼀项动画的能⼒，⽬前在许多H5中的有趣动画很多都是⽤SVG做的。
兼容性
关于兼容性，在咱祖国⼀直是⼀个⽐较伤感的话题，不过从IE9开始已经开始兼容SVG了，安卓3.X开始局部⽀持。
总结
通过上⾯所述，SVG在既能满⾜现有图⽚的功能的前提下，⼜是⽮量图，在可访问性上⾯也⾮常不错，并且有利于SEO和⽆障碍，在性能和维护性⽅⾯也⽐icon font要出⾊许多，总之⼤家可以根据项⽬实际情况去尝试使⽤。
下⾯介绍⼏个国外已经全栈使⽤SVG的站点：
digitalocean
github

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。