如何使用
- 點擊「加載示例 SVG」查看一個帶冗餘元資料的設計導出圖示如何被精簡,或拖曳輸入自己的
.svg檔案。 - 也可以把從 Figma、Illustrator、Sketch 或代碼倉庫複製的原始
<svg>代碼貼上到輸入框。 - 選擇「標準」進行更穩妥的預設最佳化;需要進一步減小體積時,再切換到「激進」。
- 查看「原始體積」「最佳化後體積」和「已節省」,並用右側預覽確認圖形沒有明顯變化。
- 點擊「複製 SVG 代碼」用於 HTML、React 或圖示組件,或點擊「下載 SVG」保存最佳化檔案。
示例場景:把設計工具導出的品牌圖示貼上進工具,確認節省比例和預覽效果後,複製精簡後的內聯 SVG 用於網頁導航欄或按鈕圖示。
核心功能
- SVGO 驅動的 SVG 壓縮:使用瀏覽器端 SVGO 精簡向量標記,去除元資料、空分組和可壓縮屬性。
- 清理 Figma / Illustrator 導出代碼:適合把設計工具導出的冗長 SVG 變成更適合上線的圖示代碼。
- 即時體積對比:載入後顯示原始體積、最佳化後體積和節省比例,快速判斷是否值得替換資源。
- 複製代碼或下載檔案:一鍵複製最佳化後的
<svg>標記,也可以下載新的.svg檔案。 - 本機處理保護設計資產:檔案讀取、SVGO 最佳化、預覽和導出都在當前瀏覽器內完成,不上傳圖示、Logo 或未公開插畫。
相關工具
2026 最新 FIRE 財務自由計算機(剔除通膨版)。拒絕虛高數字,精準模擬實際購買力下的複利增長。支援 4% 法則驗證與退休金缺口反向推算。支援一鍵匯出 CSV,完美適配 Excel 或 Notion 財務看板。隱私優先,本機計算零上傳。
根據帳戶資金、風險比例、進場價和停損價計算交易倉位。所有計算在瀏覽器本機完成,不上傳帳戶資料,可對比多檔風險方案。
輸入本金、定期投入、年化報酬率和投資年限,計算複利增長結果,並用互動式圖表展示本金、利息和最終總額。資料僅在本機計算。
使用 Loan Calculator/Mortgage Calculator 在瀏覽器本機計算每月還款額、總利息與還款明細。輸入貸款金額、年利率和期限,立即查看圖表與還款計畫表。
使用 Investment Calculator/ROI Calculator 在瀏覽器本機估算初始本金、每月定期定額、年化報酬率和通膨後的投資結果。立即查看複利圖表、本金/收益拆解、ROI 與年度明細。
使用 APR to APY Calculator 在瀏覽器本機完成 APR/APY 雙向換算。輸入利率並選擇複利頻率,立即查看有效年利率、差值和多頻率比較表。
使用這款利潤率計算機在瀏覽器本機計算毛利、Margin 和 Markup。輸入成本和售價,或輸入成本與目標毛利率,立即推算售價並避免把加成率誤當利潤率。
使用 CPM 與 CPC 計算機在瀏覽器本機試算廣告花費、曝光數、點擊數、CPM、CPC 和 CTR。輸入預算與目標成本,快速推演可獲得的曝光或點擊。
計算邏輯
SVG 最佳化不是把向量圖轉成位圖,而是清理 XML 向量標記本身。本工具調用運行在瀏覽器端的 SVGO,常見處理包括刪除編輯器元資料、合併無意義分組、移除空屬性、壓縮路徑和捨入坐標。
「標準」模式偏向穩妥,適合大多數圖示和插畫;「激進」模式會啓用多輪最佳化並使用更短數值精度,體積可能更小,但極複雜路徑可能出現細微視覺差異。工具不會點陣化 SVG,最佳化後仍然是可複製、可下載的向量代碼。
常見問題
如何減小 SVG 檔案體積?
最常見的方法是移除設計工具寫入的元資料、空分組、冗餘屬性和可壓縮路徑。本工具會用 SVGO 在瀏覽器裏執行這些最佳化,並顯示節省比例。
如何清理 Figma 導出的 SVG 代碼?
把 Figma 導出的 .svg 檔案拖曳輸入工具,或直接貼上 <svg> 代碼。建議先用「標準」模式檢查結果,確認預覽正常後再複製或下載。
SVG 壓縮會降低圖片品質嗎?
通常不會。SVG 是向量標記,SVGO 主要移除不可見的元資料和冗餘結構。不過極複雜路徑在「激進」模式下可能出現細微變化,建議先看預覽再替換生產資源。
這個工具會上傳我的圖示或插畫嗎?
不會。檔案讀取、SVGO 最佳化、預覽、複製和下載都在瀏覽器本機完成。
可以把最佳化後的 SVG 直接用於 HTML 嗎?
可以。「複製 SVG 代碼」會複製完整的 <svg> 標記,適合內聯到 HTML、React 組件或圖示系統。
它能把 PNG 或 JPG 轉成 SVG 嗎?
不能。這個工具只最佳化已有 SVG 向量代碼,不執行位圖轉向量。