Can WeChat Mini Programs use SVG?

Yes, but not by writing an <svg> tag into the page. A mini program has no browser DOM, so SVG nodes cannot be inlined in WXML. The usual routes are treating SVG as an image asset, as a background image, or converting it to base64 / data URI for a component that accepts it. Behaviour differs across base library versions and components, so check the official WeChat documentation and test on a real device before shipping.

Contents

• Three common routes
• Account for bundle size limits
• Recolouring and dark mode
• Checks before launch

Three common routes

(1) Convert the SVG to a base64 data URI and use it in WXSS as background-image. (2) Pass it to an image component's src — whether a raw .svg parses depends on base library and platform, so converting to PNG or a data URI first is safer. (3) For dynamic recolouring, hand the path data to a third-party component that renders SVG, or draw it on canvas.

• Background image: background-image: url("data:image/svg+xml;base64,...")
• Image component: prefer PNG or a compatibility-tested data URI
• Recolouring: consider a monochrome mask approach, or have the server serve differently coloured files

Account for bundle size limits

The main mini-program bundle has a size cap. Inlining dozens of icons as base64 in WXSS ends up larger than PNG equivalents (base64 adds roughly a third). Optimise paths with svgo, strip comments and metadata, then decide between inlining and static assets. With many icons, build a sprite sheet or load on demand.

• Compress the SVG before encoding it
• base64 is roughly one third larger than the original file
• Combine assets when there are many icons; do not inline each one

Recolouring and dark mode

SVG inside a data URI is likewise an independent document, so currentColor does not inherit page styles. To follow a theme the practical answer is two coloured files (or a component that supports masks), swapping the resource URL on theme change.

• Do not rely on inline-SVG currentColor in a mini program
• Two resource sets for light and dark is the safest
• Test on a real device — simulator and device behaviour can differ

Checks before launch

Confirm the base library version, whether the target component supports the format, and test on both iOS and Android devices. Watch the platform's requirements for asset domains and HTTPS. Details that depend on platform capability should be checked against the official WeChat documentation; this article only describes the general approach.

FAQ

← All SVG guides　·　Licence and usage FAQ →