# 2019年是時候使用svg-sprite作為網站icon圖示的主流了！！！

levai發表於2019-04-16
SVG網站

·序言

為什麼選擇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系統了

# 2019年是時候使用svg-sprite作為網站icon圖示的主流了！！！

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

  1. 相容現有圖片能力前提還支援向量

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

# 2019年是時候使用svg-sprite作為網站icon圖示的主流了！！！

  1. 可讀性好，有利於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>
複製程式碼

相關文章