SVG(Scalable Vector Graphics)，中文名可縮放矢量圖形，能夠很好地處理矢量圖形和可編程性的矢量。這兩年來SVG漸漸成為了web設計的趨勢，越來越多的被用在了響應式網頁設計中，我相信不久的未來也會廣泛普及于移動端領域。
設計師要站在潮流之上，不懂得學習的設計師一個浪打過來的時候就不知所蹤了
不同于UI設計中切出png圖直接給開發就完事，SVG文件是一種圖像文檔格式，設計師在圖像處理軟件中所作的各種效果都會直接影響最后SVG文件的代碼。所以如果設計師對代碼沒有基本的了解、或是與開發人員沒有足夠的溝通，有可能就會導致辛苦處理好的圖形導出SVG后生成的代碼過于復雜，最終不能使用于開發工作。
為了得到整潔的代碼和省去不必要的麻煩，以下幾點大家要用小本子記下來：
1.SVG輸出時，畫布大小要和內容大小相一致。
切過圖的都知道，開發人員在嵌入圖像時會給圖像一個高度和寬度，這個高度和寬度就是圖像在設備中的顯示框，在圖像處理軟件中，這個顯示框就是我們的畫布了。如果畫布過大，留白過多，那么在嵌入后會導致圖像變小。
AI中讓畫布與內容一致的方法：
PS：鑒于隱藏圖層也會影響生產SVG的大小，故我們需要先對所要圖像單獨進行切圖得到PSD之后再導出SVG。
如何從PS快速導出SVG傳送門
2.盡量使用基本圖形創建圖像，較少手動路徑。
這一點AI和PS中一致，盡量都選擇基本圖形（自定義圖形也不要用）進行簡單的布爾運算就好。
之所以大家都推崇基本圖形，在于基本圖形的圖形元素可讀性和可維護性相比于路徑圖像高，而且基本圖形的代碼量比起路徑圖像要少很多，讓開發少敲一點代碼，就是延長他們的生命，救人一命勝造七級浮屠。例如圓形circle，幾個簡單的代碼：x，y，cx，cy就可以完全控制，而路徑形成的圓則需要一大長串代碼去定義、控制。
3.盡可能的簡化路徑。
迫不得已實在要使用路徑時，也一定要記住盡量簡化路徑，減少路徑點。目的還是減少代碼量和文件大小，（這些都是開發的生命和公司的錢啊）。
AI中簡化路徑辦法有兩種，一種是使用AI自帶的簡化工具：對象-路徑-簡化；另一種是使用AI中的平滑曲線工具（如圖）。另外也可以通過一些插件，例如VectorScribe等來實現路徑的優化。
PS里沒有這項功能，需要的話導入到AI中再行操作。
4.使用SVG濾鏡，而不是PS濾鏡。
AI中（需要使用效果得就不要去PS里畫了）：當我們在AI中為圖像做一些效果時，通常會選擇PS濾鏡，這時候AI會將這些效果自動生成并形成柵格圖片，導出SVG后這些柵格圖像也會繼續嵌入，而非程序員想要的一串簡單的代碼，為了安撫程序員幼小的心靈，這時候我們要使用SVG濾鏡。
另外編程厲害的同學也可以使用新建濾鏡工具自行編輯濾鏡。
5.和你的程序員溝通
溝通帶來和平，溝通帶來效率。沒事的時候帶上倆袋瓜子和涼茶找你的程序員嘮嘮嗑，聊一聊你對圖像文件的命名原則、聊一聊保存svg時的各種參數、聊一聊圖像中哪些部分需要擴展輪廓（記得簡化路徑）以減少路徑點等等，你覺得有必要聊的一切都要問程序，不要等他來問你。
要記得，你可是一個優秀的設計師！
歡迎討論設計問題，互相傷害。
以上，侵刪
THE END
