LocalTools離線瀏覽器工具合集

分類: 開發工具

SVG 轉 CSS 背景圖

站方自行規劃沒找到想要的工具？

把內嵌 SVG 標記轉成 background-image 資料 URI

貼上 SVG 標記，取得 CSS background-image 資料 URI，並附上 background-repeat、background-size 與 background-position 宣告，還有即時預覽讓你在複製前先確認效果。

輸出
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

SVG 不會離開瀏覽器，會直接編碼進 CSS 值中。

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

小型的 SVG 圖示或圖樣，做成內嵌的 CSS 資料 URI 通常比另外發出一個圖片請求更輕量，但手動編碼標記讓它能安全放進 url(...) 值中很容易出錯：引號、角括號與換行都需要小心跳脫。本工具會替你完成這種編碼，讓結果保持簡短且可讀，而不是退而使用 base64；還會依你選擇的重複方式與大小設定即時顯示背景預覽。

使用方式

  1. 貼上要用作背景的 SVG 標記。
  2. 選擇重複方式與縮放大小。
  3. 複製 CSS 宣告，貼進你的樣式表。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

這跟把 SVG 轉成 base64 一樣嗎？
不一樣。它只跳脫少數會破壞 CSS 值的字元，因此資料 URI 會明顯短很多，而且仍可閱讀，不像 base64 那樣是一整段亂碼。
SVG 會被上傳嗎？
不會。編碼是在你的瀏覽器分頁中以純文字取代完成的；你貼上的標記不會離開此頁面。
可以在 SVG 內使用 currentColor 或 CSS 變數嗎？
currentColor 可以，因為瀏覽器會在繪製時才解析它；但 SVG 自身屬性裡參照的 CSS 自訂屬性不行，因為 background-image 資料 URI 是靜態標記，不是即時的樣式表。

回到全部工具