SVG图标使用心得
什么是SVG？
SVG（可缩放矢量图形）允许矢量图形显示在浏览器中。SVG正在迅速成为网络图标和动画的新标准。它们不仅提供出色的缩放，而且它们通常比图标字体更快速，更可靠地呈现。由于矢量图形完全由代码组成，因此不必从大型外部文件导入它们。它们的尺寸也比典型的JPG或PNG以及大多数图标字体库小得多。
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
SVG图标的特点
相比icon font优势
- font-icon比png 图标的优点是矢量（任意缩放也不失真），可通过css样式控制大小颜色，体积更小（可被缓存）。
- icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好。
- icon font做为字体无法支持多色图形，这就对设计造成了许多限制，因此这也成为了icon font的一个瓶颈。
- 虽然SVG和图标字体都是基于矢量的，但浏览器会将icon font解释为文本，这意味着它们会受到抗锯齿的影响。因此，SVG往往看起来比icon font更锐利。
- 图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取
- 因为Iconfont的支持，使用Iconfont制作font-icon效率也大大提高。
劣势
- SVG 做的图标在IE9+的浏览器渲染效果相当的差，所以在IE下我们我们不使用SVG ICON，我们可以将SVG转成一倍的png图片来进行替代。
SVG图标制作方法
目前制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等。
SVG图标使用方法
使用Iconfont制作图标后导出的资源文件支持三种使用方式，分别是unicode，font-clss 和 symbol。
标签：图标,浏览器,SVG,矢量,font,心得,icon 来源： https://blog.csdn.net/ReyondYY/article/details/116193880
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。