SVG 預覽
預覽 SVG 文件並查看源代碼
- 檔案不會離開你的裝置
- 在瀏覽器本機執行
- 免費、免註冊、無浮水印
拖放 SVG 檔案到這裡，或點擊選擇
支援 SVG、SVGZ · 也可以用 Ctrl+V / ⌘V 貼上
提示：在頁面任何位置按 Ctrl+V / ⌘V 即可貼上 SVG 程式碼。
如何使用SVG 預覽
開啟 SVG 檔案或貼上程式碼，安全地檢視：縮放、平移、切換背景，查看顯示尺寸、width、height、viewBox 與元素數。可直接編輯原始碼並即時預覽，檔案中的指令碼絕不會執行。
- 1
將 SVG 或 SVGZ 檔案拖曳到頁面上，或在「或者貼上 SVG 程式碼」中貼上後點「新增 SVG」；在頁面任何位置按 Ctrl+V 也可以。
- 2
用「棋盤格」「白色」「黑色」切換背景；用按鈕、Ctrl/⌘ + 滾輪或快速鍵 + − 0 1 縮放，拖曳平移，按兩下符合視窗。
- 3
在「詳細資訊」中查看顯示尺寸、width、height、viewBox、檔案大小和元素數；滑鼠移到圖上會顯示 SVG 座標。
- 4
在「原始碼」中修改程式碼，預覽會隨輸入更新；語法錯誤會標出行號與欄號。
- 5
在「匯出」中點擊「下載 SVG」或「複製 Data URI」。
常見問題
開啟來源不明的 SVG 安全嗎？
安全。SVG 只以圖片方式顯示，其中的指令碼與事件處理常式不會執行，引用的網路檔案（圖片、字型、樣式表）也不會載入。檔案不會上傳。
為什麼 SVG 在這裡能顯示，在瀏覽器或 img 標籤中卻顯示不出來？
多半是缺少 xmlns 宣告。預覽會自動補上並顯示提示，點「補進程式碼」修正原始碼後再下載即可。
為什麼尺寸顯示為 300 × 150？
這個 SVG 既沒有 width/height 也沒有 viewBox，只能依瀏覽器預設尺寸處理。如果只是缺少寬高，尺寸會取自 viewBox。
「複製 Data URI」複製的是什麼？
一段 URL 編碼的 data:image/svg+xml 字串，可直接用在 CSS 的 background-image 或 img 的 src。需要 Base64 格式或更小的檔案，請改用 SVG 優化器。
可以開啟 .svgz 檔案嗎？
可以。gzip 壓縮的 SVGZ 會在瀏覽器中解壓縮，「下載 SVG」儲存的是未壓縮的 .svg 檔案。