微信小程序能不能用 SVG

能用，但不是「把 <svg> 標簽寫進頁面」這種用法。小程序沒有瀏覽器的 DOM，WXML 裏不能直接內聯 SVG 節點；常見做法是把 SVG 當圖片資源、當背景圖，或轉成 base64 / data URI 後交給支持它的組件。不同基礎庫版本與組件表現有差異，正式上線前以微信官方文檔和真機實測爲準。

本文目錄

• 三條常見路徑
• 體積與包體限制要算進去
• 換色與深色模式
• 上線前覈對

三條常見路徑

① 把 SVG 文件轉成 base64 data URI，放進 WXSS 的 background-image；② 交給 image 組件的 src（能否直接解析 .svg 取決於基礎庫與平臺，穩妥起見先轉 PNG 或 data URI）；③ 需要動態換色時，把路徑數據交給支持 SVG 渲染的第三方組件或 canvas 繪製。

• 背景圖：background-image: url("data:image/svg+xml;base64,...")
• image 組件：優先用 PNG 或兼容性驗證過的 data URI
• 需要換色：考慮單色 + mask 思路，或由服務端出不同顏色的文件

體積與包體限制要算進去

小程序主包有體積上限，幾十個圖標如果都以內聯 base64 塞進 WXSS，會比 PNG 還大（base64 約多 1/3）。先用 svgo 壓路徑、去掉註釋與元數據，再決定內聯還是放靜態資源。圖標多時建議做一張雪碧圖或按需加載。

• 先壓縮 SVG，再編碼
• base64 會比原文件大約三分之一
• 圖標很多時合併資源，別逐條內聯

換色與深色模式

data URI 裏的 SVG 同樣是獨立文檔，currentColor 不繼承頁面樣式。要跟隨主題，最實用的是準備兩套顏色的文件（或用支持 mask 的組件），在主題切換時替換資源地址。

• 內聯 SVG 的 currentColor 在小程序裏不可直接依賴
• 深淺主題準備兩套資源最穩
• 真機上看一遍，模擬器與真機表現可能不同

上線前覈對

確認所用基礎庫版本、目標組件是否支持對應格式、iOS 與 Android 真機各測一遍，並留意平臺對資源域名與 HTTPS 的要求。涉及平臺能力的細節請以微信官方文檔爲準，本文只給通用做法。

常見問題

← 返回全部使用指南　·　許可與使用常見問題 →