20 個強大圖象處理功能的 SVG 工具

SVG 現正在 Web 設計領域變得越發流行， 你可以使用 Illustrator 或者 Inkscape 來建立 SVG 影像。 但當進行 Web 設計時，我們還需要做一些優化來使得 SVG 變得更加輕量。

下面介紹的 20 個工具，可以幫助你快速有效的建立 SVG 影像。現有的線上工具已經可以幫助我們進行優化、轉換、新建模式等工作。

更詳細的介紹，參見：How To Create SVG Animation Using CSS

互動式 SVG 座標系統

設計 SVG，離不開它的座標系統。這是一個由 Sara Souiden 編寫的超讚的互動工具，可以幫助你理解 SVG 座標系統是怎麼一回事。 使用 SVG 的 viewBox 和 preserveAspectRatio，也就是下圖所示的粉色線和橙色線，以及旁邊的標尺，你可以在折騰的過程中學習到 SVG 座標是如何工作的。

b64

b64 是一個通過將影像格式轉換為 base64 來進行優化的小工具。 你可以直接把你的 SVG 影像（或者 JPG 和 PNG 也行）扔進去，然後直接把結果作為 CSS 弄到你的網站上就行了。

SVGO

預設的 SVG 包含了許多可刪除的不必要的資訊，刪除這些東西不會影響影像本身。如果你想刪除關於編輯器後設資料、註釋或者隱藏的節點，你可以用 SVGO。

你可以通過 npm 來安裝 SVGO

$ [sudo] npm install -g svgo

也可以使用 GUI 版本，這樣你就可以愉快的拖拖拖了。

SVG OMG

SVG OMG 將 SVGO 的命令列包裝成了一個帶 GUI 的版本，你可以簡單的通過點點按鈕來開啟和關閉特性，最後你匯出一下圖片或者程式碼就行了。

SVG Now

當你工作在 Illustrator 上時，輸出的 SVG 包含許多並不需要的資訊。使用這個工具你可以從你的 Illustrator 右邊得到優化版本的匯出 SVG 。這個工具在皮膚上新增了一些優化 SVG 選項。你可以從Creative Cloud Add-ons page 取得 SVG Now。

SVG to PNG converter

想要把輸出的 SVG 檔案轉換成 PNG 格式？不用開啟類似 Illustrator 這樣的應用就能做？使用這個 SVG 到 PNG 轉換工具可以得到 PNG 格式的輸出影像，並且如果你需要的話還能得到 PNG 的 Base64 資料 URI 。

SVG Circus

如果你認為載入動畫很酷，那麼現在你可以通過 SVG Circus 來簡單地處理 SVG。這個工具可以讓你製作自己的載入器，旋轉器，或者任何類似的迴圈動畫。設定‘角色’，位置，尺寸，顏色和其他形式的皮膚，之後輸出就可以得到結果。

SVG Sprite

SVG Sprite 是一個Node.js 模組， 可以優化一大堆 SVG 檔案，並烤製成 SVG sprite-types，帶有傳統的背景 CSS sprites 或者前景圖片，SVG stacks 以及其他的。

Quasi

使用 quasi，你可以生成如下看到的 Quasicrystal  圖片。這個生成器只是試驗性的，但是結果卻是很酷。你可以通過改變選項值試用一下，然後使用’Save SVG’按鈕下載下來。

Plain Pattern

使用 SVG 創圖案從來就不是簡單而很有趣的事情。上傳你的圖片，按比例縮小或改變間隔，旋轉和重新著色，直到你得到一個漂亮的圖案。你可以在下載之前預覽結果。

Trianglify Generator

使用 Trianglify 生成器建立漂亮的 SVG 幾何圖案。你可以隨意/變化設定顏色，粒度大小並選擇一個顏色調色盤來配合使用。這個工具是 Trianglify 的GUI版本。

SVG Gradient

你知道你可以使用 CSS 來製作漸變 但是你知道你也可以使用 SVG 做到相同的效果嗎？使用 SVG 產生漸變最簡單的方式是使用這個工具。只需要輸入開始和停止顏色，然後就可以獲得產生效果的程式碼了。 CSS 的後退也有包括。

Export PSD to SVG

如果你使用 Photoshop 作為你作品的圖片編輯器，有時候你可以需要在 Photoshop 的 workspace 裡邊轉換你的設計成 SVG， 在 Photoshop 中有一個不支援的格式。下載指令碼到這個工具裡邊， 然後複製到 Adobe Photosho/presets/scripts 資料夾裡邊。

用 SVG 副檔名重新命名一個向量層名字 (e.g. layer1變成layer1.svg), 你現在可以從 File > Scripts > PS to SVG 來執行指令碼了。

SVG Filters

你知道使用 SVG 可以對圖片新增效果嗎？例如色度，飽和度，模糊度，線性顏色疊加和其他效果。這是一款可以顯現這些效果的工具，然後給你一個小片段使得它容易被嵌入效果到你的專案中。

SVG Morpheous

SVG Morpheous 是一個 JavaScript 庫，允許你從一個形狀到另一個形狀改變一個 SVG 圖示。你可以設定寬鬆效果，過度動畫的持續時間，以及旋轉的方向。

Clip path generator

SVG 允許你單擊圖片形狀修剪。如果形狀在一個方形或者圓形裡邊，就相當簡單。但是假設形狀是一個帶有很多店或者多邊形的呢？這就是你需要找個 Clip Path Generator 工具了。

Chartist.js

Chartist.js 一個建立高可定製化響應式圖表的庫。它利用 SVG 來顯示圖表，也可以使用 SMIL 動畫。使用這個庫，你可以建立線性圖表，餅圖，直方圖和其他型別的圖表，甚至可以跟圖表新增動畫。

SVG stroke dash generator

這是一個使用 SVG stroke-dasharray 生成虛線的簡單工具。首先選擇從列表中選擇一個虛線型別，然後在寬度，高度，旋轉或顏色方便自定義虛線。然後你可以攫取 HTML 程式碼和 CSS 應用這條虛線到你的專案中。

Method Draw: A Simple SVG Editor

Method draw 是一個基於 web 的 SVG 編輯器，帶有一個兩邊伴有工具的畫布的直觀的介面。你可以畫線條，形狀，輸入文字或者使用內建的形狀，然後編輯繪畫兌現的屬性。使用 SVG 格式匯出影像（也可以變成 SVG base64 格式）或者直接使用 PNG 儲存。

Export Flash to animated SVG

儘管它不在流行了，但是有時候你很難放棄 Flash。如果是這樣，你可以讓你的 flash 動畫變成 SVG 與更新的技術保持協調工作。這個工具塑造了 Flash 應用程式的擴充套件形式，可以和 CS5，CS5 和 CC 一起工作。

當它變成 Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens，你可以將它匯出到SVG（對另一些人來說，成功是有議可爭的）。