製作流程

  1. 安裝 Adobe Illustrator
  2. 準備好想設計的文字內容
  3. 開啟 Adobe Illustrator
  4. 輸入需要的文字
  5. 轉外框
  6. 輸出 .svg 檔案

什麼是轉外框

文字轉外框算是這次整個製作流程的關鍵,這個功能會把文字圖像化,這樣製作出來的才是正確的 SVG 圖片,可以透過以下兩種操作方式將文字轉外框。

  1. 從視窗工具列
    選取文字 → 點擊視窗上方的 文字 欄位 → 選取清單中的 建立外框 → 完成
  2. 快捷鍵
    選取文字 → 按下鍵盤 Ctrl + Shift + O → 完成

符合圖稿邊界

這個動作可以將圖片多餘的白色背景去除,讓內容跟白色背景切齊,對我來說看起來比較舒服,也讓我比較好切圖。
操作方式:點選視窗上方的 物件 欄位 → 選取 工作區域 → 選取 符合圖稿邊界

辨識 SVG 是否正確

完成輸出 SVG 檔案後,可以使用 VSCode 打開剛才轉出來的 .svg 檔案,如果看到結構是接近 HTML 的格式,那才是正確的格式喔!如果看到像是一堆亂碼的話則是錯誤的結構。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫