微信小程序能不能用 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 的要求。涉及平台能力的细节请以微信官方文档为准，本文只给通用做法。

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →