SVG 檢視器

SVG 輸入
0 字元
本機預覽，請勿貼上不信任來源的腳本內容

線上SVG檢視器，貼上SVG程式碼即可即時預覽渲染向量圖效果，支援複製和下載.svg檔，本機處理安全無虞。

相關推薦

圖片格式轉換

圖片壓縮

圖片尺寸調整

圖片裁切

圖片編輯器

ICO 圖示產生

什麼是 SVG？

SVG（Scalable Vector Graphics，可縮放向量圖形）是用XML描述幾何形狀的圖像格式。與JPG、PNG這種點陣圖（像素矩陣）不同，SVG用<rect>、<circle>、<path>等標籤描述圖形的數學路徑，因此任意尺寸縮放都不會模糊。

**SVG適合哪些場景？** Logo、UI圖示、流程圖、地圖標註、圖表、動畫裝飾、可重複使用插畫——這些場景對清晰度、可改色、可縮放、可被CSS控制的要求都很高，SVG是天然選擇。

**和Canvas的區別：** Canvas是命令式繪圖API，繪圖後變成像素；SVG是宣告式DOM節點，可以隨時修改屬性、CSS樣式、綁定事件。所以凡是圖示、UI、可互動的場景用SVG，遊戲、粒子、像素化藝術場景用Canvas。

**常見組成：** &lt;svg&gt;根節點、&lt;g&gt;分組、&lt;path&gt;路徑（最常用，包含d屬性）、漸層（&lt;linearGradient&gt;/&lt;radialGradient&gt;）、濾鏡（&lt;filter&gt;）、動畫（SMIL/CSS/JS）。

**怎麼預覽？** 透過本工具把SVG原始碼貼到編輯框，右側即時渲染，配合可拖曳分欄版面，能在幾秒內驗證SVG程式碼是否正確、顯示效果是否符合預期。

適用場景

  • 前端開發需要快速預覽SVG圖示程式碼的渲染效果
  • 從Figma、Sketch等設計工具複製SVG後驗證顯示效果
  • 除錯SVG路徑、顏色或viewBox屬性時即時查看變化
  • 查看和驗證SVG程式碼，確認無誤後再整合到專案程式碼中

使用方法

  1. 將SVG原始碼貼到左側編輯框，或點擊「載入範例」查看示範效果
  2. 右側即時顯示向量圖渲染結果，可修改程式碼即時刷新預覽
  3. 預覽滿意後點擊複製按鈕拷貝程式碼，或自訂檔名下載為.svg檔

功能特點

  • 即時預覽：貼上或編輯SVG程式碼即時渲染向量圖效果，所見即所得
  • 分欄版面：電腦端左右分欄可拖曳調整寬度，行動裝置標籤切換輸入與預覽
  • 一鍵匯出：支援複製SVG原始碼到剪貼簿，或自訂檔名下載為標準.svg檔
  • 本機處理：所有SVG解析渲染在瀏覽器內完成，程式碼不上傳伺服器更安全
  • 透明背景：棋盤格背景展示，清晰查看SVG的透明區域和邊緣細節
  • 字元統計：即時顯示程式碼字元數，內建範例快速上手體驗

常見問題

如何線上預覽SVG程式碼效果？

將SVG原始碼貼到左側編輯框，右側會即時渲染顯示向量圖效果。支援直接在編輯框中修改程式碼，預覽區即時刷新，方便前端圖示除錯和效果驗證。

預覽後的SVG怎麼下載儲存？

點擊預覽區右上角的下載按鈕，可自訂檔名後儲存為標準.svg檔。也可以點擊複製按鈕將SVG原始碼複製到剪貼簿，直接貼上到專案程式碼中使用。

SVG程式碼會上傳到伺服器嗎？安全嗎？

不會。所有SVG解析和渲染均在本機瀏覽器內完成，SVG程式碼不會上傳到任何伺服器，處理完即消失，杜絕未公開的圖示素材和設計稿外洩風險。

支援從設計軟體複製的SVG程式碼嗎？

支援。從Figma、Sketch、Adobe Illustrator等設計軟體複製的SVG程式碼可直接貼上預覽。建議先查看渲染效果，確認無誤後再整合到專案中。

為什麼SVG預覽不顯示？常見原因？

常見原因：①缺少 xmlns="http://www.w3.org/2000/svg" 命名空間宣告；②程式碼中存在未閉合標籤；③特殊字元未正確跳脫；④SVG本身存在語法錯誤。請檢查這幾項。

可以自訂下載的SVG檔名嗎？

可以。點擊下載按鈕後會出現檔名輸入框，可自訂檔名（預設image.svg），按Enter或點擊確認即可下載，工具會自動補充.svg副檔名。

術語表

viewBox
SVG內部座標系，格式為"x y width height"。常見的"0 0 24 24"表示寬高24個單位。SVG實際顯示尺寸由width/height屬性或外部CSS控制。
XML 命名空間（namespace）
SVG必須宣告xmlns="http://www.w3.org/2000/svg"，瀏覽器才會正確識別為SVG文件。缺少namespace是SVG在HTML中不顯示的最常見原因。MDN - SVG Namespace
path d 屬性
路徑指令集，由M/L/C/Q/H/V/Z等字母加座標組成。M=移動、L=畫線、C=三次貝茲曲線、Q=二次貝茲曲線、Z=閉合路徑。複雜圖示通常僅靠一個path加d屬性表達。
currentColor
CSS關鍵字，指代當前元素的color屬性。在SVG中把fill或stroke設為currentColor，外部CSS改color即可改變圖示顏色，是設計系統的常用做法。

SVG 常見元素速查

元素類型用途
<svg>根節點所有 SVG 的容器，必填
<rect>基礎圖形矩形、圓角矩形
<circle> / <ellipse>基礎圖形圓 / 橢圓
<line> / <polyline>基礎圖形直線 / 折線
<polygon> / <path>路徑多邊形 / 任意曲線（d 屬性）
<text> / <tspan>文字SVG 內嵌文字
<g>分組組合節點套用統一變換
<defs> / <symbol>定義可重複使用形狀與漸層
<linearGradient> / <radialGradient>漸層線性 / 徑向漸層填色
<use>重複使用引用 defs 中的元素
<filter>濾鏡模糊、陰影等高級效果

SVG 與點陣圖格式比較

維度SVG（向量）PNG（點陣）JPG（點陣）
組成方式XML 描述幾何路徑像素矩陣像素矩陣（DCT 壓縮）
放大效果任意縮放不模糊放大失真放大失真且壓縮痕跡更明顯
檔案大小視路徑複雜度而定，Logo 通常 < 10KB中等（無損）較小（有損）
透明背景✅✅❌
動畫支援✅ SMIL / CSS / JS❌（需 APNG）❌
可被 CSS 改色✅ currentColor / fill 變數❌❌
適合場景圖示、Logo、UI 向量透明背景素材、截圖照片、大面積漸層

Authoritative References