前端开发您现在的位置是:首页 > 博客日志 > 前端开发

svg icon vs iconfont,网页中如何使用svg图标?

<a href='mailto:'>微wx笑</a>的头像微wx笑 2021-07-24前端开发 1 0关键字: svg  iconfont  icon  图标  

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

在考虑兼容性IE8-浏览器器下使⽤用图标字体,否则优先考虑svg字体,svg的优势如下DkM无知人生

  • 语义好
    图标字体是⽤用伪元素来标识,⽽而svg表示很形象,同时更更改svg形状很容易DkM无知人生

  • 加载失败
    字体图标加载失败后,会显示⼀一些⾮非常奇怪的符号,内联svg在⽂文档中可以正确DkM无知人生

  • css控制
    字体图标不不好控制样式,svg可以控制到svg的部分,如边框等等DkM无知人生

  • 显示效果
    浏览器器默认字体图标是字体,所以图标是反锯⻮齿的,有时候导致字体模块,⽽而svg不不会有该问DkM无知人生

    svg 使用

  • svg as img
    <img src="kiwi.svg" alt="Kiwi standing on oval">DkM无知人生

  • svg as backgroudimgDkM无知人生

    1
    2
    background: url(logo.svg) no-repeat top left;
    background-size: contain
  • svg inlineDkM无知人生

    1
    <body></body>
  • svg base64DkM无知人生

    1
    <img src="data:image/svg+xml;base64,[data]">
  • svg Sprite
    SVG Sprite最佳实践是使⽤用symbol元素DkM无知人生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

SVG常用Style

  1. strokeDkM无知人生

  2. stroke-widthDkM无知人生

  3. fillDkM无知人生


DkM无知人生

转自:https://www.dazhuanlan.com/2020/02/26/5e5642e93a89d/DkM无知人生

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()