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
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 可以對圖片添加效果嗎？例如色度，飽和度，模糊度，線性顏色疊加和其他效果。這是一款可以顯現這些效果的工具，然后給你一個小片段使得它容易被嵌入效果到你的項目中。
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（對另一些人來說，成功是有議可爭的）。
五款超實用的開源SVG工具
SVG（Scalable Vector Graphics）是基於XML的矢量圖像格式，用戶可靈活運用圖像進行搜索、索引、腳本以及壓縮。SVG由W3C制定開發，是一個開放標准，支持當前主流瀏覽器包括Firefox、IE9-10、Chrome、Safari以及Opera。
SVG支持三種圖像類型：矢量圖像、嵌入式外部圖像以及文字。圖形對象包括PNG、JPEG和SVG格式，用戶可根據自己的喜好輕松使用XML文本文件進行修改，因此使用文本編輯成為創建SVG圖像的重要方法之一。由於這種格式得到主流瀏覽器的支持，越來越多的產品開始傾向開源。
本文我們將分享5款超實用的開源的SVG工具：
1. SharpVectorGraphics （SVG）
SVG是基於Microsoft .Net開源項目設計而來，是建立在.Net framework上使用SVG的一款應用，支持生成、操作以及可查看 ，該項目旨在賦予一組核心模塊，開發人員可創建基金會來支持特定的SVG解決方案。
2. Cairo
Cairo是一款2D圖像庫能夠安裝、填充cubic Bézier曲線，轉換和合成半透明圖像，通過繪圖操作進行文字渲染，可以轉換任何仿射變換（縮放、旋轉、剪切等）。
3. Graphviz
Graphviz是一款可視化的圖形軟件，支持SVG、PDF和Postscript，顯示交互式的圖形瀏覽器，此外，該工具擅長抽象圖形和網格，具備多種實用的特性涵蓋具體的圖表功能如顏色、字體、表格節點布局、線型樣式、超鏈接、滾動以及自定義形狀。
4. Inkscape
Inkscape是一款開源的矢量圖形編輯器，支持可縮放的SVG1.1版，支持Mac OSX，Unix OS以及Microsoft Windows系統。
Inkscape中的對象可進行偽射轉換（移動，旋轉、縮放、傾斜以及可配置的矩陣），該對象可進行分組、克隆；Inkscape支持多行文本（SVG’s <text>元素）和流動文本（非標准<flowRoot> 元素，此前提出的SVG 1.2版）。
Inkscape兼容多種格式，不僅支持其原生格式SVG，還有PS、 EPS、PD、AI (Adobe Illustrator)以及raster格式。
5. Apache Batik
Batik是由Apache軟件基金會開源的一款工具。
該工具使用Java編寫，幾乎完全支持SVG 1.1，此外，其他一些功能還將被納入到SVG 1.2原始計划中。
除了能為PNG輸出查看器和光柵化程序，Batik還支持完美的打印SVG文件格式以及TrueType-to-SVG-Font字體轉換，用戶還能將SVG轉換成PDF格式。
SVG和EPS圖像展示工具 Hypercube
Hypercube (超立方體)設有一個基於Qt的GUI簡單的基於文本的圖形來表示SVG和EPS圖像，以及作為一個Qt獨立的命令行工具的可視化工具。它采用了模擬退火算法的布局圖，可以很容易地參數進行調整，來達到所需的外觀。主要發展目標是便攜性和易於使用的，而不是高性能和復雜性。命令行工具不使用任何其他的庫比標准C ++庫，GUI工具使用“純”的Qt。
Hypercube features a Qt-based GUI tool for visualizing simple text-based graph representations as SVG and EPS images, as well as a Qt-independent commandline tool. It uses a simulated annealing algorithm to lay out the graph, which can be easily parametrized to achieve the desired look. The main development goals are portability and easy usage rather than high performance and complexity. The commandline tool does not use any other libraries than the standard C++ library, and the GUI tool uses “pure” Qt.
CLI tool
Usage: hypercube-cli [OPTIONS] FILE
OPTIONS:
-v print the program version
-s <dimensions> set image size to <dimensions>
-f <format> set output format to <format>
-e <encoding> set input file encoding to <encoding>
-o <file> set the output file to <file>
-vc <color> set vertex color to <color>
-ec <color> set edge color to <color>
-vs <size> set vertex size to <size>
-es <size> set edge size to <size>
-vf <size> set vertex font size to <size>
-ef <size> set edge font size to <size>
-d directed graph
-u undirected graph
-c asign a unique color to every uniqe edge value
-l <size> show edge color legend with font size <size>
option arguments:
<dimesnsions> width,height
<color> #RRGGBB
<format> svg eps
<encoding> iso-8859-1 iso-8859-2 iso-8859-5 iso-8859-7
windows-1250 windows-1251 windows-1252 windows-1253
koi8-r koi8-u utf-8
一直知道SVG但一直沒有詳細了解過，以前錯誤的認為畫不一樣類型的數據圖應該選擇不同的辦法，比如GD，RRD或是其他HTML類的畫圖，昨天看到很多SVG的圖，這東西簡直能畫一切，從生物科學到簡單的柱狀圖、餅圖，而且這個圖可以畫的超好看。從技術上說SVG也算是很有前瞻性，目前SVG的成功案例也不少，很多JS的HTML5圖形庫都是基於SVG的。Perl也有個SVG模塊可用。
| 等你真正用了，你會發現svg的功能還是太基礎了。 目前階段，還是flash的圖形才是主流。 html5里面，也是canvas更流行。 svg的特點是矢量，問題是現在地位很尷尬，缺乏動力 |
|
|
