文 / 早晚成長 · 鴨弟安安
Hi，這裡是安安。上回的SVG科普小文大家還記得嗎？
工欲善其事必先利其器，如果你有興趣深究svg技術，或者是成為小編們羨慕的排版達人的話，那麼今天的SVG工具安利一定得Mark下來哦~
|基礎製作篇|
01. Adobe Illustrator
官方下載：
https://www.adobe.com/cn/products/illustrator
支持：Mac / Windows
關於製作SVG，首推當然是我Adobe全家桶中的AI啦
Adobe Illustrator作為全球最著名的矢量圖形軟件，以其強大的功能和體貼用戶的界面，已經佔據了全球矢量編輯軟件中的大部分份額。全球有37%的設計師在使用Adobe Illustrator進行藝術設計。
作為一款非常好的矢量圖形處理工具，該軟件主要應用於印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的製作等，當然SVG的製作自是不在話下。
02. Sketch
官方下載：https://www.sketch.com/
支持：Mac
這是設計師人群中非常流行的一款設計工具。全矢量、輕量級、像素級精準，非常適合做移動端應用類的界面設計和圖標設計，甚至創建自己的字體，堪稱為UI設計而生的軟件啦。
但一年99美金的收費不低喔，如果不是設計師，安安建議用AI就夠啦~
01. SVG.js
https://bonsaijs.org/
支持：Web
SVG.js庫為開發人員和設計人員提供了一些功能，可以讓你將多個SVG圖像拼接在一起，創建出可用於視頻項目，酷炫的網頁動畫，當然這一切都取決於你的創造力。
02. 矢量圖編輯器：Boxysvg
在線地址：https://boxy-svg.com
支持：Mac
Boxysvg是一款可擴展的矢量圖形編輯器。SVG是存儲矢量圖形的標準格式，如圖標、橫幅、圖表和插圖。此項目的目標是為非技術用戶以及專業設計人員和開發人員創建最好的SVG編輯器。
|輔助篇|
01. 交互式SVG座標
地址：https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html
設計SVG，離不開它的座標系統。這是一個由Sara Souiden 編寫的超讚的交互工具，可以幫助你理解SVG座標系統是怎麼一回事。
使用 SVG 的 viewBox 和 preserveAspectRatio，也就是下圖所示的粉色線和橙色線，以及旁邊的標尺，你可以在折騰的過程中學習到 SVG 座標是如何工作的。
關於如何使用這個座標系統，可參考下面這篇文章
傳送門：https://www.sarasoueidan.com/blog/svg-coordinate-systems/
02. SVG Morpheus
http://alexk111.github.io/SVG-Morpheus/
支持：Windows / Mac
SVG Morpheous 是一個 JavaScript 庫，允許你從一個形狀到另一個形狀改變一個 SVG 圖標，但它並不會那麼生硬地變換。並且你可以設置寬鬆效果，過度動畫的持續時間，以及旋轉的方向。
03. Snapsvg
在線地址：http://snapsvg.io/
支持：Web
Snap.svg 是專為現代瀏覽器打造，支持剪裁，遮罩，紋理，漸變，分組等功能。可以用來創建互動，在任何大小的屏幕上都會很好看、與分辨率無關的矢量圖形。憑藉豐富的動畫庫和易於的事件處理，Snap.svg 可以幫助你輕鬆實現SVG功能。
04. SVG背景生成器：Trianglify
在線地址：https://trianglify.io/
支持：Web
如果你只需要一個簡單的多邊形的紋理背景，那麼可以使用 Trianglify 生成器創建漂亮的 SVG 幾何圖案。你可以隨意更換設置顏色，粒度大小並選擇一個顏色調色板來配合使用。設置完成以後，即可點擊下載SVG圖案，實在是很方便了。
05. Bonsai
https://bonsaijs.org/
支持：Web
一個強大的超棒輕量級javascript圖形類庫。它使用SVG作為輸出方式來生成圖形和動畫效果，擁有非常完整的圖形處理API，可以使得你更加方便的處理圖形效果。
寫在最後
如果本期沒有看懂這些軟件的用法也不用擔心 ，之後安安會進一步為小夥伴們出系列的教程，繼續關注就可以學習到啦~
* 資料參考：How To Create SVG Animation Using CSS
閱讀更多 早晚成長 的文章
