svg icon vs iconfont，网页中如何使用svg图标？

微wx笑 2021-07-24【前端开发】 4 0关键字： svg iconfont icon 图标

在考虑兼容性IE8-浏览器器下使⽤用图标字体，否则优先考虑svg字体，svg的优势如下语义好图标字体是⽤用伪元素来标识，⽽而svg表示很形象，同时更更改svg形状很容易加载失败字体图标加载

在考虑兼容性IE8-浏览器器下使⽤用图标字体，否则优先考虑svg字体，svg的优势如下6jv无知

语义好
图标字体是⽤用伪元素来标识，⽽而svg表示很形象，同时更更改svg形状很容易6jv无知
加载失败
字体图标加载失败后，会显示⼀一些⾮非常奇怪的符号，内联svg在⽂文档中可以正确6jv无知
css控制
字体图标不不好控制样式，svg可以控制到svg的部分，如边框等等6jv无知
显示效果
浏览器器默认字体图标是字体，所以图标是反锯⻮齿的，有时候导致字体模块，⽽而svg不不会有该问6jv无知
svg 使用
svg as img
<img src="kiwi.svg" alt="Kiwi standing on oval">6jv无知

svg as backgroudimg6jv无知

1 2	background: url(logo.svg) no-repeat top left; background-size: contain

svg inline6jv无知
1
<body></body>

svg base646jv无知

1	<img src="data:image/svg+xml;base64,[data]">

svg Sprite
SVG Sprite最佳实践是使⽤用symbol元素6jv无知

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="circle-cross" viewBox="0 0 32 32">
    <title>circle-cross icon</title>
    <path d=""/>
  </symbol>
  <symbol id="circle-check" viewBox="0 0 32 32">
    <title>circle-check icon</title>
    <path d=""/>
  </symbol><!-- .... -->
</svg>
<svg class="icon">
  <use xlink:href="#circle-cross">
  </use>
</svg>