
經常在網頁上看到 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 圖片格式囉!完全不用額外再安裝任何軟體,非常方便簡單。

值得一試的三個理由:
- 線上 SVG 檢視器貼上程式碼或上傳檔案就能看到圖形效果
- 可以對程式碼進行自動最佳化或美化編輯,以減少檔案大小
- 將檔案轉換為 PNG 格式,或是 React、React Native 的 JSX 格式