SVG 預覽 / 編輯器

SVG 預覽 / 編輯器如何運作

工具功能說明

SVG 預覽 / 編輯器會在你編輯 SVG 標記時即時渲染，並擷取中繼資料（width、height、viewBox、元素數量）以便快速檢視。可透過切換加入棋盤格背景，讓你清楚看到透明區域。此工具也會產生 URL 編碼的 data URI，可直接用於 CSS background-image 或 HTML src 屬性。

常見的開發者使用情境

圖示設計師在不同尺寸下測試 viewBox 計算與描邊寬度。前端開發者確認手動編輯的 SVG 圖示在最佳化（手動或透過 SVGO）後仍能正確渲染。電子郵件開發者產生精簡的 data URI 版本品牌標誌，以便內嵌到 HTML 中。教育者示範 preserveAspectRatio 與 overflow 等屬性如何影響渲染。

資料格式、型別或變體

輸入為原始 SVG XML 標記。輸出為在沙箱化 iframe 中渲染的同一份 SVG，以及一個 URL 編碼的 data URI（data:image/svg+xml;charset=utf-8,…）。元素數量指標會計算每個開始標籤（包含 defs、g、漸層等類似的巢狀元素），用以粗略反映複雜度。擷取到的屬性值會以原始形式顯示。

常見陷阱與邊界情況

由 `use` 或 `image` 元素透過 href 參照的外部資源，無法在沙箱化 iframe 內載入。script 元素中的內嵌 JavaScript 會被沙箱阻擋——動畫應依賴 SMIL 或 CSS keyframes。若 SVG 依賴特定且系統未安裝的字型，將回退到預設字型；預覽時請內嵌字型或使用系統字型。

何時使用此工具 vs 程式碼

使用此瀏覽器工具進行一次性的圖示設計、除錯或產生 data URI。對於正式環境資產，請使用調校過的設定讓 SVG 經由 SVGO 處理，以移除中繼資料並壓縮標記，並使用 sprite 系統或適當的打包工具整合在你的應用程式中載入圖示，而不是到處內嵌 data URI。