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