SVG Viewer 線上檢視、最佳化 SVG 圖形，亦可轉檔 PNG 或 React 格式

經常在網頁上看到 JPG、PNG、GIF 和 SVG 圖片格式，大家可能對於前三種比較有概念，SVG 是可縮放向量圖形（Scalable Vector Graphics）縮寫，也就是使用「可延伸標記式語言」（XML）來描述圖形，因此 SVG 也是普通的文字格式，打開後會看到程式碼，亦可使用一般文字編輯器檢視或修改，如果要瀏覽通常會以最新的網頁瀏覽器開啟，SVG 格式的特色是不會因為放大縮小導致圖片失真。

本文要介紹的「SVG Viewer」是一個很實用的線上 SVG 檢視器，使用者可以直接將 SVG 程式碼貼上來查看顯示效果，或是透過此工具在不用安裝軟體的情況下開啟手邊的 SVG 格式，亦可轉檔為 PNG 圖片格式，或是轉換成 React、React Native 使用的 JSX 格式，非常方便。

除了檢視器功能，SVG Viewer 還能針對 SVG 程式碼進行自動最佳化或美化，以整理程式碼、讓檔案容量變得更小更精簡，如果想要分享 SVG 檔案，也有提供產生分享鏈結功能，使用者可以自訂過期時間，最短 24 小時，最長可永久保存。

SVG Viewer
https://www.svgviewer.dev/

使用教學

STEP 1

開啟 SVG Viewer 後會看到一個預設的 SVG 圖形範例，使用者只要將 SVG 程式碼複製、貼上就會在網站看到效果，或是點選右上角「Open .SVG」將電腦內的 SVG 格式上傳檢視。

STEP 2

SVG Viewer 左上角有兩項功能：檔案最佳化和圖形美化，點選後會自動對程式碼進行最佳化或重新整理，讓圖形既可維持相同效果又能減少容量，從右側預覽視窗即時查看最佳化前後的差異。

STEP 3

SVG Viewer 主要編輯器在左側，右側是 SVG 程式碼或檔案顯示效果，最簡單的用法是將 SVG 程式碼直接貼上就可以即時看到圖形，而右上角有幾個選項包括預覽和轉換為 React、React Native 或 PNG 格式。

STEP 4

如果你想將當前的檔案畫面分享給其他人，點選右上角「Share」產生鏈結，先設定檔案名稱、失效時間，最短 24 小時，最長可以選擇永遠不過期失效。

接著就會產生可讓其他人檢視瀏覽的分享網址。

STEP 5

前面有提到 SVG Viewer 最有用的功能是可以將 SVG 轉換為 PNG 圖片格式，讓我們在電腦上直接開啟更方便，只要將 SVG 程式碼貼上或開啟 SVG 檔案，接著點選右側的「PNG」選項，再按右上角「Download .PNG」即可將看到的圖形保存為 PNG 圖片格式囉！完全不用額外再安裝任何軟體，非常方便簡單。