如何使用 Adobe Illustrator 輸出適合網頁瀏覽的 SVG 檔案

Adobe Illustrator 可以直接使用另存新檔的方式保存成 SVG 檔案，不過存出來的檔案會有多餘的 xml 檔頭以及 AI 版本註解，比較建議使用「視窗 > 資產轉存」面板進行存檔，這樣生出來的檔案會比較精簡也更適合在網頁上瀏覽。在轉存之前，還需要修改一些設定...

點擊「資產轉存」面板右上角的選單按鈕，再選擇「格式設定...」

然後再對話視窗選擇「SVG」格式，接著按照以下建議設定：

• 樣式設定：簡報屬性 - 直接以屬性方式標記樣式而不是使用 CSS 樣式。
• 字體：轉換為外框 - 文字轉外框雖然會提高檔案容量，但可以保持字體樣貌；如果你要使用系統內置字型，可選擇「SVG」來減少檔案容量。
• 影像：嵌入 - 影像嵌入雖然會提高檔案容量，但可以保證顯示影像不掉圖；如果你需要使用更小的檔案容量可以使用「連結」設定，但要記得上線時要再確認路徑的位置是否正確。
• 物件 ID：最基本 - 避免產生不必要的 id 屬性名稱。
• 小數：2 - 越大的值成像品質會愈佳，可以設定 1 ~ 7 之間的數字，實際上設定到 2 的品質已經很不錯了！檔案容量也會節省很多。
• 縮小：勾選 - 去除 xml 檔頭以及不必要的註解。
• 回應式：勾選 - 去除預設的高寬值，影像會以 100% 的寬隨著瀏覽器視窗寬度變化。

上圖是使用 Adobe Illustrator 25.2.1 版本的畫面截圖

如果你還是想要使用另存新檔的方式保存，也可以參考下圖設定