介绍

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. Intermediate_JVM 20180306 : 运行时数据区域

    Java比起C++一个很大的进步就在于Java不用再手动控制指针的delete与free,统一交由JVM管理,但也正因为如此,一旦出现内存溢出异常,不了解JVM,那么排查问题将会变成一项艰难的工作. ...

  2. Webstorm设置代码提示

    下载路径: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 本插件可以配合Webstorm设置代码提示. Mac下安装 We ...

  3. 用java集合模拟登录和注册功能

    package com.linkage.login; import java.util.HashMap;import java.util.Iterator;import java.util.Map;i ...

  4. pt-online-schema-change在线修改表结构

    工具简介 pt-osc模仿MySQL内部的改表方式进行改表,但整个改表过程是通过对原始表的拷贝来完成的,即在改表过程中原始表不会被锁定,并不影响对该表的读写操作.首先,osc创建与原始表相同的不包含数 ...

  5. PHP中call user func()和call_user_func_array()调用自定义函数小结

    call_user_func() 和 call_user_func_array(),通过传入字符串函数,可以调用自定义函数,并且支持引用,都允许用户调用自定义函数并传入一定的参数: 1.mixed c ...

  6. systemd的新特性及常见的systemd unit类型分析

    systemd概述 )systemd是一种新的linux系统服务管理器,用于替换init系统,能够管理系统启动过程和系统服务,一旦启动起来,就将监管整个系统.在centos7系统中,PID1被syst ...

  7. QWebView 与Js 交互

    我本愚钝,在网上搜了一下没找到可以运行的栗子,遂在这记录一下吧. 环境:win10 64位系统  qt 4.8.7 (mingw32) qtcreator(4.5.0) 1. 建立一个 Widgets ...

  8. MapReduce序列化及分区的java代码示例

    概述 序列化(Serialization)是指把结构化对象转化为字节流. 反序列化(Deserialization)是序列化的逆过程.把字节流转为结构化对象. 当要在进程间传递对象或持久化对象的时候, ...

  9. 2.2 vivi虚拟视频驱动测试

    学习目标:在linux终端安装xawtv,并测试vivi.ko驱动程序. 一.安装xawtv 1)ubuntu能上网情况下,使用命令:# sudo apt-get install xawtv 2)如果 ...

  10. django基本配置项-5

    目录 BASE_DIR 项目路径 DEBUG 模式 ROOT_URLCONF DATABASES 数据库设置 国际化 静态文件 访问静态文件示例 ALLOWED_HOSTS TEMPLATES 模板设 ...