20 個強大圖象處理功能的 SVG 工具
SVG 現正在 Web 設計領域變得越發流行， 你可以使用 Illustrator 或者 Inkscape 來創建 SVG 圖像。 但當進行 Web 設計時，我們還需要做一些優化來使得 SVG 變得更加輕量。
下面介紹的 20 個工具，可以幫助你快速有效的創建 SVG 圖像。現有的在線工具已經可以幫助我們進行優化、轉換、新建模式等工作。
更詳細的介紹，參見：How To Create SVG Animation Using CSS
設計 SVG，離不開它的坐標系統。這是一個由 Sara Souiden 編寫的超贊的交互工具，可以幫助你理解 SVG 坐標系統是怎么一回事。 使用 SVG 的 viewBox 和 preserveAspectRatio，也就是下圖所示的粉色線和橙色線，以及旁邊的標尺，你可以在折騰的過程中學習到 SVG 坐標是如何工作的。
b64 是一個通過將圖像格式轉換為 base64 來進行優化的小工具。 你可以直接把你的 SVG 圖像（或者 JPG 和 PNG 也行）扔進去，然后直接把結果作為 CSS 弄到你的網站上就行了。
默認的 SVG 包含了許多可刪除的不必要的信息，刪除這些東西不會影響圖像本身。如果你想刪除關于編輯器元數據、注釋或者隱藏的節點，你可以用 SVGO。
你可以通過 npm 來安裝 SVGO
$ [sudo] npm install -g svgo
SVG OMG 將 SVGO 的命令行包裝成了一個帶 GUI 的版本，你可以簡單的通過點點按鈕來打開和關閉特性，***你導出一下圖片或者代碼就行了。
當你工作在 Illustrator 上時，輸出的 SVG 包含許多并不需要的信息。使用這個工具你可以從你的 Illustrator 右邊得到優化版本的導出 SVG 。這個工具在面板上添加了一些優化 SVG 選項。你可以從Creative Cloud Add-ons page 取得 SVG Now。
想要把輸出的 SVG 文件轉換成 PNG 格式？不用打開類似 Illustrator 這樣的應用就能做？使用這個 SVG 到 PNG 轉換工具可以得到 PNG 格式的輸出圖像，并且如果你需要的話還能得到 PNG 的 Base64 數據 URI 。
如果你認為加載動畫很酷，那么現在你可以通過 SVG Circus 來簡單地處理 SVG。這個工具可以讓你制作自己的加載器，旋轉器，或者任何類似的循環動畫。設置‘角色’，位置，尺寸，顏色和其他形式的面板，之后輸出就可以得到結果。
SVG Sprite 是一個Node.js 模塊， 可以優化一大堆 SVG 文件，并烤制成 SVG sprite-types，帶有傳統的背景 CSS sprites 或者前景圖片，SVG stacks 以及其他的。
使用 quasi，你可以生成如下看到的 Quasicrystal 圖片。這個生成器只是試驗性的，但是結果卻是很酷。你可以通過改變選項值試用一下，然后使用’Save SVG’按鈕下載下來。
使用 SVG 創圖案從來就不是簡單而很有趣的事情。上傳你的圖片，按比例縮小或改變間隔，旋轉和重新著色，直到你得到一個漂亮的圖案。你可以在下載之前預覽結果。
#p#
使用 Trianglify 生成器創建漂亮的 SVG 幾何圖案。你可以隨意/變化設置顏色，粒度大小并選擇一個顏色調色板來配合使用。這個工具是 Trianglify 的GUI版本。
你知道你可以使用 CSS 來制作漸變 但是你知道你也可以使用 SVG 做到相同的效果嗎？使用 SVG 產生漸變最簡單的方式是使用這個工具。只需要輸入開始和停止顏色，然后就可以獲得產生效果的代碼了。 CSS 的后退也有包括。
如果你使用 Photoshop 作為你作品的圖片編輯器，有時候你可以需要在 Photoshop 的 workspace 里邊轉換你的設計成 SVG， 在 Photoshop 中有一個不支持的格式。下載腳本到這個工具里邊， 然后復制到 Adobe Photosho/presets/scripts 文件夾里邊。
用 SVG 擴展名重命名一個矢量層名字 (e.g. layer1變成layer1.svg), 你現在可以從 File > Scripts > PS to SVG 來運行腳本了。
你知道使用 SVG 可以對圖片添加效果嗎？例如色度，飽和度，模糊度，線性顏色疊加和其他效果。這是一款可以顯現這些效果的工具，然后給你一個小片段使得它容易被嵌入效果到你的項目中。
SVG Morpheous 是一個 JavaScript 庫，允許你從一個形狀到另一個形狀改變一個 SVG 圖標。你可以設置寬松效果，過度動畫的持續時間，以及旋轉的方向。
SVG 允許你單擊圖片形狀修剪。如果形狀在一個方形或者圓形里邊，就相當簡單。但是假設形狀是一個帶有很多店或者多邊形的呢？這就是你需要找個 Clip Path Generator 工具了。
Chartist.js 一個創建高可定制化響應式圖表的庫。它利用 SVG 來顯示圖表，也可以使用 SMIL 動畫。使用這個庫，你可以創建線性圖表，餅圖，直方圖和其他類型的圖表，甚至可以跟圖表添加動畫。
這是一個使用 SVG stroke-dasharray 生成虛線的簡單工具。首先選擇從列表中選擇一個虛線類型，然后在寬度，高度，旋轉或顏色方便自定義虛線。然后你可以攫取 HTML 代碼和 CSS 應用這條虛線到你的項目中。
Method Draw: A Simple SVG Editor
Method draw 是一個基于 web 的 SVG 編輯器，帶有一個兩邊伴有工具的畫布的直觀的界面。你可以畫線條，形狀，輸入文本或者使用內置的形狀，然后編輯繪畫兌現的屬性。使用 SVG 格式導出圖像（也可以變成 SVG base64 格式）或者直接使用 PNG 保存。
盡管它不在流行了，但是有時候你很難放棄 Flash。如果是這樣，你可以讓你的 flash 動畫變成 SVG 與更新的技術保持協調工作。這個工具塑造了 Flash 應用程序的擴展形式，可以和 CS5，CS5 和 CC 一起工作。
當它變成 Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens，你可以將它導出到SVG（對另一些人來說，成功是有議可爭的）。
