# 2019年是時候使用svg-sprite做爲網站icon圖標的主流了！！！

·序言

爲何選擇svg 做爲網站的圖標系統首選格式？

1.可伸縮矢量圖形,圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失;

2.是萬維網聯盟的標準,是 W3C 推薦標準

---

1.什麼是SVG？

度娘描述： 可縮放矢量圖形是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。

svg英文全稱爲( Scalable Vector Graphics)

簡單的理解，它是圖形的另外一種格式,和常見的圖片格式.png、.jpg、.gif等是一類。

---

2.SVG 的歷史和優點

SVG發展歷程

• 年9月4日，發佈SVG 1.0
• 2003年1月4日，發佈SVG 1.1
• 2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic
• 2008年12月22日，發佈SVG Tiny 1.2
• 2011年8月16日，發佈SVG 1.1（第2版），成爲W3C目前推薦的標準
• W3C目前仍正在研究制定SVG 2

與其餘圖像格式相比，使用 SVG 的優點在於：

• SVG 可被很是多的工具讀取和修改（好比記事本）
• SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的
• SVG 圖像可在任何的分辨率下被高質量地打印
• SVG 可在圖像質量不降低的狀況下被放大
• SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖）
• SVG 能夠與 Java 技術一塊兒運行
• SVG 是開放的標準
• SVG 文件是純粹的 XML

---

3.svg瀏覽器兼容性問題？

一圖勝千言 足夠勝任icon系統了

---

4.svg VS傳統圖片格式有什麼不一樣呢？

1. 兼容現有圖片能力前提還支持矢量

   SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具有了傳統圖片沒有的矢量功能，在任何高清設備都很高清。

2. 可讀性好，有利於SEO與無障礙

   因爲SVG採用的是XML語法，圖形的裏面的文本內容能夠直接被瀏覽器，搜索引擎SEO和無障礙讀屏軟件讀取，具體用法以下代碼設置title與desc標籤便可

   

5.svg VS iconfont圖標字體？

SVG	iconfont
放大不模糊，無鋸齒	瀏覽器認爲它是文本，圖標是反鋸齒的。可能致使圖標是預期的那樣尖銳。
能控制圖標的各個部分，使用SVG特定的CSS屬性，多色圖標	經過CSS 控制大小（經過font-size）color，陰影，旋轉等。
SVG只是它的大小	經過僞元素插入，而這取決於line-height，vertical-align，letter-spacing，word-spacing，怎樣的字體字形設計（它天然有它周圍的空間嗎？它有字距信息？）。而後僞元素display類型會影響這些屬性是否有效。
瀏覽器支持SVG，攔截者不關心SVG	廣告攔截器提供徹底阻止自定義字體。部分瀏覽器會阻止圖標字體的加載，致使網站顯示不出來
語義化，圖標是小圖像。語義上<svg>寫着「我是一個形象。」	無語義

Web自1989年到2019年也算是走過了30年的歷程，Web上圖標的使用也經歷了相應的發展：

1. 最先經過img標籤來引用圖標（每一個圖標一個文件）
2. 爲了節省請求，提出了Sprites的概念，即將多個圖標合併在一塊兒，使用一個圖片文件，藉助background相關的屬性來實現圖標
3. 圖片畢竟是位圖，面對多種設備終端，或者說更易於控制圖標顏色和大小，開始在使用Icon Font來製做Web圖標
4. 固然，字體圖標是解決了很多問題，但每次針對不一樣的圖標的使用，須要自定義字體，也要加載相應的字體文件，相應的也帶了必定的問題，好比說跨域問題，字體加載問題
5. 隨着SVG的支持力度愈來愈強，你們開始在思考SVG，使用SVG來製做圖標。該技術能解決咱們前面碰到的大部分問題，特別是在而對衆多終端設備的時候，它的優點愈加明顯
6. SVG和img有點相似，咱們也能夠藉助 標籤和標籤，將全部的SVG圖標拼接在一塊兒，有點相似於Sprites的技術，只不過在此稱爲SVG Sprites
7. SVG的圖標還有一優點，咱們能夠在CSS中直接經過代碼來控制圖標的顏色

svg 優化工具 github.com/svg/svgo

從矢量工具導出的SVG文件一般包含大量沒必要要的數據，例如編輯器元數據，註釋，隱藏元素以及能夠安全刪除而不影響SVG渲染結果的其餘內容。

安裝工具以前 必須先安裝node.js

www.npmjs.com/package/svg…

npm install -g svgo
svgo  xxx.svg
複製代碼

svg-sprite 工程化構建

Gulp配置以下；其餘工程化構建工具備相似的工具。

const gulp = require('gulp');
const path = require('path');
const svgmin = require('gulp-svgmin')
const svgstore = require('gulp-svgstore');
const cheerio = require('gulp-cheerio');


gulp.task(`svg-sprite`, function () {
  return gulp
      .src(`./assets/src/images/svg/**/*.svg`)
      .pipe(cheerio({
          run: function ($) {
              $('[class]').removeAttr('class');
          },
          parserOptions: { xmlMode: true }
      }))
      .pipe(svgmin(function (file) {
          var prefix = path.basename(file.relative, path.extname(file.relative));
          return {
              plugins: [{
                  cleanupIDs: {
                      prefix: prefix + '-',
                      minify: true
                  }
              }]
          }
      }))
      .pipe(rename({prefix: 'icon-'}))
      .pipe(svgstore())
      .pipe(rename({prefix: 'icon-'}))
      .pipe(gulp.dest(`./assets/dist/images/svg`))
})
複製代碼

使用方式

.icon-svg-pricing {
  font-size: 24px;
  fill: none;
  stroke: #7a8598;
  width: 1em;
  height: 1em;
}
// 能夠根據css來控制一些樣式或動畫的改變
複製代碼

<svg class="icon-svg-pricing">
	<use xlink:href="./assets/dist/images/svg/icon-svg-sprite.svg#icon-miniapp_live"></use>
</svg>
複製代碼

爲兼容IE瀏覽器，引入相關svg兼容庫svg4everybody

<script src="/path/to/svg4everybody.js"></script>
<script>svg4everybody(); // run it now or whenever you are ready</script>
複製代碼