一。直接在HTML代码页脚添加
先再要使用SVG的地方写上如下代码
<svg class="icon"><use xlink:href="#icon-svg"></use></svg>然后再页脚添加SVG图形代码
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs> 下面是具体的SVG图形代码
<symbol id="icon-svg" viewBox="0 0 1024 1024">
<title>svg</title>
<path d="M512 1024c-69.818182 0-134.981818-13.963636-197.818182-39.563636-60.509091-25.6-116.363636-62.836364-162.909091-109.381819C53.527273 777.309091 0 649.309091 0 512 0 230.4 230.4 0 512 0c69.818182 0 134.981818 13.963636 197.818182 39.563636 60.509091 25.6 116.363636 62.836364 162.909091 109.381819C970.472727 246.690909 1024 374.690909 1024 512c0 281.6-230.4 512-512 512z m0-961.163636C262.981818 62.836364 60.509091 265.309091 60.509091 512c0 246.690909 202.472727 449.163636 451.490909 449.163636S961.163636 761.018182 961.163636 512c0-246.690909-200.145455-449.163636-449.163636-449.163636z" p-id="1681" fill="#ffffff"></path>
<path d="M512 381.672727c-32.581818 0-62.836364-11.636364-86.109091-34.909091s-34.909091-53.527273-34.909091-86.109091c0-32.581818 11.636364-62.836364 34.909091-86.10909S479.418182 139.636364 512 139.636364c32.581818 0 62.836364 11.636364 86.109091 34.909091s34.909091 53.527273 34.909091 86.10909c0 32.581818-11.636364 62.836364-34.909091 86.109091s-53.527273 34.909091-86.109091 34.909091z m0-181.527272c-34.909091 0-62.836364 27.927273-62.836364 62.836363S477.090909 325.818182 512 325.818182c34.909091 0 60.509091-27.927273 62.836364-60.509091 0-18.618182-4.654545-34.909091-16.290909-46.545455-13.963636-13.963636-30.254545-18.618182-46.545455-18.618181zM512 891.345455c-32.581818 0-62.836364-11.636364-86.109091-34.909091s-34.909091-53.527273-34.909091-86.109091c0-32.581818 11.636364-62.836364 34.909091-86.109091s53.527273-34.909091 86.109091-34.909091c32.581818 0 62.836364 11.636364 86.109091 34.909091s34.909091 53.527273 34.909091 86.109091c0 32.581818-11.636364 62.836364-34.909091 86.109091-23.272727 20.945455-53.527273 34.909091-86.109091 34.909091z m0-183.854546c-34.909091 0-62.836364 27.927273-62.836364 62.836364 0 34.909091 27.927273 62.836364 62.836364 62.836363 34.909091 0 60.509091-27.927273 62.836364-60.509091 0-18.618182-4.654545-34.909091-16.290909-46.545454-13.963636-11.636364-30.254545-18.618182-46.545455-18.618182zM763.345455 633.018182c-32.581818 0-62.836364-11.636364-86.109091-34.909091s-34.909091-53.527273-34.909091-86.109091c0-32.581818 11.636364-62.836364 34.909091-86.109091s53.527273-34.909091 86.109091-34.909091c32.581818 0 60.509091 11.636364 83.781818 32.581818 23.272727 20.945455 34.909091 51.2 37.236363 81.454546 2.327273 32.581818-9.309091 65.163636-32.581818 88.436363-23.272727 25.6-53.527273 39.563636-88.436363 39.563637z m0-181.527273c-34.909091 0-62.836364 27.927273-62.836364 62.836364 0 34.909091 27.927273 62.836364 62.836364 62.836363 34.909091 0 62.836364-27.927273 62.836363-62.836363s-27.927273-62.836364-62.836363-62.836364zM256 633.018182c-32.581818 0-62.836364-11.636364-86.109091-34.909091S134.981818 544.581818 134.981818 512s11.636364-62.836364 34.909091-86.109091 53.527273-34.909091 86.109091-34.909091c32.581818 0 60.509091 11.636364 83.781818 32.581818 23.272727 20.945455 34.909091 51.2 37.236364 81.454546 2.327273 32.581818-9.309091 62.836364-32.581818 88.436363-23.272727 25.6-53.527273 39.563636-88.436364 39.563637z m0-181.527273c-34.909091 0-62.836364 27.927273-62.836364 62.836364 0 34.909091 27.927273 62.836364 62.836364 62.836363 34.909091 0 62.836364-27.927273 62.836364-62.836363s-27.927273-62.836364-62.836364-62.836364zM530.618182 1017.018182v-48.872727h425.890909c16.290909 0 27.927273 11.636364 27.927273 23.272727 0 13.963636-13.963636 23.272727-27.927273 23.272727H530.618182z" p-id="1682" fill="#ffffff"></path>
</symbol>
</defs>
</svg>二。CSS里面通过背景background引用svg文件
.icon{
background:url(svg.svg)
｝
三。<img>标签方式引用
<html>
<body>
<img src="svg.svg" width="100" height="100"/>
</body>
</html>四。<embed>、<object>、<iframe>标签引用
<html>
<body>
<embed src="svg.svg" type="image/svg+xml" />
<object data="svg.svg" type="image/svg+xml" />
<iframe src="svg.svg" />
</body>
</html>