標籤:操作 ble 引用 標記語言 mat bsp imp png 完成
工程中用到表徵圖是常事,那這些表徵圖我們前端一般是怎麼解決的呢?這幾種方案有什麼優缺點呢?
第一種: SVG Sprite
SVG sprite其實就是svg的集合。SVG即可縮放向量圖形 (Scalable Vector Graphics)的簡稱,是一種用來描述二維向量圖形的XML標記語言。SVG圖形不依賴於解析度, 因此圖形不會因為放大而顯示出明顯的鋸齒邊緣.使用svg格式我們可以直接用代碼來描繪映像,可以用任何文文書處理工具開啟svg映像,通過改變部分代碼來使映像具有互動功能,並可以隨時插入到HTML中通過瀏覽器來瀏覽。
單個SVG圖的使用
<svg width="16" height="16" viewBox="0 0 16 16"> <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path></svg>
多個SVG圖的使用
SVG屬性中,可以利用 symbol 來定義一個圖形模板對象,並利用 use 將其執行個體化。use 使用時加入 symbol 的id名就可以顯示該表徵圖。
<svg> <symbol id="001-home" viewBox="0 0 16 16"> <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/> </symbol> <symbol id="002-home2" viewBox="0 0 16 16"> <path fill="#000000" d="M8 0.5l-8 8 1.5 1.5 1.5-1.5v6.5h4v-3h2v3h4v-6.5l1.5 1.5 1.5-1.5-8-8zM8 7c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/> </symbol> <symbol id="003-home3" viewBox="0 0 16 16"> <path fill="#000000" d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"/> </symbol></svg><svg><use xlink:href="#001-home"/></svg><svg><use xlink:href="#002-home2"/></svg>
如果 SVG symbol 不是內嵌在 html 中,而是獨立的SVG檔案,則use 使用路徑名來引用。
<svg><use xlink:href="images/aa.svg#001-home"/></svg>
多個SVG檔案的合并可以使用gulp構建工具來完成,這裡不詳細敘述。可以在SVG標籤上增加樣式名,控製圖標的顯示。
優點:
- 縮放無損還原。
- 可設定樣式,控製圖標的顏色,大小,漸層等效果。
- 可利用CSS實現動畫。
- 減少HTTP請求。
缺點
- SVG在繪製的效能上比PNG要差。
- 複雜的圖形或漸層可能顯示不全。
- 相容性稍差,支援 ie9+,及現代瀏覽器。
第二種:iconfont
使用字型表徵圖,這種方式也正在被大家接受和認可。將多個向量圖合并產生字型檔,然後在CSS中引用對應的字型編碼即可顯示表徵圖。字型表徵圖適用於各個瀏覽器螢幕。通過控制font-size的大小調整表徵圖大小。常用的字型表徵圖網站是http://www.iconfont.cn/ 和 https://icomoon.io/
方式一:font class引用
將字型的編碼加在樣式的偽類上來實現。
css代碼如下:
@font-face { font-family: "iconfont"; src: url(‘iconfont.eot?t=1502445479693‘); /* IE9*/ src: url(‘iconfont.eot?t=1502445479693#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘iconfont.woff?t=1502445479693‘) format(‘woff‘), /* chrome, firefox */ url(‘iconfont.ttf?t=1502445479693‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(‘iconfont.svg?t=1502445479693#iconfont‘) format(‘svg‘); /* iOS 4.1- */}.icon { font-family:"iconfont" !important; font-size:16px;}.icon-close:before { content: "\e736"; }.icon-down:before { content: "\e971"; }
html代碼如下:
<i class="icon icon-close"></i>
特點:
- 相容性良好,支援ie8+,及所有現代瀏覽器。
- 相比於直接在html代碼裡寫unicode,這種寫法語意明確,書寫更直觀,直接看樣式名就知道是什麼icon了。
- 因為使用class來定義表徵圖,所以當要替換表徵圖時,只需更換樣式名就可以了。
- 不支援多色表徵圖。
方式二:unicode引用
跟方式一類似,只是unicode代碼引用位置不同而已。
css代碼如下:
@font-face { font-family: "iconfont"; src: url(‘iconfont.eot‘); /* IE9*/ src: url(‘iconfont.eot#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘iconfont.woff‘) format(‘woff‘), /* chrome, firefox */ url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */}.icon { font-family:"iconfont" !important; font-size:16px;}
html代碼如下:
<i class="icon"></i><i class="icon"></i>
特點:
- 相容性最好,支援ie6+,及所有現代瀏覽器。
- 支援按字型的方式去動態調整表徵圖大小,顏色等等。
- 只支援單色表徵圖。
- 可讀性不好,需要在html代碼裡寫上unicode字元。
此種方式已經不常用了。
第三種:DataURI
DataURI是利用規範將圖片轉換成Base64編碼的文本字元,不僅是圖片,還可以編碼JS、CSS、HTML等檔案。通過將表徵圖檔案編碼成文本字元,從而可以直接寫在HTML/CSS檔案裡面,不會增加任何多餘的請求。
但是DataURI的劣勢也是很明顯的,每次都需要解碼從而阻塞了CSS渲染,而且CSS的體積也會增加不少。這種方法一般不建議使用。常用解碼網站http://tool.css-js.com/base64.html
第四種:image sprite
將多個小表徵圖合成雪碧圖,這是比較古老的圖片處理方式了。將多個表徵圖合成一個圖片檔案,然後利用css的background-position定位顯示不同的icon表徵圖。
優點:
- PC端相容性好。不同瀏覽器公用一個圖片檔案,不用考慮相容性問題。
- 減少表徵圖的請求數。多個表徵圖合成一個檔案後,只需請求一次就可以。且該檔案可以被瀏覽器緩衝。
- 減少圖片位元組。合并後的圖片位元組比單個表徵圖相加的位元組少得多。
缺點:
- 維護困難。每新增一個表徵圖,都需要改動原來的合并圖片源檔案。
- 定位不夠靈活。表徵圖的位置要有一定的規範,表徵圖與表徵圖之間需要留有一定間距,避免相互幹擾影響定位。
- 操作繁瑣。需要維護圖片,修改樣式。
- 對高dpr的螢幕表徵圖還得額外維護一份。
鑒於前面幾種更好的方法,此種圖片合并的方式已經過時。
web項目中表徵圖的前端處理方案