為了匯出適合網站使用的 SVG 檔案，在匯出 SVG 檔案前，可以檢查是否移除了不必要的元素和屬性，以符合每個瀏覽器及設備瀏覽。選擇適合的 SVG 壓縮工具減少 SVG 檔案大小，可以提升網站載入速度。確保 SVG 檔案清晰且正常顯示，有助於提升使用者瀏覽網站的體驗。
什麼是 SVG？
SVG 是一種基於 XML 的向量圖形格式，透過文本形式存儲圖像，使用 XML 標籤描述圖形和屬性。相較於像素圖像格式 (如 JPG、PNG) 。SVG 採用幾何形狀、路徑和文本等元素建構圖像。
由於 SVG 是基於向量的，不論圖像大小如何，它可以自由縮放而不失去清晰度。這使得 SVG 成為網頁設計和開發的熱門檔案格式，可以在不同大小螢幕上提供一致的視覺效果。SVG 也支援 CSS 和 JavaScript，讓設計師和開發者可以製作出生動且互動性高的網頁元素。
如何使用 Adobe Illustrator 匯出適合網站使用的 SVG 檔案
雖然在 Adobe Illustrator 中，可以直接使用「另存新檔」的方式將檔案保存為 SVG 格式，但這樣存出來的檔案可能會產生多餘的 XML 檔案和 AI 的版本註解。所以建議使用「資產轉存」的方式進行存檔，這樣生成的 SVG 檔案會更精簡，也更適合在網頁上瀏覽。
- 於上方導覽列選擇「視窗 / 資產轉存」開啟資產轉存的介面
- 點擊資產轉存右上角的選單，開啟「格式設定」
- 選擇「SVG」格式
格式設定建議設定方式
- 樣式設定：選擇「簡報屬性」，檔案會以屬性方式標記樣式而不是 CSS 樣式
- 字體：選擇「轉換為外框」，可以確保字型樣式不會跑掉；若是使用系統內建的字型，可以選擇「SVG」來減少檔案大小
- 影像：選擇「嵌入 」，可以確保影像不會掉圖
- 物件 ID：選擇「最基本 」，避免產生不必要的 ID 屬性名稱
- 小數：2，設定到 2 已經有很好的品質，也可以節省檔案大小
儲存為 Elementor 可以更換顏色的圖示
若希望可以透過 Elementor 更改圖示的顏色，需要將物件的色碼調整為「#000000」。
透過線上平台壓縮 SVG 檔案
有不少線上平台可以壓縮 SVG 檔案，協助移除 SVG 檔案不必要的元素和屬性，減少檔案大小，以提升網站載入圖示的速度。
- SVG compressor：https://omatsuri.app/svg-compressor
- iLoveIMG：https://www.iloveimg.com/zh-tw/compress-image/compress-svg
若你的手邊沒有處理 SVG 檔案的軟體，不妨試試看以上線上平台壓縮 SVG 檔案。
如何使用 Figma 匯出適合網站使用的 SVG 檔案
匯出 SVG 檔案
在 Figma 右下角「Export」可以將圖示匯出為 SVG 檔案。
利用外掛壓縮 SVG 檔案
如果希望在 Figma 匯出縮減檔案大小的 SVG 檔案，可以另外在 Figma 安裝外掛「SVG Export」。
- 安裝好 SVG Export 後，於畫面點擊右鍵「Plugins / SVG Export」，選擇要匯出的檔案
- Default：預設最佳化 SVG 檔案
- Monochrome：可以儲存為 Elementor 可以更換顏色的 SVG 檔案
- 點擊下載圖示即可將檔案儲存至本機
