方便前端使用的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標籤有兩個做用：

一、可重複調用

二、跨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 >代碼。這樣就省心多了。