我本來以為SVG是一個很簡單的易懂的東西，結果不是，就開始研究，這一篇算是一個學習文，希望對大家能有幫助。

很厲害的部落客ＯＸＸＯ寫了31篇中文介紹，真的很厲害，有要深入研究者，一定要讀，對各個功能解說得很詳細：SVG 完整教學 31 天

SVG 一切源自D3，全名叫作 Data-Driven Documents（Ｄ三個，所以叫D3，中文應該是翻譯成：資料驅動文件 ），可以看看著偉大的網頁：D3 - DDD 的偉大世界，基本上，就是用資料來做圖，這會是一個對大數據資料很有用的研究方向，對人工智慧的人機溝通方式也會是一個很有突破點的研究方向。

SVG（Scalable Vector Graphics）為一種可縮放向量圖形，是根基於 XML，說了一堆，SVG 其實就是一種可縮放向量圖形，像是Adobe Illustrator，如果各位有用，英文是 Scalable Vector Graphics，資料儲存是用 XML，觀念上，就是小時候報紙上的連連看圖，最大的用處就是可以放大，不變形。  事實上，你可以用 Illustrator 來產生SVG。

其實看一堆文，都比不上自己做一個，然後改改試試來的學得快，如果對 Adobe Illustrator (AI) 很熟悉，當然就可以用 AI 來試試，但是如果是程式設計師，或是學生，我想，AI 還是有一定的門檻，特別是，他很貴，我發現一個軟體很好用，而且，他免費！

他們自己說開發到第四版前都免費的 janvas

這個軟體也不用裝，儲存就用 Google Drive，非常適合教學或是自己學 SVG ，甚至做其他向量圖。

使用介面跟方法很像簡化版的 AI 或是 Corel Draw，這兩個應該是目前最常用的向量製圖軟體，所以當成一個入門學習也不錯，基本上一開始可以都按按看各個上面的畫圖選項，畫的圓線很簡單的，再改改顏色線條粗細，最好玩的就是螢幕右下方的 preview html，隨時可以按一下，你就可以看到你畫出來的圖在網頁上的樣子了，很好玩的。

一旦做好了你的偉大 SVG 第一版，就把它存起來，這就是你的第一個自創 SVG 了，很棒吧，接下來你就可以好好來實驗這個 SVG 了。

你如果沒改太多設定，這一個 SVG 其實就是一個網頁的全頁，用你習慣的網頁編輯，我是 Atom 的愛用者，打開，你就知道我說什麼了，就是HTML。

接下來，你只要找到 SVG tag，把它挖出來，就是你的 SVG 了。

怎麼挖，因爲 Janvas 會把 SVG 做成一行，我都把從新排一下，挖下來的應該就會像這樣：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  <g type="LAYER" name="Layer 01" id="Layer 01">

    <path transform="matrix(1 0 0 1 286.452002137509...

    <path transform="matrix(1 0 0 1 -0.795973540....

    ....

  </g>

</svg>

把它貼到你的網頁上，你的 SVG 就問世了，既然是向量檔，第一個要改的就是大小，找到：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="" pageAlignment="none" x="0px" y="0px" width="842px" height="595px" viewBox="0 0 842 595" enable-background="new 0 0 842 595" xml:space="preserve"><defs/><g type="LAYER" name="workspace" id="workspace" locked="true"/>
<g type="LAYER" name="Layer 01" id="Layer 01">

改改看 width 和 height，你就可以隨意地改變大小，很方便，接下來你就自己玩到熟悉吧，SVG 有太多東西可以玩了，大小、動作、顏色、變形、等等，就看你的需求了，不過，我覺得，自己做 SVG 應該是用在特殊的地方，像是公司 Logo、網頁視覺焦點、主圖等 ，一定要用卻找不到適當 Icon 時，可以試試，但是，不容易，畢竟，要跟網頁顏色，連結變化，大小排列都順暢，要花時間的，所以，建議做一個先試試，可以就用吧，很好玩就是了。

希望大家學習 SVG 愉快！