前言
隨著移動網際網路的到來，各種高清螢幕移動裝置的層出不窮，導致H5應用在移動裝置retina螢幕下經常會遇到圖示不清晰的問題。
為了解決螢幕解析度對圖示影響的問題，通常採用CSS Sprite，Icon Font，CSS Icon以及SVG以適應@x1屏、@2屏、@3屏，相對比較而言SVG向量性、縮放無損等諸多優點，更應受前端設計師的青睞，可在許多公司的移動專案應用中卻很鮮見，究其主因在於SVG開發學習成本比較高以及在繪製的效能上比PNG要差。此篇文章將從SVG快速匯出到SVG、SVG Symbol元件化在專案中實戰進行講解，並提供SVG Symbol快速匯出工具，教你如何提高SVG開發效率減少成本。
SVG簡介
SVG是一種開放標準的向量圖形語言，使用svg格式我們可以直接用程式碼來描繪影像，可以用任何文書處理工具開啟svg影像，通過改變部分程式碼來使影像具有互動功能，並可以隨時插入到HTML中通過瀏覽器來瀏覽。
SVG優缺點：
| 優點 | 缺點 |
|---|---|
| 1.縮放無損還原，顯示清晰 | 1.SVG在繪製的效能上比PNG要差 |
| 2.語義性良好 | 2.侷限性，對應單色或普通漸變沒什麼問題，但對不規則的漸變以及特效疊加效果顯示不全 |
| 3.可用CSS控制圖示樣式以及動畫 | 3.相容性稍差，android4.1才開始支援 |
| 4.減少http請求 | 4.學習應用成本較高 |
PS：SVG 為什麼沒有替代 iconfont？
1.PC 端 SVG 有相容性問題，因此 PC 端還是用 iconfont 比較靠譜。那麼，與其為移動端多弄一套 SVG 方案，為什麼不直接公用同一套 iconfont 庫？成本問題。
2.知道 SVG Sprite 的人不多，而 iconfont 儼然成為前端面試必考題了。
3.拋開相容，再就是SVG的侷限性:單色或線性漸變(從左向右筆直進行漸變)，徑向漸變(從內到外進行圓形漸變)都沒問題、但是不規則的漸變、就實現不了了。
4.SVG比圖片麻煩、設計稿如果不優化節點、直接匯出、程式碼量那個驚人，然而ai匯出的SVG程式碼、節點優化後，也不能直接用、還得小改、總體來說SVG比圖片好耗費功力太多。
Web應用中SVG的使用方式
1.使用img、object、embed 標籤直接引用SVG
此方法的缺點主要在於每個圖示都需單獨儲存成一個 SVG 檔案，使用時單獨請求，增加了HTTP請求數量。
|
1 |
<img src="http://www.w3school.com.cn/svg/rect1.svg" width="300" /> |
2.Inline SVG，直接把SVG寫入 HTML 中
Inline SVG 作為HTML文件的一部分，不需要單獨請求。臨時需要修改某個圖示的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG程式碼不適合手寫，圖示複用起來也比較麻煩。
|
1 2 3 4 5 |
<body> <svg width="100%" height="100%"> <rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/> </svg> </body> |
3.SVG Sprite
這裡的Sprite技術，類似於CSS中的Sprite技術。圖示圖形整合在一起，實際呈現的時候準確顯示特定圖示。其實基礎的SVG Sprite也只是將原來的點陣圖改成了SVG而已，控制SVG大小、顏色需要重新合併SVG檔案。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.icon-bg{ display: inline-block; width: 30px; height: 30px; background: url(./res/svg-sprite-background.svg); background-size:100% 100%; } .icon-facebook-logo{ background-position: 0 0; } .icon-earth{ background-position: 0 -30px; } <span class="icon-bg icon-facebook-logo"></span> <span class="icon-bg icon-earth"></span> |
4.使用 SVG 中的 symbol，use 元素來製作SVG Sprite
SVG Symbols的使用，本質上是對Sprite的進一步優化，通過<symbol>元素來對單個SVG元素進行分組，使用<use>元素引用並進行渲染。這種方法的解決了上述三種方式帶來的弊端，少量的http請求，圖示能被快取方便複用，每個SVG圖示可以更改大小顏色，整合、使用以及管理起來非常簡單。
①SVG Symbols作為body的第一個元素插入在HTML中使用：
|
1 2 3 4 5 6 7 8 9 10 |
<body> <svg style="width:0; height:0; visibility:hidden;position:absolute;z-index:-1"> <symbol viewBox="0 0 24 24" id="heart"> <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path> </symbol> </svg> <svg> <use xlink:href="#heart"/> </svg> </body> |
②使用完整路徑引用Icon（此方法涉及到跨域問題）
存在跨域問題，同域可以使用。
|
1 2 3 4 5 6 7 8 9 |
<body> //路徑形式進行獲取icon <svg> <use xlink:href="/asset/svg-symbols.svg#heart"/> </svg> <svg> <use xlink:href="/asset/svg-symbols.svg#heart"/> </svg> </body> |
③js控制SVG寫入body進行引用
推薦使用，有效分離結構和展現、解決快取以及跨域問題。
svg.js:
|
1 2 3 4 5 6 |
var symbols = '<svg style="width:0; height:0; visibility:hidden;position:absolute;z-index:-1"> <symbol viewBox="0 0 24 24" id="heart"> <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path> </symbol> </svg>'; document.body.insertAdjacentHTML("afterBegin",symbols) |
svg.html:
|
1 2 3 4 5 6 7 8 |
<body> //指令碼需在svg use引用之前引入 <script src = "/asset/svg.js"></script> <svg> <use xlink:href="#heart"/> </svg> </body> |
SVG快速匯出
SVG匯出工具：
- Photoshop CC 2015 以上版本均支援匯出SVG功能
- Adobe Illustrator 匯出
- export-photoshop-layer-to-svg基於photoshop的SVG匯出外掛
- export-svg-with-fireworks基於firework的SVG匯出外掛
Photoshop CC 2015 匯出SVG使用
Ps可以對向量圖層進行匯出，即通過向量工具繪製所在圖層或圖層資料夾進行匯出，若對不是向量圖形進行匯出，可能會引起錯誤或者匯出的檔案是點陣圖。
SVG匯出，建議圖形一定要撐滿整個畫布，若存在間隙，網頁使用時圖示居中對齊就會比較麻煩。
1.批量匯出SVG
批量匯出SVG，只需在向量圖層或失落圖層資料夾名後新增相應格式字尾（如.svg)，依次點選選單“檔案->生成->影像資源”，確認該選單項已被勾選。但是此方法會根據icon實際大小進行匯出，若icon圖示存在小數匯出就不太適用，我們需要手動去調節。
2.設定匯出為單個匯出
設定匯出為單個匯出，選中向量圖層單擊右鍵，依次點選“匯出為->設定引數->匯出”，此方法可以設定SVG的影像實際大小，以及畫布大小。
匯出為：
設定匯出SVG影像實際大小，以及畫布大小：
SVG Symbol自動化合並生成
Photoshop匯出來的是單個SVG檔案，需要將這些單個SVG檔案進行合併生產symbol的SVG，這樣才能通過symbol＋use進行引用。可以使用手工合併，推薦使用工具，安利給大家一個專門用於處理SVG Symbols用的glup外掛gulp-svg-symbols。
下面我們就來以一個例項一步一步來使用下這個外掛。
首先新建一個資料夾，目錄結構如下圖所示：
|
1 2 3 4 5 6 7 8 9 |
assets ├── svg //存放ps匯出的大量svg檔案 ├── xxx.svg ├── xxx.svg ├── xxx.svg ├── out ├── gulpfile.js ├── package.json ├── index.html |
安裝gulp-svg-symbols外掛,若沒有預先安裝gulp請先行安裝:
|
1 |
npm i gulp-svg-symbols --save |
gulpfile.js寫入如下執行任務：
|
1 2 3 4 5 6 7 8 9 |
'use strick'; const gulp = require("gulp"); const symbols = require("gulp-svg-symbols"); //轉換svg gulp.task('svg', () => { return gulp.src('./svg/**') .pipe(symbols()) .pipe(gulp.dest('out/')) }); |
執行任務匯出svg-symbols：
|
1 |
gulp svg //out資料夾，生成svg-symbols.svg，svg-symbols.css（此檔案對應svg樣式，基本無用） |
SVG Symbol視覺化工具
為了方便快速批量合成SVG圖示生成 SVG Symbol，提高效率，我們開發了簡易版的SVG Symbol視覺化工具svg tool。
svg tool使用：
開啟後介面
使用範圍：
主要支援單層結構SVG進行合併生產symbol，對於多層結構SVG合併注意手動修改對應顏色。
功能：
- 1.支援拖拽資料夾，自動遍歷SVG檔案合併生成symbol檔案。
- 2.提供兩種匯出方式，正常模式、修正模式。
- 3.對檔案viewBox大小不為整進行提示，可以選擇自動修正模式系統自動放大處理。
- 4.匯出svg-symbol.svg、svg-symbol.js，可直接引入svg-symbol.js方便使用。
svg tool下載地址：
mac：http://jdc.jd.com/svg/svgtoolfile/svgtool-1.0.0.dmg
win32: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-ia32.zip
win64: http://jdc.jd.com/svg/svgtoolfile/svgtool-win32-x64.zip
參考資料：