記：psd中圖標轉成svg並上傳到iconfont製做成圖標

拿到設計師給的.svg格式圖標興沖沖地上傳到iconfont，發現上傳的圖標是空白的。用編輯器打開發現裏面沒有<path>，因而本身動手將psd裏的圖標作成svg上傳到iconfont作成圖標。按照iconfont的教程沒作好，多是我不會用AI的緣故。在網上找啊找，這裏作下筆記。
參考的網址：
http://tgideas.qq.com/webplat...
http://www.cnblogs.com/binmen...

1.首先psd裏面圖標得是形狀，選中圖標複製圖層到新建文件

2.將其裁剪成正方形，裁剪的時候圖標周圍記得留必定空白，能夠本身衡量

3.以後把圖標保存爲.EPS格式，默認就行

4.將保存的EPS格式圖標用AI(Adobe illustrator)打開，移到左上角對齊畫布

以後鼠標移到圖標右下角，按住shift將其等比拉伸鋪滿畫布

5.將圖標保存爲svg格式，默認就行

然而這時候上傳到iconfont圖標仍是空白的，可能格式不符合的緣故吧

6.接下來隨便從iconfont下載一個svg格式圖標（由於要以它的格式爲準），複製一份，用編輯器打開，找到<path></path>代碼，這就是要用來替換的路徑

用編輯器打開剛剛用AI保存的svg格式圖標，將其中的<path></path>複製，替換掉上面從iconfont下載的svg的path；或者用工具過濾，只留路徑，而後複製替換

注意代碼裏的viewBox要和用AI保存的一致，打開保存的svg看看就知道了

保存的圖標的viewBox是0 0 64 64，那麼就把viewBox改爲和它同樣的，不然更改好的svg放到瀏覽器一看，圖標沒了。。。

更改好之後保存放到瀏覽器看看，圖標能顯示

7.將保存好的圖標上傳到iconfont，圖標能顯示，接下來保存到項目，下載圖標就能夠用了