一般圖片格式有：png/jpg/jpeg/gif/tiff/apng/bup/svg
前面幾種都是位圖，基本單位是px,每個(gè)點(diǎn)都是有rgb存儲(chǔ)顏色，所以把圖片放大的時(shí)候會(huì)看到很多矩齒狀的點(diǎn)。
png:是一種無損壓縮，支持透明格式，適用于一些人造圖片、logo圖片等等
jpg:是一種有損壓縮，不支持透明格式，適用于自然圖片、顏色豐富的圖片等等
矢量圖：svg
可伸縮的圖片格式，圖片每次放大縮小都要重新計(jì)算，所以耗CPU，svg用標(biāo)簽、代碼來描述圖形.
svg加載失敗一般都是服務(wù)器配置出現(xiàn)問題。
引用svg的方法：
1、object標(biāo)簽
<object ?data="image.svg" ?type="iamge/svg+xml" />
2、iframe標(biāo)簽
<iframe ?src="image.svg" > </iframe>
使用svg實(shí)現(xiàn)字體圖標(biāo)
1、使用sketch畫字體圖標(biāo)，會(huì)生成相應(yīng)的.svg文件，在html文件中直接引用就行
2、自己在html中使用標(biāo)簽來實(shí)現(xiàn)
3、使用阿里iconfont
第一步：拷貝項(xiàng)目下面生成的symbol代碼：
//at.alicdn.com/t/font_1473319176_4914331.js
第二步：加入通用css代碼（引入一次就行）：
.icon {
width:1em; height:1em;
vertical-align:-0.15em;
fill: currentColor;
overflow: hidden;
}
第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面：
<svg ?class="icon" style="width:100px;height:100px">
<use ?xlink:href="#icon-xxx"></use>
</svg>
