總結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 中有一個不支援的格式。下載腳本到這個工具裡邊， 然後複製到 Adob​​​​e 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（對另一些人來說，成功是有議可爭的）。

以上是總結SVG 工具，提供更好的影像處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！