SVG 檢視器
線上 SVG 程式碼編輯與即時預覽工具
什麼是 SVG 檢視器？
SVG 檢視器是一款線上 SVG 程式碼編輯和即時預覽工具。它允許您直接編寫或貼上 SVG 程式碼，並即時查看渲染效果。SVG（可縮放向量圖形）是一種基於 XML 的向量影像格式，廣泛應用於網頁設計、圖示製作和資料視覺化。
本工具支援即時預覽、源碼檢視、下載 SVG 檔案等功能，是前端開發者和設計師的實用工具。
發布或提交前，應打開輸出檔檢查可讀性、裁切、解析度、順序和內容缺失。
使用方法
使用說明
- 在左側編輯器輸入或貼上 SVG 程式碼
- 右側面板即時顯示 SVG 渲染結果
- 點選「原始碼」按鈕檢視格式化後的 SVG 原始碼
- 點選「下載」按鈕將 SVG 另存為檔案
- 點選「複製 SVG」按鈕即可複製程式碼到剪貼簿
SVG 安全性
- 請盡量只貼上來自可信來源的 SVG；SVG 可能含有腳本、外部引用或未預期的樣式。
- 下載或嵌入前，請確認 viewBox、尺寸、填色、筆觸及文字在目標尺寸下的渲染結果。
使用場景
技術原理
SVG 原始碼透過 new DOMParser().parseFromString(source, 'image/svg+xml') 解析，回傳一個基於 XML 規則而非 HTML 寬鬆解析器建構的 Document。解析器檢查格式正確性，在無效標記時顯示 <parsererror> 節點，並將 SVG 樹暴露給腳本和 CSS，與 DOM 的其餘部分完全相同。<path>、<circle>、<rect>、<g>、<text>、<defs>、<linearGradient> 和 <filter> 等元素是一等節點，擁有各自的屬性和事件目標。 座標系統由 viewBox 屬性控制。viewBox="minX minY width height" 定義內部座標空間，preserveAspectRatio（預設為 xMidYMid meet）決定該空間如何映射到渲染視窗：meet 透過加入信箱模式保留整個 viewBox，slice 透過裁剪填滿視窗，none 則進行非均勻拉伸。d 中的路徑命令使用 M（移動到）、L（直線到）、C（三次貝塞爾曲線）、Q（二次貝塞爾曲線）、A（橢圓弧）和 Z（閉合路徑）；每個命令都有大寫的絕對形式和小寫的相對形式。 SVG 安全性需要明確處理，因為該格式是可執行的：<script>、包含 HTML 的 foreignObject、指向外部 URL 的 xlink:href、onload 和其他事件處理器屬性，如果 SVG 被內聯注入，都可以在頁面上下文中執行 JavaScript。使用 SVG 設定檔的 DOMPurify 或伺服器端淨化工具是接受第三方 SVG 時的標準緩解措施。柵格化為 PNG 的方式是將 SVG（從 Blob URL 載入為 HTMLImageElement）透過 drawImage 繪製到畫布上，然後呼叫 canvas.toBlob('image/png') 進行下載。
- 解析器：new DOMParser().parseFromString(source, 'image/svg+xml') 回傳嚴格的 XML Document，失敗時包含 <parsererror> 節點
- viewBox："minX minY width height" 設定內部座標空間；preserveAspectRatio xMidYMid meet/slice 控制適配與裁剪
- 路徑命令：M 移動到、L 直線到、C 三次貝塞爾曲線、Q 二次貝塞爾曲線、A 弧線、Z 閉合路徑；大寫 = 絕對座標，小寫 = 相對座標
- 安全面：內聯 <script>、foreignObject、指向遠端 URL 的 xlink:href 以及 onload/onclick 處理器會被當作 JavaScript 執行
- 淨化處理：使用 USE_PROFILES: { svg: true } 的 DOMPurify 在插入第三方 SVG 前移除腳本和事件處理器
- PNG 匯出：透過 Blob URL 將 SVG 載入 HTMLImageElement，drawImage 到畫布上，canvas.toBlob('image/png') 進行下載
- 瀏覽器基準：自 2011 年以來所有現代瀏覽器支援 SVG 1.1；SVG 2 功能（路徑文字改進）僅部分支援
範例
圓形
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>矩形
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>星形
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>常見問題
這個檢視器有什麼功能？
可以將貼上的 SVG 標記轉譯顯示，提供縮放與平移，原始碼帶有語法高亮，並會回報圖片尺寸與 viewBox。適合用來檢視第三方 SVG、除錯 path 資料，或在加入專案前先預覽圖示。
SVG 內容會被上傳嗎？
不會。本頁在您的瀏覽器中本機解析並轉譯 SVG——SVG 本來就是標記語言，瀏覽器原生就會顯示。貼上的程式碼不會經過網路傳輸。
為什麼我的 SVG 在這裡和設計軟體看起來不一樣？
SVG 的渲染結果取決於使用者代理。瀏覽器、Figma、Illustrator、Inkscape 在某些邊界情況（文字渲染、濾鏡效果、網格漸層、剪裁路徑）的詮釋會有所不同。本檢視器顯示的是瀏覽器的呈現方式，也就是您的終端使用者最終會在 HTML 中看到的樣子。
可以在這裡編輯 SVG 嗎？
您可以在左側編輯原始碼後重新渲染。但若要做視覺化編輯（拖曳節點、改變路徑），請使用真正的 SVG 編輯器，如 Inkscape、Figma 或 Boxy SVG。本頁主要是檢視器，外加快速文字編輯功能。
怎麼把 SVG 放進我的專案？
複製原始碼即可。多數前端框架都接受直接在 JSX/HTML 中使用 inline SVG。要當背景圖使用時，將檔案放進資源資料夾並以 url(...) 引用。要當圖示字型使用時，請透過 svgo 加上雪碧圖產生器之類的建置流程處理。
為什麼我的 SVG 檔案那麼大？
許多 SVG 匯出時會夾帶編輯器的中繼資料（Adobe Illustrator 的 XMP、Inkscape 的 :inkscape: 命名空間）、未使用的 defs、註解，以及冗長的 path 資料。透過 SVGO（線上版或 CLI）處理通常可以縮小 30 至 70%，視覺上完全沒有差別。
會載入外部資源嗎？
為安全考量，多數檢視器會封鎖外部載入（不會抓取外部的 <image href> 或 <use href>）。如果您的 SVG 依賴這些資源，請將引用的點陣圖嵌入為 data: URI，並把指向外部 href 的 <use> 轉成內聯複本。