現在很多公眾號都直接在正文頁通過SVG交互動畫增加文章的閱讀交互體驗，而不再跳轉H5。結合這一需求，本期分享的內容是如何開發交互式SVG，并嵌入微信公眾號正文頁。設計師和前端開發同學都可以來學習下。學會了可以接這方面的私活了，短平快地賺小錢錢。

先看下最終SVG交互效果：

(體驗公眾號正文頁實際效果，請到本文底部掃碼關注公眾號)

1 為什么公眾號需要交互SVG

技術要有落地的應用場景才能發揮實效。為什么很多公眾號開始做SVG交互而放棄H5呢？

主要原因有兩點：

H5制作成本高，需要一定的開發周期和服務器支撐。 從正文頁跳轉H5頁面多了一個步驟，容易造成用戶流失。

當然，對于需要復雜交互，或者更多功能的話，還是需要單獨開發H5。

SVG雖然只能實現簡單的交互，但既能增加交互體驗又不會太分散用戶對內容的關注點，在很多場景下還是很有需求的。

2 應用場景

SVG交互本質還是基于SVG SMIL animation，配合SVG的click事件，實現非常簡單的交互。

雖然實現的效果很有限，但還是有很多發揮空間的，比如以下應用場景：

下面開始講解本期Demo的制作全過程。

3 素材制作

3.1 背景圖片

使用PS等軟件設計SVG的背景圖，建議寬度為640px~750px，也可以更高，但文件大小也會增加。 本例制作了 640px x 800px 的jpg背景圖：

3.2 SVG素材

可以去阿里巴巴矢量圖庫(www.iconfont.cn/)網站下載。也可以自行使用AI制作。 但需要注意控制好SVG的圖片尺寸。SVG的圖片的尺寸即點擊區域，所以控制好圖片中空余的留白區域。

本Demo從阿里矢量庫中下載了爆竹SVG，下載后用AI打開，縮小圖片的尺寸：

3.3 導出SVG

由于微信編輯器不允許嵌入 <style><script> 標簽，所以通過AI導出SVG的時候要進行一下設置：