SVG 是什麼格式？為什麼要用 SVG 呢？

SVG 是一種以 XML 語法編寫的向量圖格式，跟 JPG、PNG、Webp 不同，它最大的特色，就是不會失真，無論縮放多少倍都依然清楚銳利。有時候你在網頁上看到那些銳利、放大不糊的圖示，或是特殊字型的 logo，那很可能就是 SVG（Scalable Vector Graphics）這種格式完成的。

除了當作一般的圖片來用（比如放在 <img src> 裡），或是直接用<svg>這樣的標籤。也可以直接把他的XML原始碼(是一種純文字格式)貼進網頁原始碼或是CSS文件當中，這樣可以減少伺服器的連接載圖的HTTP 請求次數，在很多時候都可以提高網站的效能。
正因為SVG有這樣的特性，所以非常適合用來呈現：

• icon 小圖示（像網站上的小箭頭、小勾勾、icon font）
• 字型 logo（例如從 Google Fonts 複製下來的特殊字體）
• CSS 裡的 background-image 背景圖
• <img src="..."> 圖片（但要轉碼後使用）

除了 Google Fonts 的 icon 與字型以外，現在很多圖示庫也會提供 SVG 格式，比如：

• Heroicons – Tailwind 官方支援的優雅圖示
• Font Awesome – 經典圖示老牌子
• Phosphor Icons – 多風格圖示集，支援 SVG 輸出

為什麼需要 SVG 轉碼？

雖然 SVG 可以直接內嵌進 HTML，但如果想把它用在 CSS 背景圖、或放進 <img src> 裡，就需要先轉碼。

原因是 SVG 原始碼裡常有像 <、>、#、& 這類字元，直接放進 CSS 屬性值時會造成語法錯誤，不僅網頁顯示不出來，還有可能讓整個頁面的樣式錯位。轉碼就是為了解決這個問題，讓 SVG 可以安全放進 HTML、CSS 裡使用。

常見的轉碼方式有哪些？該選哪一種？

• URL 編碼
  把像 <、# 這些容易誤解的字元轉成安全格式。適合用在 background-image、<img src>、甚至 CSS 中的偽元素上。檔案小、相容性好，速度也快，大多數情況都夠用。
• Base64 編碼(進階用)
  把整個 SVG 轉成一串密密麻麻的字元，像一條亂碼龍捲風。這種格式通常放在 JavaScript、React、或 email 裡比較安全，不容易被誤讀或擋掉。雖然體積稍大一點，但通用性更高。

SVG 原始碼可以直接貼在 HTML 嗎？

可以的，這也是 SVG 的一個很大的優點。 SVG可以直接用像 <svg>...</svg> 這樣的代碼貼進 HTML 裡，瀏覽器會正確解讀，而且還能透過 CSS 操作裡面的顏色、大小、動畫，比傳統圖片格式更加靈活一些。

但缺點就是 SVG 原始碼所佔據行數比較多而且多半屬於看不懂的『亂碼』，在後續編輯、維護原始碼的時候，看起來會很吃力，所以不太適合放大量重複的 SVG，這種方式對於適合單一 logo 或主視覺設計會比較理想。

不能將 SVG 貼到 <img src="..."> 嗎？

把 SVG 當作一般圖片的模式也是相當理想與常見的做法，但是如果直接把 SVG 原始碼放入 img 的 src 裡面可就不行囉～因為瀏覽器不能直接解讀 <svg>...</svg> 當作圖片路徑，會完全解析錯誤。

正確的做法是轉成這樣的格式：

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D...">
或
<img src="data:image/svg+xml;base64,PHN2ZyB4...">

不同情境下該選哪一種轉碼方式？

下面是簡單對照表給大家參考

最後快速幫大家摘要一下

• 想快速安裝、又兼顧美觀？ → URL 編碼 最通用。
• 擔心平台限制、需跨系統使用？ → Base64 更穩。
• 要高度控制樣式或動畫？ → 直接內嵌 <svg> 最靈活。

我們設計這個小工具，就是希望大家(包含我自己)不用再查文件、也不用怕 SVG 搞亂網頁，一貼、一轉、一複製，立刻上線。
覺得實用的話，也別吝嗇推薦給朋友，讓大家的前端生活更輕鬆！