標題：SVG 檔案在網站中的優化指南
描述：如何正確使用與優化 SVG 檔案，提升網站效能並保持視覺質量
最後更新：2025-04-29
版本：v1.0
作者：rj0217
來源：COVIA官方知識
SVG 檔案在網站中的優化指南
什麼是 SVG 檔案？
SVG (Scalable Vector Graphics) 是基於 XML 的向量圖形格式，與 PNG、JPEG 等點陣圖格式不同，SVG 不會因放大而失真，適合用於網站的標誌、圖標和插圖。
SVG 與網站效能的關係
SVG 的優勢
- 可縮放性：無論尺寸如何，都不會失真
- 檔案較小：通常比同等視覺效果的高解析度點陣圖小
- 可互動：支援 CSS 動畫和 JavaScript 互動
- 可訪問性：可被搜尋引擎識別和讀取
影響 SVG 效能的主要因素
SVG 的效能影響不主要取決於像素尺寸（如 2736×995），而是：
- 路徑複雜度：SVG 中的路徑點數量
- 元素數量：圖形中的形狀、路徑、文字等元素總數
- 效果使用：濾鏡、漸變、陰影等特效的數量和複雜度
使用 AI 工具生成的 SVG 特性
使用 Adobe 等 AI 工具生成的 SVG 文件可能存在以下特點：
- 可能包含大量自動生成的節點和路徑
- 有時會包含不必要的元數據
- 可能未經過代碼優化
SVG 優化工具介紹
SVGOMG - 網頁界面優化工具
SVGOMG (https://jakearchibald.github.io/svgomg/) 是 SVGO 的網頁界面版本，提供了直觀的使用體驗：
優勢：
- 拖放式操作，無需安裝軟體
- 即時預覽優化效果
- 可選擇性啟用/停用各種優化選項
SVGO - 命令行優化工具
SVGO (https://github.com/svg/svgo) 是一個開源的 Node.js 命令行工具：
使用場景：
- 適合開發者自動化工作流程
- 可集成到建置系統中
- 適合批量處理多個 SVG 檔案
兩者的關係
SVGOMG 和 SVGO 使用相同的優化引擎，區別在於：
- SVGO 是命令行工具，適合技術用戶
- SVGOMG 是網頁界面，適合所有類型的用戶
- 兩者核心功能相同，只是使用方式不同
SVG 優化最佳實踐
1. 優化步驟
- 在設計工具中創建或使用 AI 工具生成 SVG
- 將 SVG 上傳到 SVGOMG
- 調整優化設定：
- 確保保留
viewBox屬性 - 對於互動 SVG，保留必要的 ID 屬性
- 根據需要保留註釋或分組
- 確保保留
- 預覽並下載優化後的 SVG
2. 優化效果判斷
優化效果通常分為以下級別：
- 顯著優化：減少 30-70% 的檔案大小
- 中等優化：減少 10-30% 的檔案大小
- 微小優化：減少不到 10% 的檔案大小
如果優化結果顯示保留率超過 95%（如 15.41k → 14.96k，97.08%），通常表示：
- SVG 已經相當乾淨和優化
- 可能是結構簡單的 SVG
- 主要內容不可進一步優化
3. 在網站中使用 SVG 的代碼示例
在 Markdown 中：
在 HTML 中（帶懶加載）：
<img
src="/img/logo.svg"
alt="標誌說明"
width="100%"
height="auto"
loading="lazy"
/>
適合與不適合使用 SVG 的場景
適合使用 SVG
- 標誌和圖標
- 簡單插圖和圖表
- 需要互動的圖形
- 需要動畫效果的元素
謹慎使用 SVG
- 極度複雜的場景
- 照片級真實插圖
- 需要豐富紋理的圖像
總結
SVG 是網站中非常有用的圖像格式，尤其適合需要清晰度和可縮放性的場景。通過合理優化，SVG 可以在保持視覺質量的同時提升網站效能。對於大多數網站項目，即使是較大尺寸（如 2736×995）的 SVG 檔案，只要內部結構合理優化，通常不會對網站效能造成顯著負面影響。
進階補充：大型 SVG 的效能優化策略
對於必須使用大型、複雜 SVG 的情況，可考慮以下策略：
-
延遲加載：
<img src="placeholder.svg" data-src="large.svg" class="lazyload" alt="描述" /> -
分割複雜 SVG：將一個大型 SVG 分割為多個小型 SVG
-
考慮使用
<use>元素：重用 SVG 元素來減少代碼重複 -
移除不必要的精確度：減少小數點位數可顯著減小檔案大小
同場加映
- WEBP 轉譯工具:https://tinypng.com/