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> ...
随机推荐
- Notes 20180308 : 语句
在讲解流程控制语句之前,我们先来说一下语句的问题.Java中的语句分为声明和赋值语句,条件和循环语句,调用和返回语句:我们之所以每两个放在一起是有深意的,我们大致将语句分为这三块,并以此为纲来说一下, ...
- redis主从架构的搭建
本项目采用主从架构,一主两从一个哨兵.在x.x.x.69上部署主节点,在70上部署从节点1和哨兵节点,在71上部署从节点2. 准备: 1.首先上传redis文件到三台linux上,目录/home/sy ...
- JavaScript-比较运算符
一.概述 > 大于运算符 < 小于运算符 <= 小于或者等于运算符 >= 大于或者等于运算符 == 相等运算符 === 严格相等运算符 != 不相等运算符 !== 严格不相等运 ...
- [MYSQL][2]索引
创建表时创建索引: 在已经存在的表上创建索引: 方法一 方法二 删除索引:
- 【Linux】Linux 的慢动作基础
了解一下刀片服务器: 刀片服务器是指在高标准度的机架式机箱内插装多个卡式的服务器单元,是一种实现HAHD的低成本服务器平台,其中每一片刀片实际上就是一块系统主板. Linux: Linux操作系统构成 ...
- Filter(过滤器)与Interceptor(拦截器)的区别
Filter能够对请求和响应资源进行拦截: Interceptor只针对请求进行拦截 在 Struts2中: (1)拦截器是基于java反射机制的,而过滤器是基于函数回调的. (2)过滤器依赖与ser ...
- 解决 LLVM 错误 cannot specify -o when generating multiple output files
Xcode 9 使用 LLVM 混淆器会提示错误: clang: error: cannot specify -o when generating multiple output files 通过对比 ...
- mongodb副本集的docker化安装
1. 定义 一般只要生产环境就需要考虑冗余设计,保证在某一台服务器由于某种原因宕机后服务还可以正常运行. mongo副本集是一组服务器,其中有一个主服务器(primary),用于处理客户端请求:还有多 ...
- redis集群部署步骤
1.yum 安装依赖 yum install gcc unzip wget 2.编译安装redis,编译安装的目的是源码包内包含了接下来创建redis集群所需要的 redis-trib.rb脚本 ma ...
- PHP Mysql字符集utf8mb4支持Emoji表情
项目开发中经常会遇到用户在评论或者发表文章的时候会打一些表情在里面,如果我们在开发中不去做一些处理的话,表情会出不来的,甚至是报错,下面简单介绍处理方式.原文地址:小时刻个人博客:http://sma ...