svg icon的幾個使用方法：
第一種inline svg
這種方法就是直接把svg標籤寫入到html中去，直接通過修改fill和stroke屬性來控制填充顏色和邊框顏色，但是缺點就是維護性不好，如果乙個頁面icon特別多，可能要寫好幾十個svg在頁面，復用性差，後期擴充套件性也不佳。
第二種img/object 標籤
這種方法直接將svg icon儲存成乙個乙個單獨檔案，通過img或object標籤引用，他的缺點就是請求數增加，每個圖示都去獨自載入，對伺服器負載和頁面高速載入不好。
第三種background and data uris
.icon
還有如果單獨使用background引用svg也會和第一種方案一樣造成請求數增加，所以有不少人通過使用base64 編碼來減少http請求：
.icon
不過不太建議使用base64 編碼，無論效能和維護方面都不是特別好，記得看過乙個測試base64效能的文章，base64在移動端渲染時間比正常使用url的渲染時間要慢6倍。
第四種svg sprites
目前市面上有很多提供icon font製作的**，例如：icomoon 不止開源，而且功能實在強大，可以提供輸出svg sprites的功能，svg sprites它的使用方法其實就跟png sprites是一樣的，把多個svg icon合併到乙個svg檔案裡面去，然後通過background-position進行定位，這種方法可以解決請求數增多的問題。
.icon
這種其實就是在svg sprites上面更進一步的使用了，svg sprites是需要我們去通過座標獲取對應位置圖示的，但是svg defs/symbols就更簡單了，直接通過給每個svg icon定義id，直接呼叫對應id即可：
將上面**儲存為svg檔案後，在html我們通過下面的方式可以直接呼叫：
新的方案：svg sprites +png sprites + image-set
由於我們知道svg在ie下的相容性並不好，所以在高畫質icon的適配在第四種方案的基礎上進行優化，首先用icommon進行下面的步驟操作：
這裡應該有人會覺得也可以使用media queries來進行判斷處理在retinal來載入svg sprites，但其實image-set它和media queries有些許，它不需要告訴瀏覽器使用什麼影象，而是直接提供了影象讓瀏覽器自己去選擇載入合適的。相容性方面在safari6.1開始和 chrome21就開始支援這個屬性了。
總結svg目前還是存在許多問題，windows下使用ie的相容性和渲染效果都太差，在pc側我們無法全量使用，所以我們可以用上面的這套解決方案解 決pc下所有瀏覽器下相容問題，在retina下，不管是device =2還是3都可以相容，不管未來是否會有更高的devicepixelratio出來，按照上面的方法都能完美相容，並且在對應不同的 devicepixelratio下瀏覽器會自動選擇載入svg或者png，不會兩張都同時載入。
vue中封裝svg icon元件並使用
1.使用vue cli3.0腳手架執行搭建乙個專案，位址 截圖如下 2.components檔案下新建svgicon元件 檔案中的 如下 3.將所需svg檔案放置icons的svg資料夾下 icons檔案下的index.js檔案中的 如下 import vue from vue import svg...
vue封裝svgIcon公共元件
1 在components新建common svgicon.vue 2 在src下新建assets image icons svg用於存放.svg檔案 3 在src下新建assets image icons index.js import vue from vue import svgicon fr...
ButterKnife 新增使用
在使用 butterknife的時候 只配置乙個地方是不行的 之前一直只設定乙個，解析控制項有問題後來才知道，還需要把其他部分的配置補齊才能正確的解析控制項 compile com.jakewharton butterknife 8.6.0 apt com.jakewharton butterkni...