製作流程
- 安裝 Adobe Illustrator
- 準備好想設計的文字內容
- 開啟 Adobe Illustrator
- 輸入需要的文字
- 轉外框
- 輸出 .svg 檔案
什麼是轉外框
文字轉外框算是這次整個製作流程的關鍵，這個功能會把文字圖像化，這樣製作出來的才是正確的 SVG 圖片，可以透過以下兩種操作方式將文字轉外框。
- 從視窗工具列
選取文字 → 點擊視窗上方的 文字 欄位 → 選取清單中的 建立外框 → 完成 - 快捷鍵
選取文字 → 按下鍵盤 Ctrl + Shift + O → 完成
符合圖稿邊界
這個動作可以將圖片多餘的白色背景去除，讓內容跟白色背景切齊，對我來說看起來比較舒服，也讓我比較好切圖。
操作方式：點選視窗上方的 物件 欄位 → 選取 工作區域 → 選取 符合圖稿邊界。
辨識 SVG 是否正確
完成輸出 SVG 檔案後，可以使用 VSCode 打開剛才轉出來的 .svg 檔案，如果看到結構是接近 HTML 的格式，那才是正確的格式喔！如果看到像是一堆亂碼的話則是錯誤的結構。
以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫