0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG轉CSS
將SVG代碼轉換為可用作CSS屬性的data URI：background-image、mask-image或CSS變數。支援URL和Base64編碼。
格式
CSS屬性
選項
SVG代碼
線路:0角色:0

運作方式

它將 SVG 的程式碼轉換為可在 CSS 中直接使用的 Data URI，這樣你就能將圖示直接嵌入樣式表，而無需單獨檔案或額外的 HTTP 請求。

它提供兩種編碼：URL 編碼（百分號編碼），更短、更易讀，推薦用於 SVG；以及 Base64，稍長但普遍相容。

結果可以產生為 background-image、mask-image（用 CSS 為圖示著色）或可複用的 CSS 變數。事先壓縮 SVG 可進一步減小體積。

範例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL 編碼使 SVG 幾乎可讀，通常比 Base64 更短。
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");作為 mask-image 時，圖示的顏色由元素的 background-color 屬性控制。

使用情境

  • 將 SVG 圖示作為 background-image 嵌入，而不給頁面增加 HTTP 請求。
  • 將 SVG 用作遮罩（mask-image），根據主題或狀態用 CSS 重新著色。
  • 將圖示儲存在 CSS 變數中，並在多個選擇器中複用。
  • 在嵌入前壓縮 SVG，以減小內嵌圖示的體積。

常見問題

URL 編碼和 Base64 哪個更好？

對於 SVG，URL 編碼通常是最佳選擇：由於 SVG 是文字，它能產生更短、更易讀的 Data URI。Base64 提供最大相容性，但會增加約 33% 的體積。

為什麼用 mask-image 而不是 background-image？

使用 background-image 時圖示保留其原始顏色。使用 mask-image 時 SVG 僅定義形狀，顏色由 CSS 提供，非常適合隨主題變化的單色圖示。

壓縮選項有什麼作用？

它在編碼前移除 SVG 的註解並折疊空白，從而在不改變圖形的情況下使最終 Data URI 更小。

我的 SVG 會上傳到伺服器嗎？

不會。轉換完全在你的瀏覽器中進行；SVG 絕不會離開你的電腦。

另請參閱