# 2019年是時候使用svg-sprite作為網站icon圖示的主流了！！！
摘要：
SVG
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上圖示的使用也經歷了相應的發展：
- 最早通過img標籤來引用圖示（每個圖示一個檔案）
- 為了節省請求，提出了Sprites的概念，即將多個圖示合併在一起，使用一個圖片檔案，藉助background相關的屬性來實現圖示
- 圖片畢竟是點陣圖，面對多種裝置終端，或者說更易於控制圖示顏色和大小，開始在使用Icon Font來製作Web圖示
- 當然，字型圖示是解決了不少問題，但每次針對不同的圖示的使用，需要自定義字型，也要載入相應的字型檔案，相應的也帶了一定的問題，比如說跨域問題，字型載入問題
- 隨著SVG的支援力度越來越強，大家開始在思考SVG，使用SVG來製作圖示。該技術能解決我們前面碰到的大部分問題，特別是在而對眾多終端裝置的時候，它的優勢越發明顯
-
SVG和img有點類似，我們也可以藉助
標籤和標籤，將所有的SVG圖示拼接在一起，有點類似於Sprites的技術，只不過在此稱為SVG Sprites - SVG的圖示還有一優勢，我們可以在CSS中直接通過程式碼來控制圖示的顏色
svg 優化工具github.com/svg/svgo
從向量工具匯出的SVG檔案通常包含大量不必要的資料，例如編輯器元資料，註釋，隱藏元素以及可以安全刪除而不影響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> 複製程式碼