SVG 檢視器
在線 SVG 代碼編輯與即時預覽工具
SVG 代碼
SVG 預覽
SVG 預覽將顯示在此處
什麼是 SVG 檢視器？
SVG 檢視器是一款在線 SVG 代碼編輯和即時預覽工具。它允許您直接編寫或貼上 SVG 代碼，並即時查看渲染效果。SVG（可縮放向量圖形）是一種基於 XML 的向量影像格式，廣泛應用於網頁設計、圖示製作和資料視覺化。
本工具支援即時預覽、源碼檢視、下載 SVG 檔案等功能，是前端開發者和設計師的實用工具。
使用方法
基本使用
- 在左側編輯器中輸入或貼上 SVG 代碼
- 右側將即時顯示 SVG 渲染效果
- 點擊「源碼」按鈕可檢視格式化的 SVG 源碼
- 點擊「下載」按鈕將 SVG 儲存為檔案
- 點擊「複製 SVG」按鈕複製代碼到剪貼簿
功能特點
即時預覽輸入 SVG 代碼後立即看到渲染效果
源碼檢視切換檢視格式化的 SVG 原始碼
下載檔案一鍵將 SVG 代碼儲存為 .svg 檔案
隱私安全所有處理在瀏覽器本地完成，資料不會上傳
SVG 範例
圓形
<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？
SVG（Scalable Vector Graphics）是一種基於 XML 的向量影像格式，由 W3C 制定標準。與 PNG、JPG 等點陣圖格式不同，SVG 使用數學公式描述圖形，可以無損縮放至任意大小。
SVG 有哪些優勢？
SVG 檔案體積小、可無損縮放、支援動畫和互動、可以用 CSS 和 JavaScript 操控、對搜尋引擎友善。非常適合用於圖示、Logo、資料圖表和響應式設計。
如何在網頁中使用 SVG？
可以透過 img 標籤、CSS background-image、內聯 SVG（直接寫入 HTML）、object 或 embed 標籤等方式使用。內聯 SVG 方式最靈活，可以用 CSS 和 JS 控制。
這個工具安全嗎？
完全安全。所有 SVG 代碼的解析和渲染都在您的瀏覽器本地完成，不會上傳到任何伺服器。您的代碼和資料始終在本地處理。