現(xiàn)在出現(xiàn)了不同型號的手機(jī),ipad.電腦辣恋，開發(fā)上對分辨率的要求日益嚴(yán)格咆繁。我們需要更多的關(guān)注各種設(shè)備的閱讀性和顯示效果淳梦。我們希望能在不同的時(shí)間甘邀，不同的地方都能傳遞非常棒的客戶體驗(yàn)琅攘。
我們需要在開發(fā)時(shí)，不同的設(shè)備準(zhǔn)備不同分辨率的設(shè)計(jì)稿松邪。一套在普通屏幕上顯示坞琴，一套在高清屏幕上顯示。
為了解決屏幕分辨率對圖標(biāo)影響的問題逗抑，字體圖標(biāo)即icon font順勢而生剧辐。字體圖標(biāo)是一種全新的設(shè)計(jì)方式。更重要的是相比圖片而言邮府，使用字體來制作圖標(biāo)可以不受于屏幕分辨率的影響荧关，這對于現(xiàn)在各種分辨率屏幕的移動互聯(lián)網(wǎng)時(shí)代，比起用圖片來說確實(shí)有很大的優(yōu)勢褂傀。所以現(xiàn)在在web開發(fā)中忍啤，使用字體來制作icon應(yīng)用的也越來越多。
SVG的優(yōu)勢：
隨著高清屏幕的普及仙辟，相比使用png等位圖而言同波，使用SVG等矢量圖形是一種全新的設(shè)計(jì)方式。更重要的是相比位圖而言叠国，SVG有著無可比擬的優(yōu)勢未檩。這里我總結(jié)一下SVG具體的一些優(yōu)勢：
1.相對于png等位圖而言，使用SVG的矢量圖是一種全新的設(shè)計(jì)方式粟焊，更重要的是svg有很多優(yōu)勢冤狡，
SVG是矢量圖文件孙蒙，可以隨意改變大小，同時(shí)不影響圖標(biāo)質(zhì)量筒溃。
可以用CSS樣式自由定義圖標(biāo)顏色马篮，尺寸等。
所有的SVG可以全部放在一個文件中怜奖，節(jié)省HTTP請求浑测。
使用SML.CSS或者js可以制作有交互動畫的效果。
猶豫SVG也是一種XML文件歪玲，所以可以使用gzip的方法把文件壓縮到很小迁央。
SVG使用方法
在web開發(fā)中，SVG主要有下面幾種使用方法：
1.使用img和object標(biāo)簽直接引用svg滥崩。這種方法的缺點(diǎn)主要在于要求每個圖標(biāo)都單獨(dú)保存成一個SVG文件岖圈，使用時(shí)也是單獨(dú)請求的，增加了HTTP請求钙皮。
2.Inline SVG蜂科，直接把SVG寫入 HTML 中，這種方法簡單直接短条，而且具有非常好的可調(diào)性导匣。Inline SVG 作為HTML文檔的一部分，不需要單獨(dú)請求茸时。臨時(shí)需要修改某個圖標(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而已。
