SVG Sprite 使用Symbol元素制作ICON
介绍
SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方式进行制作ICON和让ICON实现页面显现。
SVG有什么优势和特点?
SVG方法与这两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用方法和步骤
在之前关于字体图标的三两事当中我们讲过了Unicode和Font class获取连接地址并进行字体设置的方法,我们回到阿里图标库,在筛选好了我们项目需要的图标并修改好他们的名称之后,这次选择symbol,并复制他的代码。

第一步:拷贝项目下面生成的symbol代码到HTML文件head的<script></script>
中://at.alicdn.com/t/font_732020_vyfui00rk3.js
这里同样跟之前一样,要注意协议,最好直接在前面加上https。
即
<script src="https://at.alicdn.com/t/font_732020_vyfui00rk3.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
例如我们要加入一个之前命名为icon-weixin1的微信图标,就在body中加入这段<svg></svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin1"></use>
</svg>
Demo
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://at.alicdn.com/t/font_732020_vyfui00rk3.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<title> css-sprite-demo-v2 </title> </head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin1"></use>
</svg> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin2"></use>
</svg> <svg class="icon">
<use xlink:href="#icon-weibo1">333</use>
</svg> </body>
</html>
预览效果:
http://jsbin.com/qovicalote/edit?html,output

SVG Sprite 使用Symbol元素制作ICON的更多相关文章
- 使用SVG中的Symbol元素制作Icon【摘转】
以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...
- SVG & Sprite & symbol & use
SVG & Sprite & symbol & use https://www.zhangxinxu.com/sp/svgo/ https://www.zhangxinxu.c ...
- SVG Sprite 入门(SVG图标解决方案)
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
- 快速上手制作Icon Font
现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题, ...
- REM+SVG Sprite,web app案例
REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...
- [翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
- [翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- 使用css3和伪元素制作的一个立体导航条
使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...
随机推荐
- c# 关闭socket的标准方法
aSocket.Shutdown(SocketShutdown.Both); aSocket.Close(); c#关闭socket时,单独使用socket.close()通常会造成资源提前被释放,应 ...
- iOS:文件操作相关(18-03-23更)
0.iOS文件系统 1.工程内文件 2.文件夹管理 3.文件操作 4.NSCache 附录: 1.沙盒文件夹.文件大小 2.清除沙盒 Library / Cache 下所有数据 3.测试plist 0 ...
- NodeJ Koa2 安装使用 reeber
介绍 Koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的 ...
- #leetcode刷题之路7- 整数反转
给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1:输入: 123输出: 321 示例 2:输入: -123输出: -321 示例 3:输入: 120输出: 21 #i ...
- multiprocessing中进程池,线程池的使用
multiprocessing 多进程基本使用 示例代码1 import time import random from multiprocessing import Process def run( ...
- vue调用豆瓣API加载图片403问题
"豆瓣API是有请求次数限制的”,这会引发图片在加载的时候出现403问题,视图表现为“图片加载不出来”,控制台表现为报错403. 其实是豆瓣限制了图片的加载,我自己用了一个办法把图片缓存下来 ...
- vuejs 解决跨域访问问题
首先: config/index.js下面的proxyTable配置您的服务访问基本地址,将changeOrigin设置为true即可,然后在你需要访问接口的地方,这样使用,以下是我的工程代码(前提是 ...
- python中函数参数的引用方式
值传递和引用传递时C++中的概念,在python中函数参数的传递是变量指向的对象的物理内存地址!!! python不允许程序员选择采用传值还是传引用.Python参数传递采用的肯定是“传对象引用”的方 ...
- python 爬虫(爬取网页的img并下载)
from urllib.request import urlopen # 引用第三方库 import requests #引用requests/用于访问网站(没安装需要安装) from pyquery ...
- rubymine自动转义双引号
如果你使用rubymine在编写JSON字符串的时候,然后要一个一个\去转义双引号的话,就实在太不应该了,又烦又容易出错.在rubymine可以使用Inject language帮我们自动转义双引号 ...