svg的学习笔记《一》：如何使用svg sprite

最新推荐文章于 2026-05-05 11:58:10 发布

原创最新推荐文章于 2026-05-05 11:58:10 发布 · 924 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

性能优化

html5

本文深入解析SVG图标技术，包括SVG的定义、优势及其在前端开发中的应用。对比csssprite、iconfont，阐述SVG的优越性，如矢量特性、易用性及网络请求优化，并详细介绍SVG的多种引入方式及svgsprite的高效使用方法。

什么是SVG

SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称, 是一种用来描述二维矢量图形的XML标记语言. SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘

前端icon图标技术有哪些

css sprite

css雪碧图实现原理是将很多icon放在一张图片上，然后通过csss属性background-position去定位到图标

优点

1）可以减少网络请求
2）使用简单

缺点

1）管理难，如果需要删除某个图标可能导致相关的css代码都需要更改
2）无法更改图标的颜色等样式
3）高分辨率下放大图标会模糊

iconfont

字体图标的基本原理是将Icon定义为字体图像, 在CSS中用@font-face引入Icon Font自定义字体, 再利用font-family和字符码显示出指定的图标

优点

1）相较css雪碧图而言，字体图标可以和字体一样进行颜色、大小等样式的改变
2）网络请求少

缺点

1）可以改变的样式还是有限
2）添加代码较为复杂

svg sprite

这个时候，就是凸显svg的好处了，svg本质上是xml，它可以作为标签添加在html中。

优点

1）http请求少，减少网络请求
2）是矢量图，放大缩小都不会变形
3）易于用js控制，比iconfont用起来更灵活

如何使用svg

直接内联引入

svg本质上是xml标签，可以直接在html文件中插入

<div>
	<svg xmlns="http://www.w3.org/2000/svg">
    	<circle cx="100" cy="100" r="40" fill="red"></circle>
	</svg>
</div>

使用img标签引入

使用img标签引入，和引入图片无异，因此无法改变颜色等样式，这自然不是我们想要的

<div class="del">
	< img src="svg/delete.svg" />删除
</div>

css引入

css中使用background-image引入，和使用img标签引入类似

.test-svg {
	background-image: url(https://blog.csdn.net/'svg/delete.svg');
}

使用iframe引入

还可以使用iframe、embed、object等方式引入

<div class="del">
	<iframe class="icon" src="svg/delete.svg" frameborder="0"></iframe>
</div>

当然，类似于写CSS时使用style标签写在HTML内一样，内联的方式非常方便，但是在页面内直接写过多的SVG代码总感觉不太好。比如当我们要在页面的不同地方引入相同的svg图标的时候，如果都要重新复制粘贴一次svg代码，未免太过冗余，也会影响html代码的可读性。
这个时候，我们就要介绍到svg sprite了。

使用svg sprite

使用svg sprite的强大性在于：

可重复调用
可跨svg调用

symbol元素和use元素

svg就相当于一个大的舞台，symbol就相当于舞台上的一个个组件，每个组件都有一个唯一的id值。
然后便可在html中的任何位置使用use标签调用symbol定义的图标。

使用内部svg

直接在html中body标签中编辑代码：

<svg style="display: none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <symbol id="shape1">
        <!-- 第1个图标路径形状之类代码 -->
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </symbol>
    <symbol id="shape2">
        <!-- 第2个图标路径形状之类代码 -->
        <rect x="0" y="0" width="50" height="50" />
    </symbol>
    <symbol id="shape3">
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

<svg><use xlink:href="#shape1" x="50" y="50" /></svg>
<svg><use xlink:href="#shape1" x="200" y="50" /></svg>
<svg><use xlink:href="#shape2" x="50" y="100" /></svg>

一般而言，我们会将定义的svg标签设置css属性display:none，使其在html中隐藏。

使用外部svg

使用外部svg的方法和上述的差别在于，将svg定义代码合并到一个单独的文件中，比如icon.svg：

// icon.svg
<svg style="display: none" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <symbol id="shape1">
        <!-- 第1个图标路径形状之类代码 -->
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </symbol>
    <symbol id="shape2">
        <!-- 第2个图标路径形状之类代码 -->
        <rect x="0" y="0" width="50" height="50" />
    </symbol>
    <symbol id="shape3">
        <!-- 第3个图标路径形状之类代码 -->
    </symbol>
</svg>

然后在index.html中使用：

<svg><use xlink:href="/icon.svg#shape1" x="50" y="50" /></svg>
<svg><use xlink:href="/icon.svg#shape1" x="200" y="50" /></svg>
<svg><use xlink:href="/icon.svg#shape2" x="50" y="100" /></svg>