線上 SVG 檢視器與編輯器(免費)- 即時預覽、格式化與壓縮 SVG

線上檢視、編輯、優化並預覽 SVG,支援即時程式碼編輯、縮放與檔案匯出,免上傳全程在瀏覽器本機完成。

開啟任意 SVG 檔案或直接貼上 SVG 標記,即可在左側編輯程式碼的同時,於右側即時預覽面板中查看渲染結果。這款線上 SVG 檢視器與編輯器完全在瀏覽器本機運行,無需上傳檔案,支援縮放檢查路徑與形狀、格式化或壓縮 SVG 原始碼,成果可一鍵複製或下載。

將 SVG 檔案拖放到此處

或點選瀏覽

程式碼

sample.svg • 673

預覽

100%

100%
sample.svg

為什麼需要 SVG 檢視器、SVG 編輯器與即時預覽工具?

開啟 SVG 檔或貼上程式碼,邊改邊看渲染結果,並能格式化或壓縮向量標記,不必安裝設計軟體或桌面工具。

關於 SVG 檢視器

SVG(可縮放向量圖形)是以 XML 為基礎的二維向量圖檔格式,支援互動與動畫。本工具將 SVG 程式碼和渲染預覽並排顯示,修改程式碼、確認效果、縮小檔案都在瀏覽器裡完成,適合除錯圖示或微調向量插圖。

SVG 檢視器的主要功能

邊改邊預覽

程式碼編輯器裡的每次修改都會立即在預覽面板中渲染。預覽可在 10%–500% 之間縮放,放大後捲動查看路徑、形狀和樣式細節。

在瀏覽器中處理

SVG 的讀取、渲染和格式化都由瀏覽器裡的 JavaScript 完成,開啟的檔案和貼上的程式碼不會上傳到伺服器。

格式化、壓縮與下載

「格式化 SVG」以 4 個空格重新縮排標記;「縮小 SVG」刪除註解和標籤之間的空白。結果可以複製,也可以下載為 .svg 檔。

如何使用 SVG 檢視器與編輯器

  1. 1

    載入 SVG

    開啟 .svg 檔、將檔案拖到編輯器上,或直接把 SVG 程式碼貼進編輯器。

  2. 2

    即時預覽

    右側面板會隨輸入即時渲染 SVG。可以放大縮小,並捲動預覽區檢查形狀、路徑和樣式。

  3. 3

    格式化或壓縮程式碼

    點按「格式化 SVG」以 4 個空格縮排整理標記;點按「縮小 SVG」刪除註解和空白,縮小檔案大小。

  4. 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 檔另存下來(或檢視原始碼複製標記),再到這裡開啟檔案或貼上程式碼。