SVG 預覽工具
貼上 SVG 程式碼即時預覽渲染結果，支援背景切換（白色、深色、方格透明）與縮放控制。以沙盒 iframe 安全隔離，完全防止 XSS。
背景
縮放
在上方貼上 SVG 程式碼以預覽
關於此工具
QuickKit SVG 預覽工具讓您貼上任意 SVG 程式碼，即時預覽在瀏覽器中的渲染結果。可切換白色、深色或方格透明背景來檢視透明區域，並透過縮放控制放大細節或縮小查看全圖。每次預覽都在 sandbox="" 的沙盒 iframe 中執行，完全阻止 SVG 內部的 JavaScript，無論程式碼來源為何都安全可靠。
功能特色
- ✓即時預覽 — 輸入或貼上 SVG 程式碼後即時渲染，無需點擊任何按鈕。
- ✓背景切換 — 可在白色、深色與方格三種背景之間切換，方便檢視透明度與不透明區域。
- ✓縮放控制 — 選擇自適應、50%、100% 或 150% 縮放比例，靈活檢視圖形細節。
- ✓XSS 安全沙盒 — 預覽在 sandbox="" 的 iframe 中執行，SVG 內的 JavaScript 在瀏覽器層完全被封鎖，無論內容為何。
- ✓複製與下載 — 一鍵複製 SVG 原始程式碼至剪貼簿，或直接下載為 .svg 檔案。
常見問題
- 為什麼要用沙盒 iframe 而不是直接 innerHTML？
- SVG 支援透過 script 標籤與事件屬性執行 JavaScript。若直接以 innerHTML 渲染不受信任的 SVG，存在 XSS 風險。沙盒 iframe 不含 allow-scripts 屬性，在瀏覽器層完全封鎖腳本執行，無論 SVG 內容為何。
- SVG 動畫在預覽中可以正常播放嗎？
- 可以。CSS 動畫與 SMIL 動畫（animate、animateTransform）不依賴 JavaScript，在 sandbox="" 環境中仍可正常運作。
- 方格背景是做什麼用的？
- SVG 常包含透明區域，方格背景可讓透明部分清楚可見，與 Photoshop、Figma 的呈現方式相同。
- 可以預覽從 Illustrator 或 Inkscape 匯出的 SVG 嗎？
- 可以，直接貼上原始匯出的 SVG 即可——預覽工具支援所有有效的 SVG，包含帶有編輯器 metadata 的版本。建議搭配 SVG Optimizer 清理後再定稿。