欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

擁抱Web設(shè)計(jì)新趨勢(shì)：SVG Sprites實(shí)踐應(yīng)用

2017-07-10 13:40:26 2190瀏覽

前言

隨著移動(dòng)互聯(lián)網(wǎng)的到來，各種高清屏幕移動(dòng)設(shè)備的層出不窮，導(dǎo)致H5應(yīng)用在移動(dòng)設(shè)備retina屏幕下經(jīng)常會(huì)遇到圖標(biāo)不清晰的問題。

為了解決屏幕分辨率對(duì)圖標(biāo)影響的問題，通常采用CSS Sprite，Icon Font，CSS Icon以及SVG以適應(yīng)@x1屏、@2屏、@3屏，相對(duì)比較而言SVG矢量性、縮放無損等諸多優(yōu)點(diǎn)，更應(yīng)受前端設(shè)計(jì)師的青睞，可在許多公司的移動(dòng)項(xiàng)目應(yīng)用中卻很鮮見，究其主因在于SVG開發(fā)學(xué)習(xí)成本比較高以及在繪制的性能上比PNG要差。此篇文章將從SVG快速導(dǎo)出到SVG、SVG Symbol組件化在項(xiàng)目中實(shí)戰(zhàn)進(jìn)行講解，并提供SVG Symbol快速導(dǎo)出工具，教你如何提高SVG開發(fā)效率減少成本。

SVG簡介

SVG是一種開放標(biāo)準(zhǔn)的矢量圖形語言，使用svg格式我們可以直接用代碼來描繪圖像，可以用任何文字處理工具打開svg圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時(shí)插入到HTML中通過瀏覽器來瀏覽。

SVG優(yōu)缺點(diǎn)：

PS：SVG 為什么沒有替代 iconfont？

1.PC 端 SVG 有兼容性問題，因此 PC 端還是用 iconfont 比較靠譜。那么，與其為移動(dòng)端多弄一套 SVG 方案，為什么不直接公用同一套 iconfont 庫？成本問題。

2.知道 SVG Sprite 的人不多，而 iconfont 儼然成為前端面試必考題了。

3.拋開兼容，再就是SVG的局限性:單色或線性漸變(從左向右筆直進(jìn)行漸變)，徑向漸變(從內(nèi)到外進(jìn)行圓形漸變)都沒問題、但是不規(guī)則的漸變、就實(shí)現(xiàn)不了了。

4.SVG比圖片麻煩、設(shè)計(jì)稿如果不優(yōu)化節(jié)點(diǎn)、直接導(dǎo)出、代碼量那個(gè)驚人，然而ai導(dǎo)出的SVG代碼、節(jié)點(diǎn)優(yōu)化后，也不能直接用、還得小改、總體來說SVG比圖片好耗費(fèi)功力太多。

Web應(yīng)用中SVG的使用方式

1.使用img、object、embed 標(biāo)簽直接引用SVG

此方法的缺點(diǎn)主要在于每個(gè)圖標(biāo)都需單獨(dú)保存成一個(gè) SVG 文件，使用時(shí)單獨(dú)請(qǐng)求，增加了HTTP請(qǐng)求數(shù)量。

 

2.Inline SVG，直接把SVG寫入 HTML 中

Inline SVG 作為HTML文檔的一部分，不需要單獨(dú)請(qǐng)求。臨時(shí)需要修改某個(gè)圖標(biāo)的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標(biāo)復(fù)用起來也比較麻煩。

 

3.SVG Sprite

這里的Sprite技術(shù)，類似于CSS中的Sprite技術(shù)。圖標(biāo)圖形整合在一起，實(shí)際呈現(xiàn)的時(shí)候準(zhǔn)確顯示特定圖標(biāo)。其實(shí)基礎(chǔ)的SVG Sprite也只是將原來的位圖改成了SVG而已，控制SVG大小、顏色需要重新合并SVG文件。

 

4.使用 SVG 中的 symbol，use 元素來制作SVG Sprite

SVG Symbols的使用，本質(zhì)上是對(duì)Sprite的進(jìn)一步優(yōu)化，通過<symbol>元素來對(duì)單個(gè)SVG元素進(jìn)行分組，使用<use>元素引用并進(jìn)行渲染。這種方法的解決了上述三種方式帶來的弊端，少量的http請(qǐng)求，圖標(biāo)能被緩存方便復(fù)用，每個(gè)SVG圖標(biāo)可以更改大小顏色，整合、使用以及管理起來非常簡單。

①SVG Symbols作為body的第一個(gè)元素插入在HTML中使用：

②使用完整路徑引用Icon（此方法涉及到跨域問題）

存在跨域問題，同域可以使用。

③js控制SVG寫入body進(jìn)行引用

推薦使用，有效分離結(jié)構(gòu)和展現(xiàn)、解決緩存以及跨域問題。

svg.js:

 

svg.html:

 

SVG快速導(dǎo)出

SVG導(dǎo)出工具：

• Photoshop CC 2015 以上版本均支持導(dǎo)出SVG功能
• Adobe Illustrator 導(dǎo)出
• export-photoshop-layer-to-svg基于photoshop的SVG導(dǎo)出插件
• export-svg-with-fireworks基于firework的SVG導(dǎo)出插件

Photoshop CC 2015 導(dǎo)出SVG使用

Ps可以對(duì)矢量圖層進(jìn)行導(dǎo)出，即通過矢量工具繪制所在圖層或圖層文件夾進(jìn)行導(dǎo)出，若對(duì)不是矢量圖形進(jìn)行導(dǎo)出，可能會(huì)引起錯(cuò)誤或者導(dǎo)出的文件是位圖。

SVG導(dǎo)出，建議圖形一定要撐滿整個(gè)畫布，若存在間隙，網(wǎng)頁使用時(shí)圖標(biāo)居中對(duì)齊就會(huì)比較麻煩。

1.批量導(dǎo)出SVG

批量導(dǎo)出SVG，只需在矢量圖層或失落圖層文件夾名后添加相應(yīng)格式后綴（如.svg)，依次點(diǎn)擊菜單“文件->生成->圖像資源”，確認(rèn)該菜單項(xiàng)已被勾選。但是此方法會(huì)根據(jù)icon實(shí)際大小進(jìn)行導(dǎo)出，若icon圖標(biāo)存在小數(shù)導(dǎo)出就不太適用，我們需要手動(dòng)去調(diào)節(jié)。

 

2.設(shè)置導(dǎo)出為單個(gè)導(dǎo)出

設(shè)置導(dǎo)出為單個(gè)導(dǎo)出，選中矢量圖層單擊右鍵，依次點(diǎn)擊“導(dǎo)出為->設(shè)置參數(shù)->導(dǎo)出”，此方法可以設(shè)置SVG的圖像實(shí)際大小，以及畫布大小。

導(dǎo)出為：

 

設(shè)置導(dǎo)出SVG圖像實(shí)際大小，以及畫布大?。?

 

SVG Symbol自動(dòng)化合并生成

Photoshop導(dǎo)出來的是單個(gè)SVG文件，需要將這些單個(gè)SVG文件進(jìn)行合并生產(chǎn)symbol的SVG，這樣才能通過symbol＋use進(jìn)行引用。可以使用手工合并，推薦使用工具，安利給大家一個(gè)專門用于處理SVG Symbols用的glup插件gulp-svg-symbols。

下面我們就來以一個(gè)實(shí)例一步一步來使用下這個(gè)插件。

首先新建一個(gè)文件夾，目錄結(jié)構(gòu)如下圖所示：

安裝gulp-svg-symbols插件,若沒有預(yù)先安裝gulp請(qǐng)先行安裝:

 

gulpfile.js寫入如下執(zhí)行任務(wù)：

 

執(zhí)行任務(wù)導(dǎo)出svg-symbols：

為了方便快速批量合成SVG圖標(biāo)生成 SVG Symbol，提高效率，我們開發(fā)了簡易版的SVG Symbol可視化工具svg tool。

svg tool使用：

打開后界面

 

使用范圍：

主要支持單層結(jié)構(gòu)SVG進(jìn)行合并生產(chǎn)symbol，對(duì)于多層結(jié)構(gòu)SVG合并注意手動(dòng)修改對(duì)應(yīng)顏色。

功能：

1.支持拖拽文件夾，自動(dòng)遍歷SVG文件合并生成symbol文件。

2.提供兩種導(dǎo)出方式，正常模式、修正模式。

3.對(duì)文件viewBox大小不為整進(jìn)行提示，可以選擇自動(dòng)修正模式系統(tǒng)自動(dòng)放大處理。

4.導(dǎo)出svg-symbol.svg、svg-symbol.js，可直接引入svg-symbol.js方便使用