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

<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('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>

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

参考资料

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

svg的学习笔记《一》：如何使用svg sprite相关推荐

HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递CSS选择 ...
五、pink老师的学习笔记——CSS精灵技术（sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
【Pygame 学习笔记】8.精灵
术语"精灵"是旧计算机和游戏机的保留.这些较旧的盒子无法以足够快的速度绘制和擦除普通图形,使其无法用作游戏.这些机器有特殊的硬件来处理需要快速动画的游戏对象.这些对象被称为&quo ...
安卓学习笔记--拥抱 SVG：苦恼于图片适配 in Android？
转载文章地址: 转自lypeer文章 http://gold.xitu.io/post/57dfe16379bc440065e85b2b 拥抱 SVG:苦恼于图片适配 in Android? 前言不 ...
SVG动画解释-学习笔记
目录 SVG简介一.SVG是什么? 二.SVG的作用三.SVG与canvas的区别四.如何使用SVG动画五.SVG属性作用 SVG动画的使用 SVG简介 svg是可缩放的矢量图,<svg ...
Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
python可视化：matplotlib学习笔记
信息可视化是数据分析的一块重要内容.这是一个探索性的过程.比如说,可以帮助我们坚定离群值,或者必要的数据转换,又或者是构建一个理想的模型.对于其他的一些领域,也可以进行web可视化.Python有许多 ...
class h5 点击后样式变化_H5学习笔记
目录什么是HTML: 头部标签 H5视频 H5音频 H5拖放 H5Web存储 H5应用缓存 H5画布SVG H5画布canvas 全局属性: 事件属性: 颜色.样式和阴影线条样式矩形路径转换 ...
haxe php,Haxe学习笔记(一) Haxe：一次编码全平台编译的神话
Haxe学习笔记(一) Haxe:一次编码全平台编译的神话一 Haxe是什么? Haxe是开源的,它作为一门语言,基础语法和ActionScript3基本一致.所以任何做过Flash开发的人都可以很 ...

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

目录