線上 SVG 檢視器與編輯器(免費)- 即時預覽、格式化與壓縮 SVG
線上檢視、編輯、優化並預覽 SVG,支援即時程式碼編輯、縮放與檔案匯出,免上傳全程在瀏覽器本機完成。
開啟任意 SVG 檔案或直接貼上 SVG 標記,即可在左側編輯程式碼的同時,於右側即時預覽面板中查看渲染結果。這款線上 SVG 檢視器與編輯器完全在瀏覽器本機運行,無需上傳檔案,支援縮放檢查路徑與形狀、格式化或壓縮 SVG 原始碼,成果可一鍵複製或下載。
將 SVG 檔案拖放到此處
或點選瀏覽
程式碼
sample.svg • 673
預覽
100%
為什麼需要 SVG 檢視器、SVG 編輯器與即時預覽工具?
開啟 SVG 檔或貼上程式碼,邊改邊看渲染結果,並能格式化或壓縮向量標記,不必安裝設計軟體或桌面工具。
關於 SVG 檢視器
SVG(可縮放向量圖形)是以 XML 為基礎的二維向量圖檔格式,支援互動與動畫。本工具將 SVG 程式碼和渲染預覽並排顯示,修改程式碼、確認效果、縮小檔案都在瀏覽器裡完成,適合除錯圖示或微調向量插圖。
SVG 檢視器的主要功能
邊改邊預覽
程式碼編輯器裡的每次修改都會立即在預覽面板中渲染。預覽可在 10%–500% 之間縮放,放大後捲動查看路徑、形狀和樣式細節。
在瀏覽器中處理
SVG 的讀取、渲染和格式化都由瀏覽器裡的 JavaScript 完成,開啟的檔案和貼上的程式碼不會上傳到伺服器。
格式化、壓縮與下載
「格式化 SVG」以 4 個空格重新縮排標記;「縮小 SVG」刪除註解和標籤之間的空白。結果可以複製,也可以下載為 .svg 檔。
如何使用 SVG 檢視器與編輯器
- 1
載入 SVG
開啟 .svg 檔、將檔案拖到編輯器上,或直接把 SVG 程式碼貼進編輯器。
- 2
即時預覽
右側面板會隨輸入即時渲染 SVG。可以放大縮小,並捲動預覽區檢查形狀、路徑和樣式。
- 3
格式化或壓縮程式碼
點按「格式化 SVG」以 4 個空格縮排整理標記;點按「縮小 SVG」刪除註解和空白,縮小檔案大小。
- 4
複製或下載
將最佳化後的 SVG 程式碼複製到剪貼簿,或下載 .svg 檔案用於專案。
參考資料
- W3C — SVG 2
W3C 官方規範,定義了 SVG 向量圖形格式的元素與屬性。
- MDN — SVG
MDN 關於 SVG 元素、屬性及瀏覽器中向量圖形渲染原理的參考文件。
相關工具
常見問題
- 這個 SVG 檢視器免費嗎?
- 是的,本工具對個人和商業用途完全免費。
- 你們會儲存我的 SVG 檔案嗎?
- 不會。所有處理均在您的瀏覽器用戶端本機完成,檔案不會上傳至任何伺服器。
- 如何線上免費查看 SVG 檔案?
- 直接將 .svg 檔案拖入頁面,或貼上 SVG 程式碼,右側預覽面板立即顯示渲染結果,無需註冊或安裝任何軟體。
- 可以編輯 SVG 程式碼並即時查看效果嗎?
- 可以。編輯器中的任何變更都會立即反映到預覽面板,讓您即時調整路徑、顏色和尺寸。
- 如何線上將 SVG 轉換為 PNG?
- 本工具只負責檢視、編輯、格式化和壓縮 SVG,不匯出 PNG;本站的圖片轉換工具也不接受 SVG 檔。需要轉成 PNG 時,可使用命令列渲染器,例如 rsvg-convert(rsvg-convert -w 512 -o icon.png icon.svg) 或 Inkscape(inkscape icon.svg --export-type=png)。想把 SVG 內嵌到網頁,可以用「圖片轉 Base64」。
- 如何壓縮 SVG 檔案大小?
- 點按「縮小 SVG」,工具會刪除註解、標籤之間的空白與換行,並把連續空格合併成一個,藉此縮小檔案大小。
- 可以透過 URL 載入 SVG 嗎?
- 無法直接載入,頁面上沒有網址輸入欄。可先在瀏覽器開啟該連結,把 .svg 檔另存下來(或檢視原始碼複製標記),再到這裡開啟檔案或貼上程式碼。