8個實用的SVG工具，20 個有用的 SVG 工具，五款超實用的開源SVG工具

8個實用的SVG工具

[導讀] 你還在為沒有好用的SVG工具而發愁嗎？開發人員的福音來啦！小編為大家收集羅列了8款實用的SVG工具，讓我們一起來看看吧！

       SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C在2000年8月制定的一種新的二維矢量圖形格 式，也是規范中的網絡矢量圖形標准。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。

       鑒於近幾年SVG迅猛的發展，小編為大家介紹幾款實用的SVG工具，幫助你的Web開發。
 

SVG Circus

       SVG Circus能夠幫助你在幾秒之內創建很酷的SVG spinners、加載器和其他循環動畫。你也可以改變諸如起點、動畫的路徑等等，同時也提出了許多可供選擇的技巧。

 

Snap.svg

       Snap.svg是專為現代瀏覽器設計的，它支持屏蔽、剪裁、完整漸變等新的SVG功能。

 

iconmelon

       盡管支持SVG的眾多優秀的瀏覽器日益普及，但是卻缺乏良好的矢量圖標方法，而作為SVG的iconmelon工具及時地填補了這一空白，使用它作為Web項目的矢量圖標着實是一個不錯的選擇。

 

Plain Pattern

       這是個人覺得非常值得推薦給大家的一個工具，在Plain Pattern的網站上，你能夠根據你所選擇的顏色快速地生成SVG圖形，這可能比任何手寫的形式都要快！

 

Highcharts

       Highcharts是一個用純JavaScript編寫的圖表庫，它提供在你網站或者Web應用程序當中添加交互式圖表的簡單方法。Highcharts目前支持散點圖、條形圖等。

 

Glyphter

       這是一個非常神奇的SVG工具，它能夠帶你玩轉所有類型的字體以及圖標。你可以針對不同目的的字體和圖標進行細節修改，讓其更具吸引力。

 

Paths.js

       Paths.js可以幫助生成SVG路徑的高水平API。這些路徑的API可以使用同一個模板引擎，用來在瀏覽器中顯示SVG圖形。

 

svg.js

       一個輕量級的操作庫和SVG動畫。你不會找到一個庫，比它的體積更小更簡潔。同時我還發現svg.js提供了一些增強體驗功能的插件，它允許你修改過濾器的圖片和你正在構建的圖標。

 

 

 

20 個有用的 SVG 工具，提供更好的圖像處理

英文原文：20 Useful SVG Tools for Better Graphics

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 坐標是如何工作的。	勾滿譽 翻譯於 6個月前 0人頂 頂 翻譯的不錯哦!
	其它翻譯版本(1)

b64 b64 是一個通過將圖像格式轉換為 base64 來進行優化的小工具。 你可以直接把你的 SVG 圖像（或者 JPG 和 PNG 也行）扔進去，然后直接把結果作為 CSS 弄到你的網站上就行了。 SVGO 默認的 SVG 包含了許多可刪除的不必要的信息，刪除這些東西不會影響圖像本身。如果你想刪除關於編輯器元數據、注釋或者隱藏的節點，你可以用 SVGO。 你可以通過 npm 來安裝 SVGO  $ [sudo] npm install -g svgo 也可以使用 GUI 版本，這樣你就可以愉快的拖拖拖了。 SVG OMG SVG OMG 將 SVGO 的命令行包裝成了一個帶 GUI 的版本，你可以簡單的通過點點按鈕來打開和關閉特性，最后你導出一下圖片或者代碼就行了。	勾滿譽 翻譯於 6個月前 0人頂 頂 翻譯的不錯哦!
	其它翻譯版本(1)

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。這個工具可以讓你制作自己的加載器，旋轉器，或者任何類似的循環動畫。設置‘角色’，位置，尺寸，顏色和其他形式的面板，之后輸出就可以得到結果。

無若 翻譯於 6個月前 0人頂 頂 翻譯的不錯哦!

其它翻譯版本(1)

SVG Sprite SVG Sprite 是一個Node.js 模塊， 可以優化一大堆 SVG 文件，並烤制成 SVG sprite-types，帶有傳統的背景 CSS sprites 或者前景圖片，SVG stacks 以及其他的。 Quasi 使用 quasi，你可以生成如下看到的 Quasicrystal  圖片。這個生成器只是試驗性的，但是結果卻是很酷。你可以通過改變選項值試用一下，然后使用'Save SVG'按鈕下載下來。 Plain Pattern 使用 SVG 創圖案從來就不是簡單而很有趣的事情。上傳你的圖片，按比例縮小或改變間隔，旋轉和重新着色，直到你得到一個漂亮的圖案。你可以在下載之前預覽結果。	eason02 翻譯於 5個月前 0人頂 頂 翻譯的不錯哦!
	其它翻譯版本(1)

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 來運行腳本了。

eason02 翻譯於 5個月前 1人頂 頂 翻譯的不錯哦!

其它翻譯版本(1)

SVG Filters 你知道使用 SVG 可以對圖片添加效果嗎？例如色度，飽和度，模糊度，線性顏色疊加和其他效果。這是一款可以顯現這些效果的工具，然后給你一個小片段使得它容易被嵌入效果到你的項目中。 SVG Morpheous SVG Morpheous 是一個 JavaScript 庫，允許你從一個形狀到另一個形狀改變一個 SVG 圖標。你可以設置寬松效果，過度動畫的持續時間，以及旋轉的方向。 Clip path generator SVG 允許你單擊圖片形狀修剪。如果形狀在一個方形或者圓形里邊，就相當簡單。但是假設形狀是一個帶有很多店或者多邊形的呢？這就是你需要找個 Clip Path Generator 工具了。 Chartist.js Chartist.js 一個創建高可定制化響應式圖表的庫。它利用 SVG 來顯示圖表，也可以使用 SMIL 動畫。使用這個庫，你可以創建線性圖表，餅圖，直方圖和其他類型的圖表，甚至可以跟圖表添加動畫。

eason02 翻譯於 5個月前 1人頂 頂 翻譯的不錯哦!

其它翻譯版本(1)

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 Batik Apache Inkscape Cairo Graphviz 開源

摘要：SVG是基於XML的矢量圖像格式，用戶可靈活運用圖像進行搜索、索引、腳本以及壓縮。本文分享5款超實用的開源的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格式。

英文鏈接：Idrsolutions