方便前端使用的SVG雪碧图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

更多代码详情：github.crmeb.net/u/LXT

简介

由于SVG自身的矢量性质，不管在什么情况下，图标都很清晰，可以适应不同尺寸大小和不同分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。

CSS雪碧图和SVG雪碧图

传统的CSS图标可以分为图片图标和字体图标。

图片图标是将所有的icon整合到一张图中，然后通过定位获取其中的某个图标。优点是管理简单，网络请求少。缺点是在高像素屏幕上图标和周边内容相比会显得比较模糊；大小固定；大多数样式无法修改，单个图标使用场景有限。

相对来说字体图标会好很多。字体图标的基本原理是将Icon定义为字体图像, 在CSS中用@font-face引入Icon Font自定义字体, 再利用font-family和字符码显示出指定的图标。

@font-face {

    font-family: 'iconfont';

    src: url(/res/icon2.ttf) format('truetype');

}

.icon2 {

    font-family: 'iconfont';

}

字体图标的优点是可以修改图标的颜色和大小（font-size），网络请求少。缺点就是添加图标比较麻烦，图标放大后有可能带有锯齿。跟SVG图标相比，字体图标可以修改的样式属性也是很有限的。

相对于图片图标和字体图标，SVG图标可以保持清晰的无限伸缩、具有较多的样式可以动态更改。

SVG图标 SVG在HTML代码中是以SVG代码节点存在而不是一个图标链接的引用，这是它得以修改样式的前提。但它又不是在需要用到的地方直接将SVG代码添加上去，而是有固定的地方来管理所有的图标，只需定义每个图标的Id，在需要用到的地方直接通过Id来引用即可。这种使用方式使得图标在使用时不会被复杂的SVG代码影响到业务代码的可读性，同时最主要的是可以复用SVG图标和统一管理。

SVG可以做到这一点主要跟SVG中的两个子标签< symbol >、< use >相关。

symbol标签

在SVG雪碧图的使用中，< symbol >标签用于定义图标内容。

symbol元素是什么呢？

symbol元素用来定义一个图形模板对象，只是单单的定义不会渲染出来，定义后可以在自身所在的SVG中或者其他的SVG中通过< use >标签元素实例化图标，也就是通过< use >引用从而被渲染出来。symbol里面可以添加任意的SVG绘图元素，包括动画，但不包括< defs >，除了不显示外基本和SVG跟标签< svg >标签差不多，同样可以设置viewbox这些属性。

我们在定义图标时，每一个symbol代表一个图标。除了不显示外，整个< symbol >就是一个完成的SVG图标。

 <svg>

    <symbol id="svg-test" viewBox="0 0 26 26">

        <desc>居中对齐</desc>

        <path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>

        <path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>

        <path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>

    </symbol>

    <symbol id="svg-tool-stroke-5" viewBox="0 0 30 16" >

        <desc>描边5</desc>

        <rect x="-10" y="6" width="7" height="2"/>

        <rect x="-1" y="6" width="2" height="2"/>

        <rect x="3" y="6" width="7" height="2"/>

        <rect x="12" y="6" width="2" height="2"/>

        <rect x="16" y="6" width="7" height="2"/>

        <rect x="25" y="6" width="2" height="2"/>

        <rect x="29" y="6" width="7" height="2"/>

        <rect x="38" y="6" width="2" height="2"/>

    </symbol>

</svg>

需要留意的是，里面无法定义< defs >的，所以如果设计纹理或者渐变之类的图标样式，需要在< symbol >所在的SVG之前，再用一个SVG来定义这些填充内容。然后再引用到< symbol >中。

<svg id="defs-svg">

    <linearGradient id="linear-gradient" x1="0.122" y1="0.147" x2="0.902" y2="0.872" gradientUnits="objectBoundingBox">

      <stop offset="0" stop-color="#f4d039"/>

      <stop offset="1" stop-color="#f73"/>

    </linearGradient>

</svg>

<svg id="sym-svg">

    <symbol id="svg-tool-rect" viewBox="0 0 30 16" >

        <desc>矩形</desc>

        <rect x="0" y="0" width="24" height="14" fill="url(#linear-gradient)"/>

    </symbol>

</svg>

SVG图标的定义一定要在使用前面，也就是< symbol >

标签一定要在< use >标签前面，一般我们在文档流的头部引入图标的定义，确保整个文档流任意地方都可以用到我们定义的图标。同时将图标处理成不可见。#defs-svg 这个SVG在文档流中是不能被隐藏的，隐藏后那些渐变滤镜等效果就无法使用，所以一般设置宽高为0，层级最低。而#sym-svg可以被隐藏，隐藏后不会印象图标的使用。

use标签

< use >标签是一个引用的标签，可以通过节点id引用定义在< defs >中的元素，也可以引用< symbol >标签。

use标签有两个作用：

1、可重复调用

2、跨SVG调用

<svg>

  <defs>

    <g id="shape">

        <rect x="0" y="0" width="50" height="50" />

        <circle cx="0" cy="0" r="50" />

    </g>

  </defs>

  <use xlink:href="#shape" x="50" y="50" />

  <use xlink:href="#shape" x="200" y="50" />

</svg>

<svg width="500" height="110"><use xlink:href="#shape" x="50" y="50" /></svg>

<!-- 直接调用上一节定义好的symbol -->

<svg width="500" height="110"><use xlink:href="#svg-tool-rect" x="50" y="100" /></svg>

< use >是SVG图标使用原理中的一个关键点，我们可以把SVG图标全部定义在一个SVG中，统一处理。在需要使用的地方再重新创建一个SVG，通过use标签来调用图标。

这样做的好处是可以降低图标代码的重复使用、减少图标代码对业务代码的影响。

更改SVG图标的样式

我们通过< use >标签添加到svg中图标，可以更改SVG的一些样式，如fill，stroke等，然后通过样式继承，将属性值继承到子元素中，从而起到更改图标样式的作用。

要更改填充色，首先在symbol下定义的图标自身标签上不能带有颜色，然后在使用时我们直接改SVG的fill，这个fill的颜色值会继承到里面去。如果我们在symbol里面已经定义好了颜色的是无法在使用时更改的。

<svg>

    <symbol id="svg-test" viewBox="0 0 26 26">

        <desc>居中对齐</desc>

        <path d="M7,9h12c0.5,0,1-0.5,1-1s-0.5-1-1-1H7C6.5,7,6,7.5,6,8S6.5,9,7,9z"/>

        <path d="M19,17H7c-0.5,0-1,0.5-1,1s0.5,1,1,1h12c0.5,0,1-0.5,1-1S19.5,17,19,17z"/>

        <path d="M10,12c-0.5,0-1,0.5-1,1s0.5,1,1,1h6c0.5,0,1-0.5,1-1s-0.5-1-1-1H10z"/>

    </symbol>

</svg>

<svg fill="red">

    <use xlink:href="#svg-test"/>

</svg>

<svg fill="blue">

    <use xlink:href="#svg-test"/>

</svg>

如何更改图标中的多个颜色

根据上面描述知道，如果按照上面的方式，那能够更改的只有图标中的一种颜色。当然是可以设置多个颜色。这里使用到css的自定义属性 CSS Custom Properties

需要对< symbol >里面的图标代码进行更改，将图形的颜色设置为fill: var(–*[, default])的形式。

<symbol id="icon-flag" width="150" height="100" viewBox="0 0 3 2">

    <rect width="1" height="2" x="0" style="fill: var(--color0, #008d46)" />

    <rect width="1" height="2" x="1" style="fill: var(--color1, #fff)"/>

    <rect width="1" height="2" x="2" style="fill: var(--color2, #d2232c)"/>

</symbol>

定义css样式

.flag-belgium {

    --color0: #201b18;

    --color1: #f1ee3d;

    --color2: #dc352f;

}

<svg class="icon">

    <use xlink:href="#icon-flag"/>

</svg>

<svg class="icon flag-belgium">

    <use xlink:href="#icon-flag"/>

</svg>

< symbol >中的标签在获取填充色时，会先获取–color的颜色，如果颜色值不存在则获取默认色值。

这就是如何在SVG雪碧图的制作原理，主要包含两步，一步是使用定义图标模板、一步是利用添加图标。使用SVG图标最麻烦的就是在定义图标这一块，设计师一般只提供SVG图标，不会提供< symbol >代码，需要你手动去求改SVG代码，这一步比直接使用位图图标麻烦得多。当然如果有条件的话，也可以写一个脚本去自动将设计师给你的SVG图片转换成< symbol >代码。这样就省心多了。

webpack合并svg小文件，转为雪碧图

var SVGSprites = require('svg-sprite-plugin')

new SVGSprites({

    src: '../../static/vast/',

    log: 'info',

    sprites_conf: {

        'icons': {

            shape: {

                id: {

                    separator: '-'

                }

            },

            mode: {

                css: {

                    dest: config.staticPath + 'vast/css/',

                    layout: "diagonal",

                    sprite: 'sprite.svg',

                    bust: false,

                    render: {

                        css: true

                    }

                }

            }

        }

    }

})