SVG 檢視器

貼上原始 SVG 標記,立即預覽渲染結果。

預覽會停用 script 與外部參照,同時仍可讓你檢視 viewBox 與尺寸細節。

SVG 預覽:貼上原始程式碼並立即檢查結果

viewBox 與尺寸檢查:檢視透明區域與可能不安全的內容

你的 SVG 絕不會送到伺服器。所有處理都完全留在瀏覽器中。
危險元素與外部網址引用會在預覽中停用。

使用方式

  1. 貼上 SVG 程式碼或載入 `.svg` 檔案。
  2. 切換背景與縮放倍率來檢視渲染效果。
  3. 檢查 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 檔案會自動退出即時預覽模式,並要求你手動渲染。