在考虑兼容性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 <span class="line" style="height: 20px;">1</span><br><span class="line" style="height: 20px;">2</span><br>

  1 <span class="line" style="height: 20px;"><span class="selector-tag">background</span>: <span class="selector-tag">url</span>(<span class="selector-tag">logo</span><span class="selector-class">.svg</span>) <span class="selector-tag">no-repeat</span> <span class="selector-tag">top</span> <span class="selector-tag">left</span>;</span><br><span class="line" style="height: 20px;"><span class="selector-tag">background-size</span>: <span class="selector-tag">contain</span></span><br>

• svg inline6jv无知

  1 <span class="line" style="height: 20px;">1</span><br>

  1 <span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">body</span>></span><span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">body</span>></span></span><br>

• svg base646jv无知

  1 <span class="line" style="height: 20px;">1</span><br>

  1 <span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">img</span> <span class="attr">src</span>=<span class="string" style="color: rgb(113, 140, 0);">"data:image/svg+xml;base64,[data]"</span>></span></span><br>

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

1 <span class="line" style="height: 20px;">1</span><br><span class="line" style="height: 20px;">2</span><br><span class="line" style="height: 20px;">3</span><br><span class="line" style="height: 20px;">4</span><br><span class="line" style="height: 20px;">5</span><br><span class="line" style="height: 20px;">6</span><br><span class="line" style="height: 20px;">7</span><br><span class="line" style="height: 20px;">8</span><br><span class="line" style="height: 20px;">9</span><br><span class="line" style="height: 20px;">10</span><br><span class="line" style="height: 20px;">11</span><br><span class="line" style="height: 20px;">12</span><br><span class="line" style="height: 20px;">13</span><br><span class="line" style="height: 20px;">14</span><br>

1 <span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">svg</span> <span class="attr">xmlns</span>=<span class="string" style="color: rgb(113, 140, 0);">"<a href="/link.php?target=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22" target="_blank" rel="noopener noreferrer nofollow">http://www.w3.org/2000/svg"</a></span> <span class="attr">style</span>=<span class="string" style="color: rgb(113, 140, 0);">"display: none;"</span>></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">symbol</span> <span class="attr">id</span>=<span class="string" style="color: rgb(113, 140, 0);">"circle-cross"</span> <span class="attr">viewBox</span>=<span class="string" style="color: rgb(113, 140, 0);">"0 0 32 32"</span>></span></span><br><span class="line" style="height: 20px;">    <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">title</span>></span>circle-cross icon<span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">title</span>></span></span><br><span class="line" style="height: 20px;">    <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">path</span> <span class="attr">d</span>=<span class="string" style="color: rgb(113, 140, 0);">""</span>/></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">symbol</span>></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">symbol</span> <span class="attr">id</span>=<span class="string" style="color: rgb(113, 140, 0);">"circle-check"</span> <span class="attr">viewBox</span>=<span class="string" style="color: rgb(113, 140, 0);">"0 0 32 32"</span>></span></span><br><span class="line" style="height: 20px;">    <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">title</span>></span>circle-check icon<span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">title</span>></span></span><br><span class="line" style="height: 20px;">    <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">path</span> <span class="attr">d</span>=<span class="string" style="color: rgb(113, 140, 0);">""</span>/></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">symbol</span>></span><span class="comment" style="color: rgb(142, 144, 140);"><!-- .... --></span></span><br><span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">svg</span>></span></span><br><span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">svg</span> <span class="attr">class</span>=<span class="string" style="color: rgb(113, 140, 0);">"icon"</span>></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"><<span class="name">use</span> <span class="attr">xlink:href</span>=<span class="string" style="color: rgb(113, 140, 0);">"#circle-cross"</span>></span></span><br><span class="line" style="height: 20px;">  <span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">use</span>></span></span><br><span class="line" style="height: 20px;"><span class="tag" style="color: rgb(200, 40, 41);"></<span class="name">svg</span>></span></span><br>

SVG常用Style

1. stroke6jv无知

2. stroke-width6jv无知

3. fill6jv无知

6jv无知

转自：https://www.dazhuanlan.com/2020/02/26/5e5642e93a89d/6jv无知

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

很赞哦！ (21) 赏 有话说 (0)