沒有illustrator也可以畫向量圖，免費向量軟體Boxy SVG中文教學

歡迎加入Miss Maker王品驊的粉絲頁 ^^

一直以來，教學時常常遇到要用甚麼軟體才好，付費軟體的功能雖然強大，但是要一個初學者動輒花個數千元去買軟體，這費用比小妹我的教學費還貴，似乎是不太可能。而免費的向量繪圖軟體，目前大家都還是使用Inkscape，但是這個軟體有兩個擾人的問題，一是使用介面不那麼好學，過度依賴快捷鍵，二是太容易當掉，因為Inkscape不僅是免費軟體，更是開源軟體，程式一直處於一個更新的狀態，當然問題就會多一點，所以我一直在找更合用的軟體，終於出現Boxy SVG，我自己用了覺得不錯，也推薦給大家試用看看。

目前Boxy SVG的教學，連英文的都不太多，更不用說中文了，官網也沒有將功能逐一介紹，因為大部分的功能跟illustrator相似，只有少部分不同，大概是覺得不需要吧。既然如此，我就自己入坑了，跟大家來介紹一下Boxy SVG的使用介面跟工具名稱的翻譯。

哪兒下載?

連結在此，谷哥大神給的
https://boxy-svg.com/main.html#download
下載好之後，打開chrome，按視窗上方最左邊的[應用程式]

點進去後，Boxy SVG的開始畫面長這樣

左側基本工具

Boxy SVG的工具基本上都跟Illustrator可以互通，只有少部分不同，之後學得更深了，要轉移完全無痛感。

• 選取

選取想要工作的物件，再去右側微調工具列進行微調，也可以按一下進入傾斜度更改，按兩下進入錨點的選取，就是下一個直接選取的功能。

• 直接選取

不是選單一物件，而是選到該物件的錨點，針對局部去修改細節，雙點擊錨點，可以改變線的狀態。

• 貝茲曲線

Boxy SVG兩種曲線繪圖方式，一個是錨點上只會出現一邊的控制桿，當然可以手動新增另一邊的控制，另一個則是雙邊控制桿，要注意修改的變化是會對稱的。

• 筆畫

將滑鼠當筆一樣使用，需要練習，才不會手殘

• 文字工具

輸入文字，記得確定文字的字型大小後，要轉成路徑，不然其他電腦會無法辨識，變換成路徑的這個部分在後面會說明。

• 基本預設圖形

隨著版本升級，越來越多預設好的基本幾何圖形，超方便!選好圖形之後，點一下會出現黃色跟紅色的錨點，可以改變傾斜度，點兩下，則是綠色錨點，圖形而有不同的效果，譬如正方形的綠色錨點是改變導角，多邊形中心的綠色錨點，移動會改變邊的數量等等。

右側微調工具

利用[選取功能]選好要工作的物件後，主要就是在右邊這排決定要做怎樣的處理，大部分有中文翻譯，就是一看就懂的，很直覺，也有很多好用的功能，沒事可以多玩玩!

• 填色跟外框

通常我們說的物件，就是一個封閉的路徑，不論這是路徑有沒有封閉，都會有兩個選項可以調整，一個是外框，就是路徑本身的顏色，另一個就是填色，兩個的填色方式都有素面色，漸層，填圖樣等選擇。吸管填色功能，按著Q，左鍵點選視窗上的顏色。

• 透明度跟遮色片

遮色片就像是一層薄紗一樣，覆蓋在物件上面，讓物件多一點陰影或質感。

• 字體

變更字型，大小等等。

• 工作區

輸出的範圍部分，留底的可以放在工作區外，輸出時成PNG檔案時看不到。

• 對齊及排列物件

選取多個物件，可以對齊，置中，放大到同工作區，靠邊放置，旋轉，鏡射，群組都在這裡。排列則是改變物件的前後順序，前面的物件會蓋住後面的物件。

• 圖層

其實這是illustrator的說法，這裡直翻的話是物件，其實是一樣的，就是上一個排列的物件列表，也可以在圖層這邊更動。

• 定義

可以紀錄自己設計的，或是常用的圖樣，花版，字型。

• 圖庫

現成圖形素材。

• 尺寸定位跟旋轉

可以設定尺寸，或是在工作區中的座標，排列視窗的旋轉只有90度，而這邊是可以自由設定旋轉角度。

• 後設資料描述檔

描述檔看起來很難理解，其實這個主要是針對網頁使用的，對，沒錯，這也是個好用的網頁設計軟體，利用SVG檔做網頁美術的部分，取代一張又一張的照片，是CSS的一種，就是<style>的部分。傳統寫code時，要自己先預估數值大概多少，等到跑程式才看的到結果。這個軟體讓你直接畫就好，他幫你轉譯成HTML，簡直佛心。

• 路徑

路徑最主要的，就是文字的轉換，讓文字變成一個物件，也可以進行局部修改及輸出。還有將多個路徑進行各種布林，像是交集，連集，差集...，甚至更複雜的複合途徑，都在這邊處理。

• 匯出

可以轉存成JPG及PNG，向量的SVG，網頁用的HTML

轉檔

由於我們教學上使用的雷切機，都是對岸的軟體，而這個軟體只能判讀.dxf的檔案格式，所以我又從網路上找了個雲端轉檔的程式，選擇很多，要注意的小地方就是盡量不要有群組或是複合途徑，越單純越不會出錯，如果有甚麼問題，或是發現甚麼更棒的新軟體，歡迎大家到粉絲團留言。

雲端轉檔

https://cloudconvert.com/svg-to-dxf