svg sprite的学习笔记（1）


这里写自定义目录标题

  • 什么是SVG
  • 前端icon图标技术有哪些
    • css sprite
        • 优点
        • 缺点
    • iconfont
        • 优点
        • 缺点
    • svg sprite
        • 优点
  • 如何使用svg
    • 直接内联引入
    • 使用img标签引入
    • css引入
    • 使用iframe引入
  • 使用svg sprite
    • symbol元素和use元素
        • 使用内部svg
        • 使用外部svg
  • 参考文献

什么是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文件中插入

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

使用img标签引入

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

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

css引入

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

1
2
3
.test-svg {
    background-image: url('svg/delete.svg');
}

使用iframe引入

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

1
2
3
<div class="del">
    &lt;iframex class="icon" src="svg/delete.svg" frameborder="0">&lt;/iframex&gt;
</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标签中编辑代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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中使用：

1
2
3
<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>

注意：这里要在服务器环境下运行，否则会报错

参考文献

[1]: 张鑫旭：svg sprite技术介绍
[2]: svg使用简介
[3]: svg使用方法总结