無需安裝龐大的 Illustrator，在瀏覽器本機直接開啟 .svg 檔案或貼上 <svg> 原始碼。一鍵切換透明格紋與深淺背景、診斷 viewBox 座標邊界並檢視底層 XML 結構，檔案零上傳。
或點擊瀏覽
了解 UI 設計師與前端工程師如何利用 SVG 檢視器排解純白圖示隱形、畫板裁切與多餘編輯器程式碼問題。
系統內建檔案總管或一般瀏覽器分頁預設為純白背景，導致深色模式專用的純白（#FFFFFF）圖示看起來像空白損毀檔。在預覽區一鍵切換為「黑色」或「透明格紋」背景後，2px 向量線條與半透明陰影立即清晰呈現。
右側「檔案資訊」面板即時解析根標籤的 Width、Height 與 ViewBox 座標字串（min-x min-y width height）。快速發現因缺少 viewBox 或負座標超出範圍導致的網頁端圖示無法自適應縮放問題。
畫布區即時渲染內嵌的 CSS @keyframes 與 SMIL <animate> 動畫效果，下方程式碼面板完整顯示 XML 樹狀結構。輕鬆找出寫死的色碼（#3B82F6）、隱藏圖層或多餘中繼資料，並可一鍵跳轉至 SVG 最佳化工具瘦身。
Windows 檔案總管與 macOS Finder 常無法正常顯示 SVG 縮圖，而為了檢查一個小圖示特地開啟龐大的 Adobe Illustrator 又太花時間。本工具專為以下日常工作流程打造：
當您收到一批用於深色介面的白色或淺色 SVG 圖示時，直接點開往往只見一片空白。透過切換透明格紋、純黑、純白或自訂背景色，一秒看清每個向量細節與抗鋸齒邊緣。
在將 SVG 匯入 React/Vue 元件、iOS Xcode 或 Android 專案前，無需翻找程式碼即可直觀確認其宣告的 Width、Height、ViewBox 邊界數值以及精確的位元組大小。
想確認 SVG 內的文字是否已轉外框（是 <path> 還是 <text>）、色彩是否採用動態 currentColor、或是否夾帶可疑腳本？底部內建程式碼面板讓您一目了然並支援一鍵複製。
我們的本機瀏覽器解析引擎支援所有主流設計軟體與前端框架輸出的向量圖形格式：
支援直接拖曳由 Figma、Illustrator、Inkscape、Sketch、Affinity Designer 或 CAD 軟體匯出的標準 .svg 檔案。
切換至「貼上 SVG 原始碼」分頁，可直接貼上從網頁開發者工具、圖示庫或前端元件複製出來的 <svg> 程式碼進行即時預覽。
完整支援內嵌 <style> 關鍵影格動畫、線性/放射狀漸層（<linearGradient>）、遮罩裁切（<clipPath>）以及原生 <animateTransform> 動態圖形。
在本機安全沙箱中精準還原所有向量基本圖形（<path>、<circle>、<rect>、<polygon>）及內聯 data:image/*;base64 點陣圖層。
將本機 .svg 檔案拖入上傳區（或點擊「載入範例 SVG」立即體驗），也可以切換至「貼上 SVG 原始碼」分頁直接貼入 <svg> 程式碼。
點擊預覽畫布上方的背景切換按鈕（透明格紋、白色、黑色或自訂調色盤），全面測試圖示在不同底色下的視覺表現。
在右側資訊欄檢視解析出的檔案名稱、精確大小（KB/Bytes）、宣告的寬度（Width）、高度（Height）以及核心 viewBox 座標參數。
在底部「SVG 程式碼」視窗審閱或一鍵複製原始碼；亦可直接點擊右側動作區的「轉換為 PNG」或「最佳化 SVG」無縫接續處理。
完成視覺對比測試與屬性確認後，您可以直接將檢查結果應用於以下開發與設計工作流：
直接複製確認無誤的 XML 原始碼貼入 HTML、React JSX 或 Vue 模板中，方便搭配 CSS fill: currentColor 讓圖示隨文字顏色動態變換。
先在檢視器中確認圖形沒有被畫板邊緣裁切、透明通道完好，再點擊「轉換為 PNG」輸出 4K 或 300 DPI 高解析度圖檔，避免盲目轉換重工。
若在程式碼區看到大量 Illustrator 私有的 <i:pgf> 資料區塊、未使用的 <defs> 或過長的小數點座標，可立即點擊「最佳化 SVG」減少 40%–80% 體積。
若載入後畫布看起來空白、圖形被切掉或字體改變，代表檢視器幫您找出了原始檔案本身的潛在問題：
最常見的原因是圖示路徑本身為純白色（#FFFFFF）而背景剛好也是白色；或是圖形路徑的繪製座標超出了 viewBox 宣告的可視範圍。
請先將「預覽背景」切換為「黑色」或「透明格紋」；若仍無畫面，請檢查底部 XML 原始碼，比對 viewBox="x y w h" 與 <path d="M..."> 座標是否一致。
原始碼中使用了 <text> 標籤並指定了本機電腦未安裝的商業字型名稱，且未將字型內嵌或轉外框。
在底部程式碼框搜尋是否有 <text> 標籤。為確保跨裝置顯示一致，請回到設計軟體將文字「建立外框（轉為 <path> 路徑）」後重新匯出。
基於瀏覽器資安沙箱與跨來源資源共用（CORS）保護機制，獨立預覽容器會阻擋向第三方伺服器發起的外部圖片請求。
請將外部引用的點陣圖轉為內聯 Base64 編碼（data:image/png;base64,...）直接寫入 SVG 原始碼中。
了解「SVG 檢視器」與本站「SVG 最佳化工具」及「SVG 轉 PNG 轉換器」的定位差異：
| 比較項目 / 場景 | SVG 檢視器與原始碼檢查（本工具） | SVG 最佳化與瘦身工具 (/svg-optimizer/) | SVG 轉 PNG 轉換器 (/) |
|---|---|---|---|
| 核心功能定位 | 多背景視覺預覽、ViewBox 與尺寸屬性診斷、XML 原始碼檢視 | 自動移除編輯器多餘中繼資料與註解，無損壓縮 .svg 向量檔大小 |
將向量 .svg 檔案或原始碼光柵化渲染為 32 位元透明 .png 點陣圖 |
| 最終產出結果 | 視覺與屬性檢查報告、可複製的 XML 原始碼、原始檔案下載 | 體積減少 40%–80% 的輕量化正式環境 .svg 向量檔 |
自訂像素寬高與 300 DPI 印刷中繼資料的高解析度 .png 圖檔 |
| 背景對比度測試 | 支援透明格紋、純白、純黑及任意自訂色碼即時切換測試 | 提供最佳化前後雙欄視覺對比預覽 | 將所選背景色（透明或純色）永久合成寫入匯出的 PNG 像素中 |
| 尺寸與屬性透視 | 專門顯示檔名、位元組大小、Width、Height 與完整 ViewBox 座標字串 | 重點顯示原始大小、最佳化後大小與節省百分比（%） | 重點控制目標輸出像素解析度（px）與物理列印 DPI |
100% 安全且保障隱私。本 SVG 檢視器完全在您的瀏覽器本機內透過 JavaScript FileReader 與原生 DOM 解析運作。您的 .svg 檔案與貼上的原始碼絕不會離開您的電腦，也不會上傳至任何遠端伺服器。
viewBox="min-x min-y width height" 定義了 SVG 內部的虛擬座標系統（決定圖形的長寬比例與裁切範圍），而 width 與 height 則定義了預設顯示在畫面上的外部尺寸。只要具備正確的 viewBox，SVG 就能在任何大小的容器中無損縮放。
完全支援！不同於作業系統資料夾的靜態縮圖，我們的瀏覽器預覽畫布原生支援 CSS @keyframes 動畫與 SVG SMIL（<animate>、<animateTransform>）動畫的 60fps 即時流暢播放。
許多現代前端圖示庫為了讓圖示能完全隨外部 CSS 容器彈性縮放，會刻意省略根標籤上的固定 width 與 height 屬性，僅保留 viewBox。這是標準的響應式網頁設計做法；但若連 viewBox 都顯示為缺少，則建議補上以避免跑版。
可以！在預覽畫面右側的「動作（Actions）」面板中，您可以直接點擊「最佳化 SVG」清理多餘程式碼，或點擊「轉換為 PNG」將其匯出為高解析度透明 PNG。
每個工具專注解決單一明確需求，點擊下方卡片即可切換至對應工具。