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