跳到主要內容

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

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

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

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

AI 資產轉存的格式設定

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

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

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

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

AI 另存新檔 SVG 設置

這個網誌中的熱門文章

Google Doodles 中文版遊戲全蒐集

Google Doodles  塗鴉牆原本是在節慶或紀念日時,會在 Google 首頁臨時刊登的特別圖案,後來發展成動畫以及互動遊戲的形式,而且有些遊戲做的很用心很好玩!甚至還有直播主會特別開台遊玩。這裡蒐集了歷年有「中文」版本且支援手機遊玩的互動遊戲,have fun 👏 PAC-MAN 2025 萬聖節 推出時間:2025/10/30 遊戲說明:眾所皆知的 PAC-MAN 小精靈遊戲,全部由 8 個關卡,別忘記蒐集所有的物品 好玩程度:⭐⭐⭐⭐

分享 Google 日曆的中華民國 114 ~ 115 年 (2025 ~ 2025 休假行事曆也包含勞動節)

以下是 Google 日曆按照行政院人事行政總處公告的中華民國 115 年 (2026) 政府行政機關辦公日曆表製成的,並且再加入 5/1 勞動節。 請使用此 鏈接開啟 Google 日曆 點擊左下角的《新增至 Google 日曆》匯入,另有 iCAL 格式 提供其他應用程式匯入。

推薦 Visual Studio Code 前端網頁設計的擴充套件(延伸模組 Extensions)

以下整理推薦幾個 Visual Studio Code (VSCode) 前端網頁設計開發會使用到的擴充套件(延伸模組 Extensions)這些都是我使用過後覺得必備也常用的套件,適合 Html, Sass/SCSS, JavaScript 網頁設計語法開發!