大家好！我們現在使用svg已經成為了最近兩年的web設計的新趨勢，越來越多的前端開發人員要求設計師使用并提供svg圖標，svg圖標相較于iconfonts有很多很多的優點。對于svg圖標的輸出，作為一個菜鳥的我以往很菜很麻煩的做法就是遇到圖標就用ai去畫，然后再導成svg圖標，但是，我有一個很不舒服的習慣，那就是在做頁面的時候用ps把缺失的icon也畫出來，然后就這樣的一個切換軟件應用，這樣是很麻煩的。今天，這個教程就是快速用ps導出svg圖標的操作方法，我們大家可以看一看，希望對大家有所幫助。

操作步驟如下：文章源自四五設計網-http://www.wasochina.com/22121.html

1、下載腳本文章源自四五設計網-http://www.wasochina.com/22121.html

首先，我們需要先下載一個附件里面的腳本文件。文章源自四五設計網-http://www.wasochina.com/22121.html

文章源自四五設計網-http://www.wasochina.com/22121.html

2、復制腳本文章源自四五設計網-http://www.wasochina.com/22121.html

接下來，我們需要將這個腳本復制到我們電腦上的ps安裝文件中，在我們的安裝文件中有一個scripts文件夾，把腳本復制進去。文章源自四五設計網-http://www.wasochina.com/22121.html

文章源自四五設計網-http://www.wasochina.com/22121.html

3、添加svg后綴文章源自四五設計網-http://www.wasochina.com/22121.html

打開你需要轉化svg的icon PS文件，首先要保證你的圖標繪制規范：為形狀工具繪制，命名要規范，然后將添加【.svg】后綴。文章源自四五設計網-http://www.wasochina.com/22121.html

文章源自四五設計網-http://www.wasochina.com/22121.html

4、快速導出為svg

你把鼠標放到任意個icon圖層上，點擊右鍵，都會看到一個“快速導出為svg”的選項（如果沒有，說明腳本沒有安裝成功，或者ps版本太低）。就是全部選中圖標圖層，點擊右鍵依然會有“快速導出為svg”的選項（此刻無法截圖），毫不猶豫地選擇他，然后保存到指定的文件夾。接下來打開那個保存的文件夾。

以上的內容就是快速用ps導出svg圖標的操作方法了，不知道各位小伙伴看了以后有沒有什么感覺呢？是不是感覺一點兒也不難！有興趣的小伙伴可以動手試一試！好了，我們今天的分享就到這了，大家下次再見！