- Inline SVG
行内引用,react中可以使用svgr
- 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
来自动处理
- External Symbol Sprite
外部雪碧图
<svg><use href="path/to/sprite.svg#example"/></svg>
复制代码
- External Image
<img src="path/to/icon/color.svg" alt="">
复制代码
- Image + Data URI
<img src="data:image/svg+xml,..." alt="">
复制代码
- Image + Css Filter
<img src="path/to/icon.svg" style="filter: ..." alt="">
复制代码
- css Background
<div style="background-image: url(path/to/icon/color.svg);">...</div>
复制代码
- css Background + Data URI
<div style="background-image: url(data:image/svg+xml;...);">...</div>
复制代码
- css Background + CSS Filter
<div style="
background-image: url(path/to/icon.svg);
filter: ...;">...</div>
复制代码
- Mask
<div style="
-webkit-mask-image: url(path/to/icon.svg);
mask-image: url(path/to/icon.svg);">
...
</div>
复制代码
- Mask + Data URI
<div style="
-webkit-mask-image: url(data:image/svg+xml;...);
mask-image: url(data:image/svg+xml;...);">
...
</div>
复制代码