在瀏覽器本機一鍵清除 Adobe Illustrator、Figma 與 Inkscape 匯出的冗餘中繼資料、XML 註解、隱藏圖層及過長座標小數位,視覺畫質分毫不損。
或點擊選擇檔案
基於 Adobe Illustrator、Figma 與 Inkscape 匯出的原始向量檔案實測,直觀展示清理前後的位元組大小與原始碼變化。
移除了多達 21 KB 的 Adobe XMP 標頭封包、<i:pgf> 私有標籤及未使用的 XML 命名空間,並將 4,200 多個路徑座標從 6 位小數四捨五入至 2 位,放大 400% 檢視無任何視覺偏移。
一次拖曳 24 個後台系統圖示,自動合併冗餘群組容器、剔除預設的 fill-opacity="1" 屬性並壓縮 <style> 樣式表,整體檔案大小減少近三分之二。
徹底清除了所有 inkscape:* 與 sodipodi:* 編輯器專用屬性,刪去設計師遺留的 14 個隱藏參考線圖層,讓瀏覽器 DOM 解析時間縮短 68%。
Adobe Illustrator、Figma、Sketch 與 Inkscape 等設計軟體在匯出 SVG 時,為了保留編輯狀態,會寫入大量專屬 XML 標籤、長浮點數座標與隱藏圖層,造成正式環境檔案過度肥大。
將未最佳化的 SVG 直接內嵌(Inline)至 HTML 會大幅增加網頁位元組大小與 DOM 節點數。移除註解、中繼資料與無效定義後,可顯著加快網頁首次內容繪製(FCP)。
原始匯出檔常包含 xmlns:xlink、xml:space 與固定編輯器 ID,直接貼入 JSX/TSX 容易觸發編譯警告或樣式衝突。最佳化後的精簡 XML 可無縫轉為前端元件。
產品團隊在整理整套品牌圖示時,可將數十個 SVG 直接拖入瀏覽器記憶體一次完成瘦身,全程不經過任何外部伺服器,確保企業未公開資產絕對安全。
為了達到最高壓縮率並確保向量圖形正常渲染,請確認您的來源檔案符合以下條件:
支援由 Illustrator、Figma、Sketch、Affinity Designer 或 Inkscape 匯出的標準 XML 格式 .svg 檔案,可一次選取數十個檔案同時最佳化。
檔案內部應由 <path>、<circle>、<rect> 等向量節點構成。若 SVG 內包裹了 <image xlink:href="data:image/png;base64,..."> 點陣圖,XML 清理無法壓縮其中的點陣影像。
若設計稿包含自訂字型,請在設計軟體匯出前先執行「建立外框(Convert to Outlines)」,避免使用者裝置因缺少字型而跑版。
請確認根級 <svg> 標籤包含有效的 viewBox="0 0 W H" 屬性,確保移除多餘寬高屬性後仍能在各種解析度螢幕上維持正確長寬比。
檢視工作區下方的 8 個最佳化核取方塊(移除註解、移除中繼資料、移除空屬性、壓縮樣式、移除未使用的命名空間、四捨五入數字、移除編輯器資料、移除隱藏元素),預設全選以獲得最大瘦身幅度。
將一個或多個 .svg 檔案拖入綠色虛線區域,或點擊上方「載入未最佳化的範例 SVG」按鈕,立即測試 34.8 KB 肥胖原始碼的即時清理效果。
瀏覽器本機引擎會在幾毫秒內完成解析與壓縮,並在下方清單清楚列出每個檔案的原始大小、最佳化後大小及節省百分比。
點擊個別檔案右側的下載按鈕儲存精簡後的 .svg 檔,即可直接部署至網站靜態資源目錄或前端專案中。
清除非渲染冗餘資料後的輕量級 SVG 檔案,可直接應用於以下開發與設計場景:
將精簡後的 <svg> 標籤貼入 JSX 或 Vue 模板,搭配 currentColor 與 Tailwind CSS 即可動態切換圖示色彩與懸停狀態。
體積減少 70% 後的 SVG 原始碼在編碼為 CSS background-image 的 data:image/svg+xml 字串時大幅縮短,有效減輕樣式表負擔。
移除編輯器專屬命名空間與異常標籤後,再交給本站的「SVG 轉 PNG」或「圖片轉 ICO 圖示產生器」,可避免複雜 XML 造成的渲染錯誤。
雖然預設的 8 項清理規則對 95% 以上的靜態圖示與插畫完全安全,但在以下特殊情境下,請依說明調整選項:
勾選「移除隱藏元素」會刪除帶有 display="none" 或 opacity="0" 的節點,而外部 GSAP 或 CSS 動畫腳本可能正準備在互動時顯示這些元素。
在最佳化動態互動 SVG 前,請先取消勾選「移除隱藏元素」與「移除編輯器資料」,以完整保留所有 DOM 節點與 ID。
當整個圖示座標都擠在 12×12 的極小網格內時,對路徑座標執行四捨五入會產生相對明顯的控制點位移,導致圓弧不夠平滑。
處理 16×16 以下極小 viewBox 的精細圖示時,請取消勾選「四捨五入數字」,或在繪圖軟體中先將畫板放大至 24×24 或 512×512 再匯出。
部分設計師會將 PNG 截圖貼進 Illustrator 直接存成 SVG,此時 99% 的檔案大小都是 Base64 點陣編碼字串,清理 XML 標籤只能減少不到 1% 體積。
請將點陣圖取出並改用本站的「PNG 線上壓縮工具」進行色彩量化壓縮,或在向量軟體中將圖片描摹為真正的向量路徑。
在向量圖處理工作流中,不同工具負責不同階段的任務,請依您的需求選擇:
| 比較維度 | SVG 最佳化工具(本工具) | SVG 線上檢視器與原始碼檢查 | SVG 轉 PNG / 批次轉換器 |
|---|---|---|---|
| 核心用途 | 剔除冗餘 XML 標籤與中繼資料,大幅縮減 .svg 檔案大小 | 即時預覽透明格紋渲染效果、檢查 viewBox 並美化原始碼 | 將向量 .svg 光柵化轉為指定像素尺寸的 PNG/JPG/WebP 點陣圖 |
| 輸出格式 | 體積更小的標準 .svg 向量檔(維持無限放大不失真) | 格式化縮排後的可讀 XML 原始碼與尺寸診斷資訊 | .png / .jpg / .webp 點陣圖片(或 .zip 壓縮檔) |
| 對檔案大小的影響 | 無損減少 40%–80% 原始碼體積 | 不壓縮體積,重點在於展開單行程式碼方便工程師閱讀除錯 | 取決於設定的輸出像素尺寸(如 1024px 或 4K) |
| 最佳使用時機 | 網站與 App 上線前壓縮圖示庫、插畫與內嵌 SVG 程式碼 | 排查 SVG 破圖、深色背景看不清、viewBox 裁切異常 | 需將向量 Logo 上傳至不支援 SVG 的簡報、電商後台或社群平台 |
完全不會。SVG 是以數學座標描述的向量格式。本工具移除的是 XML 註解、繪圖軟體留下的編輯器中繼資料(如 Adobe XMP)及未使用的命名空間,不會破壞向量特性。精簡後的 SVG 依然可以無限放大且邊緣絕對清晰。
常見原因有兩個:第一,該 SVG 檔案先前已經被 SVGO 或打包工具壓縮過;第二,該 SVG 內部其實內嵌了 Base64 點陣圖片(<image> 標籤)。您可以先用「SVG 檢視器」打開原始碼,檢查是否包含超長的 base64 字串。
這通常是因為原圖含有被標記為隱藏或空屬性的特殊圖層。只要在「最佳化選項」中取消勾選「移除隱藏元素」與「移除空屬性」,再重新拖曳原檔案即可恢復正常。
絕對安全。本工具的所有 XML 解析、正則清理與座標四捨五入運算 100% 在您的瀏覽器本機透過 JavaScript 執行,檔案絕不會離開您的電腦。
可以。您可以同時選取數十個 .svg 檔案拖入上傳區,系統會逐一顯示壓縮前後的大小對比、節省比例以及獨立下載按鈕。
每個工具專注解決單一明確需求,點擊下方卡片即可切換至對應工具。
在透明格紋與深淺背景上即時預覽 SVG,檢查 viewBox 與尺寸屬性,並格式化 XML 程式碼。
將向量 SVG 轉為高畫質透明背景 PNG,支援自訂像素寬高、4倍放大與 300 DPI 印刷解析度設定。
一次拖曳數十或數百個 SVG 檔案,批次轉換為 PNG、JPG 或 WebP 並自動打包成 ZIP 下載。
由單張圖片一鍵產生多尺寸 favicon.ico、Apple Touch Icon 與 iOS/Android 應用程式圖示包。