跳到主要內容

如何使用 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 設置

這個網誌中的熱門文章

DaVinci Resolve 輸出 Youtube 影片的最佳設定

雖然 DaVinci Resolve 已經有內建 Youtube 的渲染預設可以用,但我自己輸出影片常常發生畫面出現殘影或是馬賽克的情況,很明顯是編碼位元率的設置不夠高,但是 Youtube 渲染的界面沒有什麼進階設定可以用,建議還是選擇《H.264 Master 》的渲染設置 接下來會出現一些中國用語,主要我使用簡體中文版本使用,敬請見諒 🙇‍♂️ 首先是視頻頁籤的部分,按照 Youtube 建議的上傳編碼設定 文件說明,格式使用 MP4 並且編解碼器使用 H.264  這是為了有較好的處理速度,如果編碼成 H.265 雖然檔案比較小,但為了兼容性 Youtube 會再次將你的 H.265 影片轉成 H.264 因此效率較低,也有可能會降低你影片的畫質。編碼器維持 Auto 並勾選 網路優化 讓影片檔案適合網路串流。 接著分辨率與幀率就按照你專案的需求設定即可,接著編碼配置文件選擇 High 會有較好畫質,關鍵幀則是設定 影格率的兩倍 ,假如你的影片是 30fps 這裡就將關鍵幀設定成 60 目的是為了刷新畫面最多 2 秒的意思,如果畫面出現了殘影也頂多在 2 秒內更新。但關鍵幀不是越短越好,會導致檔案容量太大,上傳到 Youtube 後,平台可能也會再重新轉檔。 接著幀重新排序請 取消 勾選,這是 H.264 產生殘影最常見的原因。它會打亂影格順序以節省空間,但許多播放器或編碼錯誤會導致畫面像溶化一樣的黏在一起。 接著 Preset 設定為 質量 ,編碼器會花更多運算資源去分析畫面提升畫面品質。Rate Control 設定成 可變比特率 ,按照  YouTube 建議的上傳編碼設定 採用可變位元率,並且在 Bit Rate 設定位元率,假如你是 1080p 30fps 的 SDR 影片,應該要設定成 8000 Kb/s 等於 Youtube 建議的 8 Mbps。 類型 視訊位元率,標準影格速率 (24、25、30) 視訊位元率,高畫面更新率 (48、50、60) 8K 80000 ~ 160000 Kbs 120000 ~ 240000 Kb/s 2160p (4K) 35000 ~ 45000 Kb/s 53000 ~ 68000 Kb/s 1440p (2K) 16000 Kb/s 24000 Kb/s 1080p 8000 Kb/...

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

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

2025 年第 97 屆奧斯卡 Oscars Academy Awards 入圍得獎電影的台灣上映時間與線上看平台

以下整理 2025 年第 97 屆奧斯卡 Oscars Academy Awards 入圍最佳電影的台灣上映時間以及電影預告,部分線上看平台的連結。奧斯卡獎於美國時間 2025/3/2 頒發 艾諾拉 Anora 台灣上映時間:2024/12/6 線上看平台: My Video ,  Youtube 電影 ,  Apple TV ,  Hami Video ,  Friday 影音 ,  Catchplay+ 入圍 6 項提名:最佳影片、最佳導演 Sean Baker﹑最佳女主角 Mikey Madison、最佳男配角 Yura Borisov、最佳原創劇本 Sean Baker、最佳剪輯 Sean Baker 得獎項目:🏆最佳影片、🏆最佳導演 Sean Baker﹑🏆最佳女主角 Mikey Madiso、🏆最佳原創劇本 Sean Baker、🏆最佳剪輯 Sean Baker