介绍

SVG是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。之前写过两篇关于CSS icon在页面显示的博客，后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方式进行制作ICON和让ICON实现页面显现。

SVG有什么优势和特点？

SVG方法与这两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 兼容性较差，支持 ie9+，及现代浏览器。
  • 浏览器渲染svg的性能一般，还不如png。

使用方法和步骤

在之前关于字体图标的三两事当中我们讲过了Unicode和Font class获取连接地址并进行字体设置的方法，我们回到阿里图标库，在筛选好了我们项目需要的图标并修改好他们的名称之后，这次选择symbol，并复制他的代码。

 
选择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

我们可以清楚的看到及时ICON被怎样放大，都不会失真和出现锯齿。

SVG Sprite 使用Symbol元素制作ICON的更多相关文章

  1. 使用SVG中的Symbol元素制作Icon【摘转】

    以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...

  2. SVG & Sprite & symbol & use

    SVG & Sprite & symbol & use https://www.zhangxinxu.com/sp/svgo/ https://www.zhangxinxu.c ...

  3. SVG Sprite 入门（SVG图标解决方案）

    关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...

  4. 快速上手制作Icon Font

    现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题, ...

  5. REM+SVG Sprite，web app案例

    REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  6. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  7. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  8. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  9. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

随机推荐

  1. ARM Linux 大小核切换 ——cortex-A7 big.LITTLE 大小核 切换代码分析

    ARM Linux 大小核切换——cortex-A7 big.LITTLE 大小切换代码分析 8核CPU或者是更多核的处理器,这些CPU有可能不完全对称.有的是4个A15和4个A7,或者是4个A57和 ...

  2. sql修改数据库中表的结构

    ALTER TABLE TableName1 ADD | ALTER [COLUMN] FieldName1 FieldType [(nFieldWidth [, nPrecision])] [NUL ...

  3. Python 学习笔记（十一）Python语句（三）

    While 循环语句 用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务. 语法: while 判断条件: 执行语句…… 执行语句可以是单个语句或语句块.判断条件可以是任何 ...

  4. jQuery mouseove和mouseout事件不断触发

    关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题 html <ul class="bo ...

  5. 微信小程序之数据传递

    本文主要介绍,页面跳转间的数据传递.传递的数据类型主要有1,基本数据类型:2,对象:3,数组集合: 先告诉你,本质上都是string类型传递.但是对于对象和数组集合的传递需要小小的处理一下传递时的数据 ...

  6. 【TOJ 3600】Fibonacci II （对数+斐波那契通项式）

    描述 2007年到来了.经过2006年一年的修炼,数学神童zouyu终于把0到100000000的Fibonacci数列(f[0]=0,f[1]=1;f[i] = f[i-1]+f[i-2](i> ...

  7. MySQL必知必会 读书笔记四：数据过滤

    过滤数据 WHERE 只检索所需数据需要指定搜索条件( search criteria) ,搜索条件也称为过滤条件( filtercondition) . 在SELECT语句中,数据根据WHERE子句 ...

  8. Vue路由钩子 afterEach beforeEach区别

    ​ vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path ...

  9. 支付宝H5、APP支付服务端的区别（php）

    php支付宝H5和APP支付1.准备工作需要前往 蚂蚁金服开放平台申请https://openhome.alipay.com/developmentDocument.htm 2.大致流程1.用户添加商 ...

  10. 学习新框架laravel4 第一天(- -! 新公司版本使用的4，所以还要重新学习)

    路由使用: //根目录 Route::get('/', function() { return View::make('hello'); }); 自定义模板: /app/views/home/inde ...