編輯、轉換和優化SVG文件的工具和資源

SVG格式的強大在於能適應任何尺寸而不失清晰和銳利。用戶可以隨意縮放，而不犧牲質量，這使它完美的適用於響應式網頁設計。

為了幫助你更好的應用SVG，本文將介紹一些工具，以便更簡單的編輯、轉換、優化圖形。我會談談如何使SVG代碼更佳簡潔和高效，如何處理瀏覽器兼容問題，以及製作icon的一些技巧。

免費SVG編輯器

最簡單的編輯SVG方式就是使用文本編輯器，但如果需要更多更複雜的操作，免費且開源的SVG-edit會是個更好的選擇。這個SVG編輯器基於Web，能運行在任何現代瀏覽器上。除了查看和編輯功能，它還提供了一系列繪畫和導入功能。

SVG-edit完全基於Web，並且提供了大量繪畫和編輯工具，非常適合快速編輯。

還有Inkscape。也是免費、開源的矢量圖形編輯器，提供了大量繪圖和對象操作工具，不僅能導入導出SVG，還支持AI、EPS、PSD和PNG。

另一個免費編輯器是Boxy SVG。基於Web技術，因此不僅能在你Mac、Windows、Linux和Chromebook上基於Chromium引擎的瀏覽器使用，還能導出由瀏覽器生成的代碼。

SVG轉換工具

如果你不想從頭開始畫SVG圖形，有一些工具可以讓你導入圖片並轉換成矢量圖，不需要費時費力的手工調整。你可以上傳圖片至PicSVG，SVG文件能立即創建完成。導入格式支持PNG、JPEG和GIF。

Vectormagic提供了更細緻的功能。導出時有更多選項，你可以預覽效果圖，進行更精確的調整。註冊以後可以免費轉換兩張圖，更多圖片需要購買月度訂閱計劃，每個月7.95美元。

如果你需要轉換點陣圖，試試Eric Meyer的px2svg。該PHP腳本通過繪製填充矩形，將原圖轉化為矢量格式。

優化和傳輸SVG

每個多餘的節點、路徑、小數點和原數據都會增加文件的大小。這點差異看上去無關緊要，但當你的網站上有多個SVG時，事情就會棘手起來。保持SVG代碼的簡潔，避免影響你網站的性能是至關重要的。

為網頁優化SVG

Andreas Larsen的3篇系列文章教你如何減少文件體積——不管是由你創建的矢量圖還是與他人協作——以及代碼的導出。最重要的一點是，通過減少控制點來優化線條，進而節省空間。

另外，優化工具諸如svgo刪掉了大量多餘代碼（然而使用這類工具時還是需要小心，當你對形狀要求較高時手動調整是更好的選擇），正如Andreas Larsen所說，你也可以用Atom實時預覽SVG文件，手動刪除多餘信息——比如不必要的逗號、空格、不需要的透明路徑，當然還有原數據和編輯器產生的類。就像《experiment with the LinkedIn logo》里說的一樣，在不產生可見變化的前提下，體積減小85%的情況並不少見。

利用Illustrator製作和導出為Web優化的SVG

Sara Soueidan在她的《9條為Web製作優秀SVG的貼士》中提出了9個如何使SVG代碼更乾淨清爽的方法。其中一個就是利用<circle>、<rect>或者<line>，而不是<path>。這樣能提高代碼的可讀性和可編輯性。

用Sketch導出簡潔代碼

如果你用Sketch導出過SVG，一定會知道那個代碼簡直沒法讀。最糟糕的情況，你之後甚至根本無法維護代碼。為了解決這個問題，Sean Kesterson提出了一個四步工作流程。

重點：將你的畫板尺寸設置為偶數，像素為整數；否則Sketch會增加不必要的轉換代碼。刪除所有透明邊框，把這事交給CSS來做，否則Sketch導出的文件會難以縮放。最後但並不太重要的，每次你旋轉一個對象，就會增加一個旋轉屬性，如果你在代碼中移除這部分，圖形就會恢復到原來的狀態。解決辦法有點麻煩，你需要在Illustrator中旋轉圖形，再拖動到Sketch里。

保持代碼清爽的一步：刪除透明邊框，用CSS來實現。

優化SVG傳輸

最後，網站性能的關鍵取決於你如何傳輸這些SVG文件。你可以通過gzip使體積平均減少80%。當你打算提供一個回退PNG圖片給不支持SVG的瀏覽器時，Sara Soueidan建議將回退圖片設置為背景圖片放在<object>里，避免支持SVG的瀏覽器重複下載圖片，增加不必要的HTTP請求。

製作SVG圖標

SVG的縮放和靈活性使得它比傳統的icon font更適合做icon。如果icon font載入失敗顯示的是空白，而SVG可以顯示回退方案（如果有的話）。創建SVG圖標，你需要將所有SVG存放在一個文件夾里，然後打包成一個文件，不管是手工還是用Grunt插件。現在你只需要將SVG插入文檔，你就可以任意使用和定製你的icon了。

查看原文