引入 svg 的几种方式

1. Inline SVG

行内引用，react中可以使用svgr

2. Symbol Sprite

通过symbol，将多个svg拼合成一个大的svg雪碧图，使用时利用 use

<svg style="display:none">
  <symbol id="example" viewBox="0 0 24 24" width="24" height="24">
    <!-- paths, shapes, etc. -->
  </symbol>
</svg>

<svg><use href="#example"/></svg>

可以通过svg-sprite-loader来自动处理

3. External Symbol Sprite

外部雪碧图

<svg><use href="path/to/sprite.svg#example"/></svg>

4. External Image

<img src="path/to/icon/color.svg" alt="">

5. Image + Data URI

<img src="data:image/svg+xml,..." alt="">

6. Image + Css Filter

<img src="path/to/icon.svg" style="filter: ..." alt="">

7. css Background

<div style="background-image: url(path/to/icon/color.svg);">...</div>

8. css Background + Data URI

<div style="background-image: url(data:image/svg+xml;...);">...</div>

9. css Background + CSS Filter

<div style="
  background-image: url(path/to/icon.svg); 
  filter: ...;">...</div>

10. Mask

<div style="
  -webkit-mask-image: url(path/to/icon.svg);
  mask-image: url(path/to/icon.svg);">
  ...
</div>

11. Mask + Data URI

<div style="
  -webkit-mask-image: url(data:image/svg+xml;...);
  mask-image: url(data:image/svg+xml;...);">
  ...
</div>

原文链接 cloudfour.com/thinks/svg-…