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