SVG 檢視器
貼上原始 SVG 標記,立即預覽渲染結果。
預覽會停用 script 與外部參照,同時仍可讓你檢視 viewBox 與尺寸細節。
SVG 預覽:貼上原始程式碼並立即檢查結果
viewBox 與尺寸檢查:檢視透明區域與可能不安全的內容
你的 SVG 絕不會送到伺服器。所有處理都完全留在瀏覽器中。
危險元素與外部網址引用會在預覽中停用。
使用方式
- 貼上 SVG 程式碼或載入 `.svg` 檔案。
- 切換背景與縮放倍率來檢視渲染效果。
- 檢查 viewBox、尺寸與警告後,需要時再儲存 SVG。
範例
簡單圖示 SVG
輸入
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
輸出
會渲染出一個藍色圓形圖示,並在資訊面板中顯示 viewBox `0 0 120 120`。
常見問題
我的 SVG 會上傳到任何地方嗎?
不會。貼上的 SVG 與載入的檔案都只會留在你的瀏覽器中,不會送到伺服器。
含有 script 或 foreignObject 的 SVG 會怎樣?
安全預覽會在渲染前移除這些元素,並在資訊面板顯示警告。
含有外部圖片或字型的 SVG 會完全一樣嗎?
不一定。外部參照已被停用,所以外觀可能和原始環境不同。這個工具會優先保證本機安全檢視。
為什麼我的 SVG 無法渲染?
常見原因是 XML 無效、屬性值錯誤,或根元素不是 `svg`。請查看工具顯示的錯誤訊息。
為什麼要切換背景?
透明區域與淺色圖示會因背景不同而看起來差很多,因此這個工具可讓你快速切換棋盤格、白色與深色背景來測試。
注意事項
- 為了安全,渲染前會停用外部網址引用與危險元素。
- 依賴外部字型或圖片的 SVG,外觀可能與原始環境不同。
- 非常大的 SVG 檔案會自動退出即時預覽模式,並要求你手動渲染。