使用方法
- 將 .svg 檔案拖到上傳區域，點選選擇檔案，或貼上圖片。
- 保持原格式即可編碼 SVG 程式碼本身；選擇 PNG、JPEG 或 WebP 則會把它轉換為點陣圖。
- 如果轉換為點陣圖，可以設定最大寬度來控制像素尺寸。
- 複製 CSS background-image 輸出用於樣式表，或使用 Data URI、純 Base64、img 標籤、Markdown 版本。
把 SVG 用作 Data URI
SVG（可縮放向量圖形，MIME 型別為 image/svg+xml）用 XML 文字描述圖形，放大多少倍都保持清晰。它的 Base64 通常以 PHN2Zy（即編碼後的 <svg）開頭；如果檔案以 XML 宣告開頭，則是 PD94bWw。
SVG 作為圖片使用時，根元素必須帶有 xmlns="http://www.w3.org/2000/svg"。從 HTML 中複製的內聯 SVG 常常缺少這個屬性，生成的 Data URI 就會一片空白。圖片模式下外部資源也會被攔截，SVG 裡引用的網路字型和外鏈圖片都不會載入，需要先把文字轉為路徑，或把這些資源內嵌進去。
用 Base64 還是 URL 編碼？
SVG 本身就是文字，Data URI 可以直接攜帶程式碼，只需對少數字符做百分號編碼（<、>、#、% 和引號）。對於 CSS 中的普通圖示，這種寫法比 Base64 更短，gzip 壓縮效果也更好。如果字串要經過會破壞引號或特殊字元的系統，或者 API 明確要求 Base64，那麼 Base64 更穩妥。
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* 百分號編碼 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");需要百分號編碼形式時，可以使用 Data URI 生成器並選擇百分號編碼。
處理不可信的 SVG
SVG 可以包含 <script> 元素、onload 之類的事件屬性以及指向其他文件的連結。通過 <img> 或 CSS 背景顯示 SVG 時，瀏覽器不會執行其中的指令碼，但同一個檔案內聯到 HTML 中或被單獨開啟時，指令碼就可能執行。如果你的應用允許使用者上傳 SVG，請在儲存或嵌入之前先做淨化處理，例如使用 DOMPurify。Base64 只是讓程式碼不那麼一目瞭然，並不能讓它變得安全。
常見問題
SVG 用 Base64 好還是 URL 編碼好？
在 CSS 中使用 SVG 時，URL 編碼通常更短，也保持可讀。字串需要經過其他系統傳遞，或 API 要求 Base64 時，Base64 更可靠。
為什麼我的 SVG Data URI 不顯示？
xmlns 屬性；百分號編碼的地址中有未轉義的 #；SVG 從其他檔案載入了字型或圖片。可以把 SVG 轉成 PNG 的 Base64 嗎？
可以。把目標格式設為 PNG，瀏覽器會把 SVG 渲染為像素，還可以用「最大寬度」選項縮小結果。