WeChat SVG posts:
three switches that stop the thumb.
SVG isn't motion for show. It's reading-rhythm design in a tight box. In WeChat a reader has two moves: scroll on, or leave. Three places to keep the thumb there longer.
First, a correction. SVG inside WeChat is not a web page. No full scripting, no external assets, and support varies by system and WeChat version. Closer to "layout that moves".
Those constraints push the work toward old-fashioned editing: visuals, pacing and one clear action to get a reader to the next screen.
01Understand the constraints before the creative
- Code is inlined in the post. No external scripts or styles.
- Images and fonts hit whitelist and size limits, so assets get compressed in advance.
- Interaction sticks to basic gestures: tap, long press, swipe. Anything fancier is unreliable.
- Rendering differs between iOS, Android and WeChat versions. Real-device testing isn't optional.
An effect that looks great on the web can land as a blank box in WeChat. The build needs a real-device gate, and it can't be one phone and then publish.
02Switch one: the unfinished first screen
The first screen decides whether anyone continues. The usual mistake is cramming everything in: title, logo, date, QR code, slogan. The more complete it looks, the more finished it feels.
What works is a gap: a sentence left unfinished, an image half covered, an answer that only opens on tap. An unfinished frame creates the drive to keep reading.
Watch the scale. The gap has to be solvable, not a riddle. Readers will swipe once more to learn something now. They won't swipe three times to guess.
03Switch two: cause and effect in the scroll
Scrolling is something the reader does. If the frame changes under their thumb, they feel they caused it. That causality is SVG's most valuable asset.
Three forms that work reliably:
- Erase and reveal. Scrolling pushes a mask aside for the next layer. Good for unfolding information in stages.
- Long press. Press a photo or a button and the frame switches. Good for the surprise of discovery.
- Tap to expand. One tap, the detail appears. Good for second-level information without crowding the first screen.
One test for any cause-and-effect design: if the reader never does the thing, is the information still complete? If not, it's buried too deep and most people never get there. Good SVG reads fine untouched, and better when you touch it.
04Switch three: an end hook that asks for action
Lots of posts end by asking for a like. That isn't a hook, it's a request. A real hook lets the reader finish something worth having: a test, a poster, a document, a booking.
Two things to watch:
- One action only. Three QR codes at the end mean no focus.
- Immediate reward. Feedback at once, not "we'll be in touch".
No conversion goal? Close clean: one line worth remembering, one clear sign-off. White space is design too.
05Build and acceptance: survive a real phone
The usual accident isn't bad design. It's "works on my phone, blank on yours". Before publishing, run these checks:
- One iOS device and one Android, current WeChat versions.
- First-screen load on a weak network, images within the agreed size.
- Motion off or load failed: the information is still complete.
- Long-press and tap targets big enough for a stray thumb.
- Sharing to a chat or Moments: title and thumbnail correct.
- In-post links resolve, landing page opens inside WeChat.
06Production: idea to delivery
Our process: script and pacing sheet, storyboard, assets, inlined code, device testing, publish and review. The pacing sheet is the step most often skipped and the one that matters: which screen attracts, which explains, which converts.
Otherwise you get "every screen looks great, and no reason to stop on the third".
07Last word
The ceiling of an SVG post isn't technical. It's editorial. Motion with no information gets tiring after three swipes; real content gets read to the end.
Decide what you want the reader to remember first. Then decide whether it should move, and where.